未找到 v-data-table 组件

Question

我正在尝试使用 vuetify 创建 sudo 数据表。 目的是使用 v-data-table 渲染动态计算的数据

但是，我在将 Vuetify 添加到我的应用程序时遇到问题。

我尝试添加

vue.use(Vuefity)

但它抛出一个错误 ->

Property 'use' does not exist on type 'typeof

这就是我的代码的样子

computed: {
      headers(): string[] {
        return ["test1"]
      },
      items(): string[] {
        return ["test", "t2"];
      }
}

<div>
    This is new data
    {{items[0]}}
    <v-data-table
       :items-per-page="5"
       :items="items"
       :headers="headers"
       class="elevation-1"> 
    </v-data-table>
</div>

这就是我的 main.ts 的样子

import { createApp } from 'vue'
import Vue from 'vue'
import App from './App.vue'

import "vuetify/dist/vuetify.min.css"
import Vuetify from "vuetify"


//Vue.use(Vuetify);
//Vue.readonly(Vuetify);

createApp(App).mount('#app')

当我尝试运行代码时，浏览器无法检测到 v-data-table。 并抛出以下错误：

Failed to resolve component: v-data-table

Answer 1

目前，Vuetify 的某些组件尚未准备好在 Vue 3 中用于生产。 不过在项目中是有办法使用的。 您可以从这里

查看 Vuetify 官方文档的更多详细信息

import { createVuetify } from 'vuetify'
import { VDataTable } from 'vuetify/labs/VDataTable'

export default createVuetify({
 components: {
    VDataTable,
 },
})

Answer 2

Vuetify 目前支持 vue3 使用 vue2。所以

Vue.use

在 vue3 中不可用，并且因为 vuetify disent 添加了

v-data-table

组件不可用。

Answer 3

我收到此错误是因为我使用的是 Vuetify 3.3.1 并且 数据表组件是在 3.4.0 中添加为 Vuetify 的默认部分。

我删除了我的

package-lock.json

，删除了我的

node_modules

目录，将

vuetify

中的

package.json

依赖项更改为：

"vuetify": "^3.4.0",

。然后我跑了

npm install

，

npm run build

，然后

npm run dev

。