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

yvfmudvl  于 2022-12-19  发布在  Vue.js
关注(0)|答案(8)|浏览(248)

我是Vue和Vuetify的新手。我刚刚创建了快速应用程序来检查它们。但我在开始时遇到了问题。尽管遵循了文档中概述的所有步骤,但VUE未能识别Vuetify组件。错误如下-
vue.运行时间.esm.js?ff 9 b:587 [Vue警告]:未知的自定义元素:- 您是否正确注册了组件?对于递归组件,请确保提供“name”选项。
发现于
---〉位于源\应用程序版本
您可以在沙箱https://codesandbox.io/s/40rqnl8kw中访问整个代码

wmomyfyw

wmomyfyw1#

您很可能遇到了操作顺序的问题,您定义了自己的App组件,该组件使用了v-app组件,而您甚至还没有告诉Vue使用它,因此Vue假设您使用的是自己的自定义v-app组件。
在通过new Vue()启动任何需要Vuetify组件的Vue示例之前放置Vue.use(Vuetify),或者在单个文件组件中导入Vue和Vuetify之后,将其放置在组件定义本身中<script>标记的顶部。如果您有多个Vue.use(Vuetify)语句,请不要担心,因为只有第一个语句会执行任何操作--所有后续调用都不会执行任何操作。

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

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/>"
});
dz6r00yl

dz6r00yl2#

我最近遇到的这个错误还有另一个原因。
我最近从Vuetify 1.5升级到2.x,即使我的操作顺序正确,因为在目前接受的答案在这里,我仍然收到有关V-应用程序未知的错误:
未知的自定义元素:<v-app>-您是否正确注册了组件?对于递归组件,请确保提供"name"选项。
原来升级过程需要在package.json devDependencies部分添加以下内容,而我的vuetify 1.5x软件包中原本不存在这些内容:

"vuetify-loader": "^1.3.0"

(截至本文撰写时的1.3.0当前版本)
一旦我补充说,错误就消失了。

7cjasjjr

7cjasjjr3#

如果您来自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

也许这能帮上忙。
(编辑加入丛宇的话)

cygmwpex

cygmwpex4#

**编辑:**看起来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
  }
})
2exbekwf

2exbekwf5#

使用vuetifyv2.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')

验证版本3

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/components'
import * as directives from 'vuetify/directives'

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

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

app.mount('#app')
jv4diomz

jv4diomz6#

我遇到了同样的问题。这是由浏览器该高速缓存引起的,请确保也清除缓存。

0x6upsns

0x6upsns7#

你会得到这个错误,即使在安装官方Vuetify 3(阿尔法),由于在安装过程中生成的标准演示版本缺乏添加组件,即:

import * as components from "vuetify/components";
    import * as directives from "vuetify/directives";

    const vuetify = createVuetify({
            components,
            directives,
        });

因此,Vuetify 3的main.ts工作版本为:

import "vuetify/styles"; // Global CSS has to be imported
    import { createApp } from "vue";
    import { createVuetify } from "vuetify";
    import App from "./App.vue";
    import * as components from "vuetify/components";
    import * as directives from "vuetify/directives";
    
    const app = createApp(App);
    const vuetify = createVuetify({
        components,
        directives,
    });

    app.use(vuetify).mount("#app");    
    // or app.use(vuetify); app.mount("#app");
ryevplcw

ryevplcw8#

如果有人像我一样新的工作在vue和nuxt。我的错误是,我没有把s在最后。buildModule应该是buildModules
我的nuxt.config.js:

export default {
    buildModules:[
        "@nuxtjs/vuetify"
    ],
    module:[
        "@nuxtjs/axios"
    ],
    components:true
}

相关问题