web-dev-qa-db-ja.com

カスタムテーマを追加する方法を検証する

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と呼ばれるものはありません。では、このプロジェクト設定にカスタムテーマを追加するにはどうすればよいですか？

vue.jsvuejs2vuetify.js
4
Pathum Kalhan

ここではvue-cli3を使用しています:)プロジェクトを見ると、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"
      }
})
11
ValDaHus