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

【问题标题】：Vuetify - Unknown custom element problem with any componentVuetify - 任何组件的未知自定义元素问题
【发布时间】：2020-04-13 08:33:22
【问题描述】：

我在过去 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 warn]: Unknown custom element: - 你是否正确注册了组件？对于递归组件，请确保提供 “名称”选项。

发现于

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

我也尝试直接在 vue.app 中使用任何组件并遇到同样的问题。在这里发帖之前，我查找了至少 10 个不同的帖子，我读到我应该在新的 Vue 之前调用 vuetify 但这并没有解决问题。不知道是不是少了点什么，还是看不到问题。

感谢阅读我的文章

【问题讨论】：

终于成功了。问题是它没有加载依赖项。我使用 vue create helloworld 然后 vue add vuetify。这会生成两级 node_modules，第一级包含所有依赖项，第二级位于 src 文件夹中，仅包含 vuetify 依赖项。必须将所有东西一一安装在正确的位置。然后遇到了样式问题，我解决了添加“import”vuetify/dist/vuetify.min.css“;”在我的 plugins/vuetify.js 文件中。希望有一天这对某人有所帮助。

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

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

编辑

哦，我想你需要通过Vuetify

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

他们在这里有一个入门文档：

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

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

【讨论】：

我通过了 Vuetify，但我仍然遇到同样的问题。我开始认为问题可能出在其他地方

【解决方案2】：

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

import vuetify from '@/plugins/vuetify'

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

您的导入路径是 '@/plugins/vuetify' 而不是 './plugins/vuetify' 并将 vuetify 添加到您的 Vue({ }).$mount('#app') 中，如上所示。

希望对你有帮助

【讨论】：

尝试执行此步骤，并按照快速入门文档进行操作，但仍然遇到同样的问题：c
尽量把你的代码放到codesandbox里，方便我们帮你调试