Vuetify如何添加自定义主题

Question

我使用vue cli3来创建我的项目.

vue create my-project

然后我为我的项目添加了vuetify.

vue add vuetify

之后我从vuetify主题生成器创建了一个自定义主题.现在我想将该主题添加到我的项目中.

在vuetify的官方文档中添加主题是这样的

    Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

但我main.js看起来像这样

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

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

在这里没有什么叫做Vuetify.那么如何在此项目设置中添加自定义主题？任何帮助.

提前致谢.

Answer 1

你在这里使用vue-cli 3 :)看看你的项目,有一个名为:plugins的文件夹.

src >>插件

在这个文件夹中你会找到vuetify.js,你可以在这里指定你想要使用的主题,如文档所述.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
    theme: {
        primary: "#f44336",
        secondary: "#e57373",
        accent: "#9c27b0",
        error: "#f44336",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
})