【问题标题】：Vuetify - custom color cannot be appliedVuetify - 无法应用自定义颜色
【发布时间】：2019-06-01 02:40:21
【问题描述】：

Vuetify 版本 1.4.0 - 基本的默认设置，因为我是 Vue.js 的新手。我的 v 按钮自定义原色被标准 Vuetify 颜色覆盖。另外，我没有安装任何额外的样式文件。这是我的文件：

========================================

应用程序.vue

<template>
<v-app>
<v-container fluid>
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-btn color="primary">test</v-btn>      //defaults to factory color
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>


=================================================
main.js
=================================================
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'


Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

import Vuetify, {
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
components: {
VApp,
VNavigationDrawer,
VFooter,
VToolbar

},
directives: {
Ripple
}
})

Vue.use(Vuetify, {
theme: {
"primary": "#FB8C00",   
"secondary": "#424242",
"accent": "#FF5252",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})


Any help is greatly appreciated,
Lesiu

【问题讨论】：

编辑您的问题，以便每个文件显示相应的代码。我认为您错误地粘贴了它。

标签： vue.js colors vuetify.js

【解决方案1】：

导入 Vuetify，{ VApp, // 必需 VNavigationDrawer, V页脚，工具栏 } 来自'vuetify/lib'

导入 Vuetify，{ VApp, // 必需 VNavigationDrawer, V页脚，工具栏 } from 'vuetify' // 移除 /lib 修复了问题

Vue 版本：Vue CLI v3.2.1 Vuetfiy 版本：1.4.0

【讨论】：

【解决方案2】：

现在您正在调用 Vuetify (Vue.use('vuetify'))。这不起作用，因为 Vue.use 会自动阻止您多次使用同一个插件，因此在同一个插件上多次调用它只会安装一次插件。

相反，删除 Vue.use('Vuetify', ...) 并替换为 before new Vue({..})。

import Vue from 'vue'
import App from './App.vue'

import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar
} from 'vuetify/lib'

import { Ripple } from 'vuetify/lib/directives'

Vue.config.productionTip = false

Vue.use(Vuetify, {
    components: {
        VApp,
        VNavigationDrawer,
        VFooter,
        VToolbar
    },
    directives: {
        Ripple
    }, 
    theme: {
        "primary": "#FB8C00",   
        "secondary": "#424242",
        "accent": "#FF5252",
        "error": "#FF5252",
        "info": "#2196F3",
        "success": "#4CAF50",
        "warning": "#FB8C00"
    }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

【讨论】：

谢谢，我已经更新了，但还是同样的问题：Vue.use(Vuetify, { }, directives: { Ripple }, theme: { } }) import Vuetify, { ... } new Vue({ render: h => h(App), }).$mount('#app')
您在导入 Vue 之前调用了它。这有点奇怪，对吧？这就像吃了一个苹果然后去商店买它（也就是不可能的）。我已更新我的答案以显示正确的顺序。