Vuetify: 색이 표시되지 않음

Vuetify: 색이 표시되지 않음

기존 Vue 프로젝트에 Vuetify를 통합하려고 하는데 색상이 제대로 나타나지 않고 있어.나는 https://vuetifyjs.com/en/getting-started/quick-start -> 기존 어플리케이션의 가이드를 따라가고 있다.

css 파일은 버튼이 그림자로 강조된 듯하고 클릭 효과가 있어 왠지 올바르게 로드된 것 같다.그러나 색상과 텍스트가 올바르게 표시되지 않음:

my 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/>"
});

나의 구성 요소.부에를 하다

<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>

나는 문제를 발견했다.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 구성 요소로 랩핑해야 한다.이 구성 요소는 컨텐츠 영역을 동적으로 관리하는 데 사용되며, 많은 구성 요소의 장착 지점이다.

처음에 추가만 할 것<v-app>루트 vue 파일 또는 에서 태그 지정app.vue철하고 사용하지 않음<v-app>다른 vue 파일을 태그한다.

인app.vue파일:

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

v-app에 관한 데이터-app 문제, 색상 문제, 모달 문제는 해결될 수 있다고 생각한다.

참조URL: https://stackoverflow.com/questions/50003226/vuetify-colors-are-not-showing-up