Vue/Vuetify-未知的自定义元素:< v-app>-您是否正确注册了组件? [英] Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

问题描述

我是Vue和Vuetify的新手.我刚刚创建了快速应用程序来检查它们.但是我一开始就遇到了问题.尽管遵循了文档中概述的所有步骤，但是该vue无法识别vuetify组件.错误如下所示-

I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below -

vue.runtime.esm.js?ff9b:587 [Vue警告]:未知的自定义元素:-您是否正确注册了组件?递归组件，请确保提供名称"选项.

vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

发现于

--->

您可以在沙箱 https://codesandbox.io/s/40rqnl8kw 中访问整个代码/p>

You can access the entire code at sandbox https://codesandbox.io/s/40rqnl8kw

推荐答案

您的操作顺序可能有问题.您正在定义自己的使用 v-app 组件的 App 组件，甚至还没有告诉Vue使用它，因此Vue假设您正在使用自己的自己的自定义 v-app 组件.

You're likely experiencing a problem with the order of your operations. You're defining your own App component that uses the v-app component before you've even told Vue to make use of it, so Vue assumes you're using your own custom v-app component.

通过 new Vue()启动任何需要Vuetify组件的Vue实例之前，先放置 Vue.use(Vuetify)，或将其放置在组件定义本身中.在单个文件组件中导入Vue和Vuetify后，< script> 标记的顶部.如果您有多个 Vue.use(Vuetify)语句，请不要担心，因为只有第一个语句会做任何事情-所有后续调用都将无济于事.

Place Vue.use(Vuetify) before starting any Vue instances via new Vue() that require Vuetify components, or place it within the component definitions themselves right at the top of the <script> tag after importing Vue and Vuetify within the single file component. Don't worry if you have more than one Vue.use(Vuetify) statement because only the first one will do anything--all subsequent calls will simply do nothing.

原始-在 new Vue()之前调用 Vue.use()，导致错误.

Original - Vue.use() is called before new Vue(), resulting in an error.

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Vue.use(Vuetify);

修复-在 Vue.use()之后调用 new Vue()，Vue可以正确解决依赖关系.

Fix - Calling new Vue() after Vue.use() allows Vue to resolve the dependency correctly.

Vue.use(Vuetify);

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

这篇关于Vue/Vuetify-未知的自定义元素:< v-app>-您是否正确注册了组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！