Vuetify 没有激活它的组件

Question

vue@2.6.10
vuetify@2.2.25

我有以下代码。

Vuetify 插件：

$ cat src/plugins/vuetify.js

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

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    dark: false
  }
});

导入并激活：

$ cat src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';

<some irrelevant code and imports reducted>

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

Root App HTML 代码（减少无关代码）：

$ cat src/App.vue

<template lang="pug">
  #app
    component(:is="layout")
      router-view /
</template>

最后我在其中一个页面中使用它：

$ cat src/layouts/PrivateLayout.vue

<template lang="pug">
div
    v-app
        ...
        router-view
</template>

这就是我在 DevTools 控制台中看到的：

Unknown custom element: <v-app> - did you register the component correctly?

有人知道会发生什么吗？我已经阅读了所有类似的问题（有很多），但没有一个答案有帮助。

---

解决方案

感谢@morphatic，解决方案是：

• 手动导入每个元素
• 或安装自动导入所有内容的软件包：npm install --save vuetify-loader

第二种方式，显然会在您导入多余的东西时增加大小。但它更容易。

Answer 1

这是一个偷偷摸摸的！您的项目结构对我来说是正确的。与我见过的大多数 Vuetify 应用程序唯一不同的部分是这部分：

<template lang="pug">
  #app
    component(:is="layout")
      router-view /
</template>

即使您似乎已经在全局范围内注册了所有 Vuetify 组件，但当您使用动态组件 (<component :is="layout">) 时，我的猜测是构建系统正在执行某种延迟加载或延迟绑定，这会导致 <v-app>不及时加载被识别。 This is mentioned as a special case in the Vuetify docs.

我认为您可以尝试以下几件事：

1. 不要使用动态组件加载布局
2. 显式导入 VApp 以确保它在您需要之前就已存在

很抱歉，我不能更具体，因为我以前没有解决过这个特定问题，但我很确定这是导致它的原因。