我试图将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>
答案 0 :(得分:45)
我发现了问题。我不得不在posts
标签内包装Vuetify组件。
v-app
Vuetify文档说:
为了使您的应用程序正常工作,您必须将其包装在一个 v-app组件。此组件用于动态管理您的 内容区域,是许多组件的安装点。
答案 1 :(得分:5)
最初,只需在根vue文件或<v-app>
文件中添加app.vue
标签
并且不要在任何其他vue文件中使用<v-app>
标签。
在app.vue
文件中:
<template>
<v-app>
<HomePage />
</v-app>
</template>
我认为与vue的v-app有关的数据应用程序问题,颜色问题,模式问题都可以解决。