gpt4 book ai didi

vuetify.js - Vuetify : colors are not showing up

转载 作者:行者123 更新时间:2023-12-03 10:19:39 25 4
gpt4 key购买 nike

我正在尝试将 Vuetify 集成到我现有的 Vue 项目中,但颜色显示不正确。我正在关注 https://vuetifyjs.com/en/getting-started/quick-start 上的指南-> 现有的应用程序。

css 文件似乎以某种方式正确加载,因为按钮似乎用阴影突出显示,并且有一些点击效果。但是颜色和文本没有正确显示:

enter image description here

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

最佳答案

我发现了问题。我不得不将 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.

关于vuetify.js - Vuetify : colors are not showing up,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50003226/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com