首页 文章

Vue / Vuetify - 未知的自定义元素：<v-app> - 您是否正确注册了组件？

提问于
浏览 次
3

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

vue.runtime.esm.js？ff9b：587 [Vue警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项 . 在---> src \ App.vue中找到

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

javascript vue.js vuetify.js

1 回答

  • 4

    您're likely experiencing a problem with the order of your operations. For instance, you'在使用自己的自定义 v-app 组件之前，使用 v-app 组件定义自己的 App 组件 .

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

    以下是操作顺序中的修复示例：https://codesandbox.io/s/m9jpw517op

    为了在将来链接中断的情况下提供代码片段：

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

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

Vue.use(Vuetify);

    Fix - 在 Vue.use() 之后调用 new Vue() 允许Vue正确解析依赖关系 .

    Vue.use(Vuetify);

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

    Edit: 此答案在被接受之后已被修改，以便修复可能误导未来读者的不准确性，为了简单起见尽量减少代码示例中的更改，并避免在codeandbox网站不可用时无法访问该修复程序 .

    回复于

相关问题