Vuetify样式不可见。

Question

我是一名Vue世界的初学者，请谅解我的愚蠢问题。
我从Vue企业模板克隆了一个Vue项目的样板代码。
我想使用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指南中的表现方式。

我漏掉了哪些步骤？

- pk10

---

哪些样式缺失了？在您的检查器中，一切都很好，应该有的所有样式都在那里。 - Aldarund

@Aldarund，我提到了color="primary"，这是Vuetify中的蓝色，但现在缺失了... - pk10

@pk10，你找到这个问题的解决方案了吗？我也遇到了同样的问题。 - neza

尝试将v-app替换为div作为包装器，并在template标签下使用它。 - Kartik Garasia

Answer 1

我解决这个问题的方法是在最上面的html标签（或template标签之后的第一个标签）中添加类“.v-application”。通常，如果我添加“”就可以解决问题，但出于某种原因，在使用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应用程序中像这样导入：

然后在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包含在需要应用程序正常运行的组件列表中，所以v-app无法正常工作。更多信息可以在这里找到。

- Ale

---

需要V-App才能应用任何样式。添加这个对我有用。 - rcheuk

哦，老兄！你救了我，我已经搜索了6个小时！是的，v-app组件是必需的，以使所有样式可见。但在我的情况下需要与Laravel-Mix集成。 - Babaktrad

Answer 2

在我的情况下，我使用了Stylus，并在vue.config.js中设置了css.requireModuleExtension = false选项。但样式没有加载。将其切换为true或删除此选项就解决了问题。

// vue.congif.js

module.exports = {
  // ...
  css: {
    // ...
    requireModuleExtension: true
  }
  // ...
}

- mcmimik

Answer 3

欢迎来到 Vue 的美妙世界。

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

请参考下面的截图：

希望这能有所帮助。

- Ankit Kumar Ojha