解析组件失败

Question

我正试图将Vuetify添加到我的项目如下所述的步骤:https://next.vuetifyjs.com/en/getting-started/installation/手动步骤

但是我得到了这个警告信息:

[Vue warn]: Failed to resolve component: v-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

我分享我的实现:

TestComponent.vue

<template>
<v-table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="app in stuff" :key="app.name">
<td>{{app.name}}</td>
</tr>
</tbody>
</v-table>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
props: {
msg: String,
stuff: Object,
},
})
export default class Debugger extends Vue {
msg!: string;
stuff!: {name: string, id: number, [key: string]: unknown}[];
title = 'a title';
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

App.vue

<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>
<style lang="scss">
</style>

Answer 1

我只是忘记添加我的vuetify的实例到我的应用程序:

前

createApp(App).use(store).use(router).mount('#app');

>

createApp(App)
.use(store)
.use(router)
.use(vuetify)
.mount('#app');

main.ts

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
const vuetify = createVuetify({
components,
directives,
})
createApp(App)
.use(store)
.use(router)
.use(vuetify)
.mount('#app');