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>

Answer 1

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

<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组件中.此组件用于动态管理您的内容区域,是许多组件的安装点.

Answer 2

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

在app.vue文件中：

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

我认为与 vue 的 v-app 相关的数据应用问题、颜色问题、模态问题都可以解决。