“[Vue warn]: Unknown custom element: ...”错误，当使用 vuetify UI 组件和 vue-cli-plugin-vuetify

Question

我的项目设置是使用 vue-cli 和 vue-cli-plugin-vuetify。当我想使用任何 List Components 时，浏览器控制台会在大多数 vuetify 元素上抛出错误，例如：

[Vue warn]: Unknown custom element: <v-list-item-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我的猜测是我需要对文件 /plugins/vuetify.js 做一些额外的配置才能使列表正常工作，但我不知道如何做。

我的文件 vuetify.js 如下所示：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

main.js:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

问题：如何使 vuetify 中的所有组件正常工作？

感谢您的帮助！

编辑：

基本上，我所做的是使用 vue create projectX 创建一个新项目，然后使用 vue add vuetify 添加 vuetify。现在我希望能够使用 vuetify documentation 中的示例。但是复制和粘贴示例会导致所描述的错误...

Answer 1

尝试 import Vuetify from 'vuetify' 而不是 import Vuetify from 'vuetify/lib'

它将导入所有 vuetify 组件，您将能够在没有任何声明的情况下使用它们。

或者，如果您想继续使用 A-La-Carte 模式，试试这个：

import Vue from 'vue'
import Vuetify, {
  VCard,
  VRating,
  VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VCard,
    VRating,
    VToolbar,
  },

其中 VCard、VRating 等只是示例。

Answer 2

如果您正在使用 Vuetify 2.x，您需要从 vuetify.js

导出 Vuetify 对象

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    dark: false // From 2.0 You have to select the theme dark or light here
  },
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  }
})

然后导入并在main.js

中使用

main.js

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  store,
  render: h => h(App)
}).$mount('#app'

Answer 3

尝试使用以下方式更新 vuetify：npm install -S vuetify@2.0.1

Answer 4

这为我解决了这个问题。 https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency 的文档建议创建一个实例并将其传递给挂载。

beforeEach(() => {
  vuetify = new Vuetify()
})

const wrapper = mount(CustomCard, {
  localVue,
  vuetify
})

“[Vue warn]: Unknown custom element: ...”错误，当使用 vuetify UI 组件和 vue-cli-plugin-vuetify

"[Vue warn]: Unknown custom element: ..." Error, when using vuetify UI components with the vue-cli-plugin-vuetify

vue.js

vuejs2

vuetify.js

vue-cli

vue-cli-3