Vuetify 样式不可见

Posted 2023-02-23

【中文标题】Vuetify 样式不可见

【英文标题】：Vuetify Styles not visible

【发布时间】：2018-12-15 13:21:14

【问题描述】：

我是 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 指南。

我缺少哪些步骤？

【问题讨论】：

遗漏了哪些样式？在您的检查器中一切都很好，所有应该存在的样式都在那里

@Aldarund 我已经提到了 color="primary"，它是 Vuetify 中的一种蓝色，它是缺失的......

@pk10 你找到解决这个问题的方法了吗？我遇到了同样的问题

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

【参考方案1】：

对我来说解决问题的是在最顶部的 html 标记（或 template 标记之后的第一个）添加类 .v-application。通常，如果我添加 <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。

【讨论】：

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

天哪！经过 6 小时的搜索，你救了我！是的，基本上需要v-app 组件才能使所有样式可见。但是，就我而言，与Laravel-Mix 集成。

【参考方案2】：

欢迎来到 vue 的 vuetiful 世界。

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

看截图：

我希望这会有所帮助。

【参考方案3】：

我认为这主要是企业样板代码的问题，其中包含大量 UI 样式已经到位，并且与 Vuetify 按钮 CSS 或类似的东西冲突。您可能需要选择更完整地使用企业模板（没有 Vuetify），或者使用更常见的 Vue/Vuetify 默认值。例如安装了 vue-cli 3，只需：

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

见https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3

我知道这对于实际回答您提出的问题并不是特别有帮助，但我的直觉是您可能需要重新考虑这种方法并使用更主流的 vue+vuetify，或者问当使用具有特定站点实现的替代 UI 库 (Vuetify) 时，样板的提供者寻求帮助。

【参考方案4】：

在我的例子中，我使用了手写笔，并且在 vue.config.js 中有 css.requireModuleExtension = false 选项。样式只是没有加载。将其切换为 true 或删除此选项即可。

// vue.congif.js

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