Vuetify：颜色没有出现

Posted 2023-02-16

【中文标题】Vuetify：颜色没有出现

【英文标题】：Vuetify: colors are not showing up

【发布时间】：2018-10-04 19:21:00

【问题描述】：

我正在尝试将 Vuetify 集成到我现有的 Vue 项目中，但颜色显示不正确。我正在关注https://vuetifyjs.com/en/getting-started/quick-start -> 现有应用程序的指南。

css 文件似乎以某种方式正确加载，因为按钮似乎用阴影突出显示，并且有一些点击效果。但是颜色和文字显示不正确：

我的 main.js

import Vue from "vue";
import App from "./App";
import Vuetify from "vuetify";
import router from "./router";
import "../node_modules/vuetify/dist/vuetify.min.css";

Vue.config.productionTip = false;
Vue.use(Vuetify);

/* eslint-disable no-new */
new Vue(
  el: "#app",
  router,
  components:  App ,
  template: "<App/>"
);

我的组件.vue

<template>
  <div class="hello">
      <v-btn color="success">Success</v-btn>
      <v-btn color="error">Error</v-btn>
      <v-btn color="warning">Warning</v-btn>
      <v-btn color="info">Info</v-btn>
  </div>
</template>

<script>
... // Removed for simplicity
</script>

<style lang="stylus" scoped>
  @import '../../node_modules/vuetify/src/stylus/main' // Ensure you are using stylus-loader
</style>

【问题讨论】：

vuetifyjs.com/en/style/colors#javascript-color-pack

@Traxo 试过了，但还是一样

欲了解更多信息，请阅读本文：我的应用程序看起来不正确vuetifyjs.com/en/getting-started/…

【参考方案1】：

我发现了问题。我不得不将 Vuetify 组件包装在 v-app 标签内。

<v-app>
  <v-btn color="success">Success</v-btn>
  <v-btn color="error">Error</v-btn>
  <v-btn color="warning">Warning</v-btn>
  <v-btn color="info">Info</v-btn>
</v-app>

Vuetify 文档说：

为了让您的应用程序正常工作，您必须将其包装在一个 v-app 组件。该组件用于动态管理您的 内容区域，是许多组件的安装点。

【讨论】：

您需要一个 组件来包装所有 vuetify 内容。所以通常它直接超出 app.vue 中的

【参考方案2】：

最初只需在根 vue 文件或 app.vue 文件中添加 <v-app> 标签 并且不要在任何其他 vue 文件中使用 <v-app> 标签。

在app.vue 文件中：

<template>
  <v-app>
    <HomePage />
  </v-app>
</template>

我认为 vue 的 v-app 的 data-app 问题、颜色问题、modal 问题都可以解决。