Element UI 引入自定義主題（自己配色自己用）

文章目錄

• • 一、自行配色與下載下傳
  • 二、引入index.css
  • 三、效果展示

官方教程：https://element.eleme.cn/#/zh-CN/component/custom-theme 點選跳轉

一、自行配色與下載下傳

1. 在element官網上選擇“主題”欄，并複制目前主題，在下方生成一個自定義主題。

   位址 https://element.eleme.cn/#/zh-CN/theme 點選跳轉

   

2. 點選"編輯"按鈕進入，自行配置右側Color欄中的顔色，并在左側展示樣式，搭配好自己的樣式後點選下載下傳即可。

   

   下載下傳完成後我們會得到一個 style.zip包，将其解壓裡面會有我們需要的index.css

二、引入index.css

1. 将我們解壓好的theme檔案夾，直接放入項目的目前目錄下，如下圖所示。

   

2. 随後我們配置main.js，将其引入。

   （注：要将從theme-chalk中引入index.css這行代碼注掉否則不生效，或者将我們引入的這行代碼放到它的下分進行覆寫）

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import '../theme/index.css'

// import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})
           

三、效果展示

整體的色系就為我們在element官網上配的色系。