Vuetify 设置主题

2019-10-12  本文已影响0人  草帽lufei

main.js 中添加 theme注意 new Vue({}) 中的 vuetify

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
import './mock.js'

Vue.use(Vuetify, {
  icons: {
    iconfont: 'mdi'
  }
})

Vue.use(VueAxios, axios)

Vue.config.productionTip = false
const opts = {
  theme: {
    themes: {
      light: {
        primary: '#03a9f4',
        secondary: '#009688',
        accent: '#9c27b0',
        error: '#f44336',
        warning: '#ff5722',
        info: '#607d8b',
        success: '#4caf50'
      }
    }
  }
}

new Vue({
  router,
  store,
  vuetify: new Vuetify(opts),
  render: h => h(App)
}).$mount('#app')

这个仓库里面有主题设置的具体实现: https://github.com/gywgithub/vue-d3-examples

上一篇 下一篇

猜你喜欢

热点阅读