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

Question

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

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

在发现

--->在src\App.vue

您可以访问sandbox https://codesandbox.io/s/40rqnl8kw上的整个代码

Answer 1

我最近遇到的这个错误还有另一个原因。

我最近从 Vuetify 1.5 升级到 2.x，即使我的操作顺序与当前接受的答案一样正确，但我仍然收到关于 v-app 未知的错误：

未知的自定义元素：<v-app>- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

事实证明，升级过程需要在 package.json devDependencies 部分添加以下内容，而我的 vuetify 1.5x 软件包中原本不存在该部分：

"vuetify-loader": "^1.3.0"

（撰写本文时为 1.3.0 当前版本）

一旦我补充说错误就消失了。

Answer 2

您可能会遇到操作顺序问题.例如,在您甚至告诉Vue使用它之前,您正在定义自己App使用该v-app组件的组件,因此Vue假设您正在使用自己的自定义v-app组件.

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

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

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

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

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

Vue.use(Vuetify);

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

Vue.use(Vuetify);

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

编辑:这个答案在被接受之后已被修改,以便修复可能误导未来读者的不准确性,为了简单起见,最小化代码示例中的更改,并避免在codeandbox网站变得不可用时无法访问有问题的修复程序.

Answer 3

如果你来自谷歌：对我来说，它破坏了从 v1 到 v2 的变化，这使得大多数 Codepen 示例无用。我不得不改变这一点，以获得一个非常简单的 Vuetify 应用程序，并再次运行带有导航抽屉的应用程序：

remove toolbar from <v-app toolbar>
replace v-toolbar with v-app-bar
replace v-app-bar-side-icon with v-app-bar-nav-icon
replace v-app-bar-title with v-toolbar
replace v-list-tile to v-list-item

replace all flat with text

也许这对某人有帮助。

（编辑包括从宇的评论）