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

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

Answer 2

尝试用import Vuetify from 'vuetify'代替import Vuetify from 'vuetify/lib'

它将导入所有vuetify组件，您将可以使用它们而无需任何声明。

或者，如果您想继续使用“点菜”模式，请尝试以下一种方法：

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 3

如果您使用的是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 4

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

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

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

“ [Vue警告]：未知的自定义元素：...”与vue-cli-plugin-vuetify一起使用vuetify UI组件时出错

4 个答案: