Vuetify:颜色不显示 [英] Vuetify: colors are not showing up
问题描述
我正在尝试将 Vuetify 集成到我现有的 Vue 项目中，但颜色显示不正确.我正在遵循
我的 main.js
从vue"导入Vue；从./App"导入应用程序；从vuetify"导入 Vuetify；从./router"导入路由器；导入../node_modules/vuetify/dist/vuetify.min.css"；Vue.config.productionTip = false;Vue.use(Vuetify);/* eslint-disable no-new */新的 Vue({el: "#app",路由器，组件:{应用}，模板:<应用程序/>"});我的组件.vue
<div class="你好"><v-btn color="success">成功</v-btn><v-btn color="error">错误</v-btn><v-btn color="warning">警告</v-btn><v-btn color="info">信息</v-btn></模板><脚本>...//为简单起见删除<style lang="stylus" 作用域>@import '../../node_modules/vuetify/src/stylus/main'//确保你正在使用 stylus-loader</风格>
我发现了问题.我不得不将 Vuetify 组件包装在 v-app 标签中.
<v-btn color="success">成功</v-btn><v-btn color="error">错误</v-btn><v-btn color="warning">警告</v-btn><v-btn color="info">信息</v-btn></v-app> Vuetify 文档说:
<块引用>为了使您的应用程序正常工作，您必须将其包装在v-app 组件.此组件用于动态管理您的内容区域，是许多组件的安装点.
I'm trying to integrate Vuetify to my existing Vue project, but the colors are not showing up correctly. I'm following the guide at https://vuetifyjs.com/en/getting-started/quick-start -> existing applications.
The css file seems to be somehow loaded correctly as buttons seems to be highlighted with shadows and there are some click effects. However the colors and the text are not showing up correctly:
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/>"
});
My 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>
I found the problem. I had to wrap Vuetify components inside v-app tag.
<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 documentation says:
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.
这篇关于Vuetify:颜色不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
