Question

嘿，我在导入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"
        }
    }
});

Answer 1

同样的问题已经困扰了我一个多小时，这也不起作用：但这是我在vuetify.js中导入vuetify时所做的更改

已更改：

import Vuetify from 'vuetify/lib'

替换为：

import Vuetify from 'vuetify'

注意：仅由于正式的vuetify文档具有第一种形式，所以这可能是一个问题。

Answer 2

知道用vue-cli v3创建的项目吗？您要么需要自己注册组件，要么添加一个vuetify加载器，以解析您的组件并生成该列表本身。您可以在这里https://vuetifyjs.com/en/customization/a-la-carte#vuetify-loader

找到相应的文档

Answer 3

要将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>

Answer 4

更改

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

收件人

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

Answer 5

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

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

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

新Vue（{ 证明渲染：h => h（App） }）。$ mount（'＃app'）;

第3步：重新启动项目，因为只要在main.js文件中进行了更改，就需要重新启动项目。

Answer 6

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

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

const wrapper = mount(CustomCard, {
  localVue,
  vuetify
})

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

6 个答案: