Vuetify - пользовательский цвет не может быть применен

Question

• Vuetify версия 1.4.0 - базовая настройка по умолчанию, так как я новичок в Vue.js. Мой основной основной цвет для кнопки v перезаписывается стандартным цветом Vuetify. Кроме того, я не установил никаких дополнительных файлов стилей. Вот мои файлы:

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

App.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

Answer 1

импорт Vuetify, { VApp, // требуется VNavigationDrawer, VFooter, VToolbar } из 'vuetify / lib'

import Vuetify, { VApp, // требуется VNavigationDrawer, VFooter, VToolbar } из 'vuetify' // удаление / lib решило проблему

Vue версия: Vue CLI v3.2.1 Vuetfiy версия: 1.4.0

Answer 2

Прямо сейчас вы звоните Vuetify (Vue.use('vuetify')). Это не сработает, потому что Vue.use автоматически запрещает вам использовать один и тот же плагин более одного раза, поэтому вызов его несколько раз на одном и том же плагине приведет к установке плагина только один раз.

Вместо этого удалите удалить оба Vue.use('Vuetify', ...) и замените на перед 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')