时间戳

首页 > 解决方案 > “[Vue 警告]：未知的自定义元素：...”错误，当使用带有 vue-cli-plugin-vuetify 的 vuetify UI 组件时

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

问题描述

我的项目设置是使用带有 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然后添加 vuetify with vue add vuetify。现在我希望能够使用vuetify 文档中的示例。但是复制和粘贴示例会导致所描述的错误......

标签： vue.jsvuejs2vuetify.jsvue-clivue-cli-3

解决方案

尝试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 等只是示例。

推荐阅读