未知的自定义元素：<v-app> - 您是不是正确注册了组件？对于递归组件

Posted 2023-02-22

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

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

【发布时间】：2019-12-14 17:33:34

【问题描述】：

嘿，我在将 vuetify 导入我的项目时遇到问题...

我做错了什么？

[Vue 警告]：未知的自定义元素：- 你是否注册了 组件正确吗？对于递归组件，请确保提供 “名称”选项。

app.js：

import Vue from "vue";
import Vuetify from "./plugins/vuetify";
import store from "~/store";
import router from "~/router";

import App from "~/components/App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue(
    store,
    router,
    Vuetify,
    ...App
);

App.vue：

<template>
  <v-app>
    <loading ref="loading" />
    <router-view />
  </v-app>
</template>

<script>
import Loading from "./Loading";

export default 
  el: "#app",
  components: 
    Loading
  
;
</script>

<style>
</style>

plugins/vuetify.js：

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify(
    icons: 
        iconfont: "md" // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
    ,
    theme: 
        dark: false
    ,
    themes: 
        light: 
            primary: "#4682b4",
            secondary: "#b0bec5",
            accent: "#8c9eff",
            error: "#b71c1c"
        
    
);

【问题讨论】：

你能以某种方式让它工作吗？我有同样的问题。也许你可以提供答案。

【参考方案1】：

用 vue-cli v3 创建了那个项目？您要么需要自己注册组件，要么添加一个 vuetify 加载器，它会解析您的组件并自行生成该列表。您可以在这里找到相应的文档https://vuetifyjs.com/en/customization/a-la-carte#vuetify-loader

【讨论】：

用 laravel 创建的项目

【参考方案2】：

要将 Vuetify 添加到现有项目，您应该遵循以下步骤

在你的项目文件夹中运行，

npm install vuetify --save

在你的 app.js 中

import Vuetify from 'vuetify/lib'
// To add vuetify css file
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

export default new Vuetify( ... )

最后，您需要添加一个包装整个应用程序的 v-app 组件，以使 Vuetify 正常工作。

<v-app id="app">
  <router-view/>
</v-app>

【参考方案3】：

改变

    new Vue(
    store,
    router,
    Vuetify,
    ...App
);

到

    store,
    router,
    vuetify: Vuetify,
    ...App
   );

【参考方案4】：

同样的问题困扰了我一个小时，我也不知道它是如何工作的：但这是我在 vuetify.js 中导入 vuetify 时所做的更改

改变：

import Vuetify from 'vuetify/lib'

替换为：

import Vuetify from 'vuetify'

注意：这可能只是一个 laravel 问题，因为官方 vuetify 文档有第一种形式。

【讨论】：

这似乎对我有所帮助。对我来说还有一个问题：我有一个基于 BootstrapVue 构建的给定项目，现在我也想合并 Vuetify。

不是 laravel 问题，我在全新的 CLI 安装中遇到了这个问题。不知道为什么。

In order to use treeshaking, you must import Vuetify from vuetify/lib. 这不是永久修复。

我最初有import Vuetify from 'vuetify'，但是当我查看我们的捆绑包大小时，我读到treeshaking，上面写着In order to use treeshaking, you must import Vuetify from vuetify/lib.

【参考方案5】：

第 1 步：使用“vue add vuetify”命令在您的项目中安装 Vuetify

第 2 步：在 main.js 中编写以下代码

从 './plugins/vuetify' 导入 vuetify； //添加vuetify时安装的plugins文件夹

新的 Vue( 验证， 渲染：h => h(App) ).$mount('#app');

第 3 步：重新启动您的项目，因为每当您更改 main.js 文件时，您都需要重新启动您的项目。

【参考方案6】：

https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency 的文档建议创建一个实例并将其传递给 mount。

beforeEach(() => 
  vuetify = new Vuetify()
)

const wrapper = mount(CustomCard, 
  localVue,
  vuetify
)