“[Vue 警告]：未知的自定义元素：...”错误，当使用 vue-cli-plugin-vuetify 的 vuetify UI 组件时答案

【问题标题】："[Vue warn]: Unknown custom element: ..." Error, when using vuetify UI components with the vue-cli-plugin-vuetify“[Vue 警告]：未知的自定义元素：...”错误，当使用 vue-cli-plugin-vuetify 的 vuetify UI 组件时
【发布时间】：2019-12-04 13:42:57
【问题描述】：

我的项目设置是使用带有 vue-cli-plugin-vuetify 的 vue-cli。当我想使用任何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 中的示例。但是复制和粘贴示例会导致所描述的错误...

【问题讨论】：

你能出示你的main.js吗？
当然，我更新了我的帖子

标签： vue.js vuejs2 vuetify.js vue-cli vue-cli-3

【解决方案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 等只是示例。

【讨论】：

当我使用 import Vuetify from 'vuetify' 而不是 import Vuetify from 'vuetify/lib' 我得到以下编译错误："export 'default' (imported as 'vuetify') was not found in './plugins/vuetify'

【解决方案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'

【讨论】：

谢谢，不幸的是，当我使用此代码时，应用程序未在浏览器中呈现，浏览器控制台抛出此错误：TypeError: vuetify_lib__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor。我错过了什么吗？我正在使用 vue 版本 3.8.2

【解决方案3】：

尝试更新 vuetify：npm install -S vuetify@2.0.1

【讨论】：

【解决方案4】：

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

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

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

【讨论】：