vue.js - 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 加载器。
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 无法工作，因为我没有将其包含在我的应用程序工作所需的组件列表中。更多您可以找到here .