未知的自定义元素：安装 vuetify 后的 <v-btn>答案

【问题标题】：Unknown custom element: <v-btn> after installing vuetify未知的自定义元素：安装 vuetify 后的 <v-btn>
【发布时间】：2021-09-02 09:47:27
【问题描述】：

我不确定为什么这不起作用。但我在 src/plugins/vuetify.ts 中创建了一个文件，如下所示：

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

Vue.use(Vuetify);

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#3f51b5",
        secondary: "#b0bec5",
        anchor: "#8c9eff",
      },
    },
  },
});
  
export default vuetify;

然后在我的 main.ts 我做了这个：

import "./registerServiceWorker";

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import vuetify from "@/plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h: any) => h(App),
}).$mount("#app");

但是当我尝试启动我的应用程序时，即使它已编译，当我导航到我的组件时，我看到它状态：

[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>

有人知道为什么吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我认为您缺少 webpack vuetify-loader。

// webpack.config.js

const { VuetifyLoaderPlugin } = require('vuetify-loader')

exports.plugins.push(
  new VuetifyLoaderPlugin()
)

如果不使用自定义 webpack 加载器，也可以像这样导入 vuetify：

// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

const vuetify = new Vuetify({});

export default vuetify;

【讨论】：

这不正是我在做什么的底部答案吗？
不，导入是from 'vuetify'而不是from 'vuetify/lib'，它也包括css。但是很好，你发现了你的问题:)

【解决方案2】：

原来插件没有正确安装。

【讨论】：