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"
      }
})

验证如何添加自定义主题

1 个答案: