Vuetify 样式不可见

Question

我是 Vue 世界的初学者，所以请忍受我愚蠢的问题。
我有一个我克隆的 Vue 项目的样板代码： Vue Enterprise Boilerplate

我想使用 Vuetify 组件，所以我遵循了以下步骤：
1. 克隆了 vue-enterprise-boilerplate
2. npm install vuetify --save
3. 在我的 main.js 中，我添加了 vuetify 依赖项，如：

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

Vue.use(Vuetify);

4. 我正在使用 Vue CLI 3（它与样板一起提供），而且我已经安装了 CCS Loader。
5. 现在在我的 app.vue 中，我有一个简单的按钮，例如：

<v-app>
  <v-btn color="primary">Test</v-btn>
</v-app>

但是当我运行应用程序时，我只看到按钮的轮廓，而样式却不见了。这是下面的屏幕截图：

这里也是开发工具快照：

如您所见，正在引用 vuetify.min.css，我无法调试为什么这不符合 Vuetify 指南的行为。

我缺少哪些步骤？

Answer 1

对我来说解决这个问题的是.v-application在最顶部的 html 标签（或template标签后的第一个）添加类。通常，如果我添加<v-app>它所有工作但由于某种原因使用 vuitify 2.0.4 这没有工作（可能是因为我没有使用 vue-cli 和 webpack 而是 parcel.js）。

所以添加这个类为我解决了同样的问题。

编辑

其实我只是发现为什么v-app被忽略了。因为我使用的是 vuetify 2.0.4。如果没有 vue-cli 和 webpack，我需要自己包含 vuetify 组件，如下所示：

import Vue from 'vue'
import Vuetify, {
    VCard,
    VImg,
    VCardTitle,
    VBtn,
    VCardActions,
    VCardText,
    VProgressCircular,
    VSpacer,
    VDialog,
    VDivider,
    VAlert,
    VApp,
} from 'vuetify/lib'

Vue.use(Vuetify, {
    components: {
        VCard,
        VImg,
        VCardTitle,
        VBtn,
        VCardActions,
        VCardText,
        VProgressCircular,
        VSpacer,
        VDialog,
        VDivider,
        VAlert,
        VApp,
    },
})

import 'material-design-icons-iconfont/dist/material-design-icons.css';

export default new Vuetify({})

然后像这样在 vue 应用程序中导入：

import Vue from "vue";
import vuetify from './src/vuetify'

import VocabularyApp from "./src/App.vue";

new Vue({
  vuetify,
  render: h => h(VocabularyApp)
}).$mount('#app-tutor');

所以 v-app 无法正常工作，因为我没有将它包含在我的应用程序运行所需的组件列表中。您可以在此处找到更多信息。

Answer 2

欢迎来到 vue 的世界。

您正在查看 Shadow dom，请检查按钮元素而不是按钮元素内的 div 元素。div 的父按钮元素将根据您提供的 prop 具有 .primary .error 等类。

看截图：

我希望这有帮助。