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

Posted 2023-02-16

【中文标题】Vue/Vuetify - 未知的自定义元素：<v-app> - 您是不是正确注册了组件？

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

【发布时间】：2018-10-22 06:00:38

【问题描述】：

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

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

发现于

---> 在 src\App.vue

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

【参考方案1】：

In case someone like me new working on vue and nuxt. my mistake was that 
i didnot put the s in the last.
buildModule should be 
**buildModules**
here is my 
nuxt.config.js
export default 
    buildModules:[
        "@nuxtjs/vuetify"
    ],
    module:[
        "@nuxtjs/axios"
    ],
    components:true

【讨论】：

检查错别字是很好的一般建议，但似乎不是原始问题的一部分。答案应该给出具体问题的解决方案，而不仅仅是轶事

【参考方案2】：

使用 vuetify v2.x 您应该按如下方式注册 vuetify 插件：

import Vue from 'vue'

/** register vuetify plugin globally **/

import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = 
const vuetify= new Vuetify(opts)
/****/

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

Vuetify v3

import  createApp  from 'vue'

import App from './App.vue'

/*****/
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import  createVuetify  from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

const vuetify= createVuetify(
  components,
  directives,
)
/****/

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

【参考方案3】：

编辑：看起来VuetifyLoader 会自动为您完成这项工作。

旧答案：另一个可能的问题是，如果您启用了点菜，您还需要指定您想要包含的所有组件：

import Vue from 'vue'
import App from './App.vue'
import Vuetify, 
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
 from 'vuetify/lib'
import  Ripple  from 'vuetify/lib/directives'

Vue.use(Vuetify, 
  components: 
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  ,
  directives: 
    Ripple
  
)

【参考方案4】：

我遇到了同样的问题。是浏览器缓存造成的，请务必清除缓存。

【讨论】：

天哪，清除了多次，但后来又刷新了一些。讨厌 Safari...

【参考方案5】：

您的操作顺序可能存在问题。在您告诉 Vue 使用它之前，您正在定义自己的 App 组件，该组件使用 v-app 组件，因此 Vue 假设您正在使用自己的自定义 v-app 组件。

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

---

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

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

Vue.use(Vuetify);

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

Vue.use(Vuetify);

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

【讨论】：

ty!.. 这解决了问题。我只是想知道在 main.js 中导入 Vuetify 之前你怎么能做 Vue.use(Vuetify)

仔细查看后，您可以保留大部分main.js 代码。只需将Vue.use() 移到new Vue() 之前。问题是，一旦你创建了 Vue 实例，就太晚了，不能通过Vue.use() 告诉 Vue 使用 Vuetify。运算顺序在编程中非常重要！这是一个更新的示例：codesandbox.io/s/o5jxzr4xvz

事实上，看看这个：你完全可以在导入之前做Vue.use(Vuetify)！重要的是，在使用 Vuetify 组件的任何 Vue 实例上执行 new Vue() 之前，您必须使用 Vue.use(Vuetify)！ codesandbox.io/s/o5jxzr4xvz

我发誓我是按顺序玩的。可能 b 我应该从逻辑上考虑一下。谢谢你的澄清。

【参考方案6】：

如果您来自 Google：对我来说，这是从 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

也许这对某人有帮助。

（已编辑加入丛宇的话）

【讨论】：

看来第三行应该是replace v-app-bar-side-icon with v-app-bar-nav-icon，至少是vuetify@2.x。

【参考方案7】：

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

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

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

原来升级过程需要在我的 vuetify 1.5x 包中最初不存在的 package.json devDependencies 部分添加以下内容：

"vuetify-loader": "^1.3.0"

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

一旦我添加了错误就消失了。

【讨论】：

同样，我添加了一个开发依赖，它可以工作： "vue-cli-plugin-vuetify": "^2.0.3"

如果你 vue add vuetify 如Quick Start section 所示，它会安装“vue-cli-plugin-vuetify”，所以这是朝着正确方向迈出的一步，@he-ming。对我来说不幸的是，仅仅迁移到工作岗位是不够的。