Vuetify：颜色未显示

Question

我正在尝试将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/>"
});

我的component.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>

- Caner

---

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

@Traxo 尝试了那个方法，但还是一样。 - Caner

更多信息请阅读此文章：我的应用程序外观不正确https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct - Ing Oscar MR

Answer 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组件中。该组件用于动态管理您的内容区域，并且是许多组件的挂载点。

- Caner

---

你需要使用一个<v-app>组件来包裹所有的vuetify内容。通常情况下，它直接放在app.vue文件的<template>标签外部。 - zlit

Answer 2

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

在app.vue文件中：

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

我认为关于Vue的v-app，数据应用问题、颜色问题和模态问题都可以解决。

- ashiq