Question

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

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

在
中找到
---＆GT;在src \ App.vue

您可以访问沙箱https://codesandbox.io/s/40rqnl8kw

中的整个代码

Answer 1

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

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

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

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

在<{1}}之前调用

原始 - Vue.use(Vuetify)，导致错误。

Vue.use()

修复 - 在new Vue()允许Vue正确解析依赖关系后调用new Vue({ el: "#app", components: { App }, template: "<App/>" }); Vue.use(Vuetify);。

new Vue()

编辑：此答案在被接受之后已经过修改，以便修复可能误导未来读者的不准确性，为了简单起见尽量减少代码示例中的更改，并避免使问题变为有问题如果codesandbox网站不可用，则无法访问。

Answer 2

如果您来自Google：对我来说，它是从v1到v2的更改，这使大多数Codepen示例都变得毫无用处。我必须更改此设置，以得到一个非常简单的带有导航抽屉的Vuetify应用程序才能再次运行：

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

replace all flat with text

也许这可以帮助某人。

Answer 3

我最近遇到此错误的另一个原因。

我最近从Vuetify 1.5升级到了2.x，尽管我的操作顺序正确无误（如此处当前接受的答案所示），但我仍然收到有关未知v-app的错误：

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

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

"vuetify-loader": "^1.3.0"

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

一旦我添加错误已消失。

Answer 4

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

Answer 5

~~另一个可能的问题是，如果启用了点菜，则还需要指定要包括的所有组件：~~

编辑：看起来VuetifyLoader会自动为您完成

https://vuetifyjs.com/en/framework/a-la-carte

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 } })

Answer 6

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

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

6 个答案: