Vue.js Vuetify样式不可见

我是Vue领域的初学者，请容忍我愚蠢的问题。
我有一个Vue项目的样板代码，我从中克隆：

我想使用Vuetify组件，所以我遵循以下步骤：
1.克隆了vue企业样板文件
2.npm安装vuetify--保存
3.在my main.js中，我添加了vuetify依赖项，如：

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

Vue.use(Vuetify);

四,。我使用的是Vue CLI 3（样板文件附带），而且我还安装了CCS加载器。
5.现在在我的app.vue中，我有一个简单的按钮，如：

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

试验

但当我运行应用程序时，我只看到按钮的轮廓，但缺少样式。下面是一个屏幕截图：

这里还有开发工具快照：

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

---

我错过了哪些步骤？

欢迎来到vue的vuetiful世界

您正在查看阴影dom，请检查button元素，而不是button元素中的div元素。div的父按钮元素将根据您提供的属性具有.primary.error之类的类

请参见屏幕截图：

---

我希望这会有所帮助。

我认为这主要是因为企业样板代码已经有了很多UI样式，并且与Vuetify按钮CSS或类似的东西相冲突。您可能需要选择更完整地使用企业模板（不使用Vuetify），或者使用更常见的Vue/Vuetify默认值。e、 g.安装vue cli 3后，只需：

vue create my-app
cd my-app
vue add vuetify

看

---

我知道这对回答您提出的问题没有特别大的帮助，但我的直觉是，您可能需要重新考虑这种方法并采用更主流的vue+vuetify，或者在使用其他UI库（vuetify）时向样板供应商寻求帮助通过特定的站点实现。

解决了我的问题，在最上面的html标记（或

模板

标记之后的第一个标记）添加了class

.v-application

。通常，如果我添加

，这一切都可以正常工作，但由于某些原因，使用vuitify 2.0.4时，这不起作用（可能是因为我使用的不是vue cli和webpack，而是packet.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不起作用，因为我没有将它包括在我的应用程序工作所需的组件列表中。您可以找到更多信息。

在我的例子中，我使用了触控笔，并在vue.config.js中使用了

css.requireModuleExtension=false

选项。样式只是没有加载。将其切换到

true

或删除此选项可以达到目的

// vue.congif.js

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

---

错过了什么风格？在你的检查器中，一切都很好，所有的样式都应该存在there@Aldarund我提到了color=“primary”，这是Vuetify中缺少的蓝色…@pk10您找到解决此问题的方法了吗？我遇到了同样的问题，用

div

替换

v-app

作为包装，并在

template

tag下使用它。要应用任何样式，都需要使用v-app。添加这个对我来说很有效。哦，天哪！搜索了6个小时后你救了我！是的，

v-app

组件基本上需要使所有样式可见。但是，在我的例子中，与

laravelmix

集成。