Question

最近2个小时我一直在尝试解决此问题，但找不到解决方案。我用Vue cli创建了一个新项目，并用npm安装了Vuetify。

我的文件是这样的

App.vue

    <template>
    <v-app id="app">
       <HelloWorld/>
      </v-app>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld.vue';

    export default {
      name: 'App',
      components: {
        HelloWorld
      },

      data: () => ({
        //
      }),
    };
    </script>

main.js

    import Vue from 'vue'
    import Vuetify from './plugins/vuetify';
    import App from './App.vue'

    Vue.config.productionTip = false

    Vue.use(Vuetify); 

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

HelloWorld.vue

    <template>
       <v-tabs>
        <v-tab>Item One</v-tab>
        <v-tab>Item Two</v-tab>
        <v-tab>Item Three</v-tab>
      </v-tabs>
    </template>

    <script>
      export default {
        name: 'HelloWorld',
      }
    </script>

我得到的错误是：

** [Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供   “名称”选项。

位于

--->在components / HelloWorld.vue中           在App.vue            **

我还尝试直接在vue.app中使用任何组件，并遇到相同的问题。在这里发布之前，我至少查找了10个不同的帖子，并且我读到我应该在新的Vue之前先调用vuetify，但这不能解决问题。我不知道是否缺少某些东西，或者我只是看不到问题。

感谢您阅读我的帖子

Answer 1

我怀疑问题出在<v-tabs>。我对vuetify不太熟悉。该组件不应该被导入和注册（就像其他任何组件一样？）。

编辑

哦，我认为您需要通过Vuetify

new Vue({
  Vuetify,
}).$mount('#app')

他们在这里有入门文档：

https://vuetifyjs.com/en/getting-started/quick-start

尝试以相同的方式设置您的项目。

Answer 2

尝试遵循Vuetify中的快速入门文档。

import vuetify from '@/plugins/vuetify'

new Vue({
  vuetify,
}).$mount('#app')

您的导入路径为'@ / plugins / vuetify'，而不是'./ plugins / vuetify' 并将vuetify添加到您的Vue（{}）。$ mount（'＃app'）中，如上所述。

希望有帮助

Vuetify-任何组件的未知自定义元素问题

2 个答案: