我正在尝试将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>
解决方法
我发现了问题.我不得不将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文档说：
In order for your application to work properly,you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the mounting point for many components.