App.vue

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（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')

Answer 2

导入Vuetify，{ VApp，//必填 VNavigationDrawer， VFooter， VToolbar }来自“ vuetify / lib”

导入Vuetify，{ VApp，//必填 VNavigationDrawer， VFooter， VToolbar } from'vuetify'//删除/ lib解决了问题

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

Vuetify-无法应用自定义颜色

App.vue

2 个答案: