1、安裝element-ui

npm i element-ui -S

2、完整引入

在 main.js 中寫入以下內(nèi)容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
 el: '#app',
 render: h => h(App)
});

3、主題安裝工具

npm i element-theme -g

安裝白堊主題，可以從 npm 安裝或者從 GitHub 拉取最新代碼

# 從 npm
npm i element-theme-chalk -D

# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

4、初始化變量文件

et -i [可以自定義變量文件]

> ? Generator variables file

如果使用默認(rèn)配置，執(zhí)行后當(dāng)前目錄會有一個 element-variables.scss 文件。內(nèi)部包含了主題所用到的所有變量，它們使用 SCSS 的格式定義。大致結(jié)構(gòu)如下：

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

...

5、修改變量

直接編輯 element-variables.scss 文件，例如修改主題色為紅色。

$--color-primary: red;

6、編譯主題

et

> ? build theme font
> ? build element theme

7、引入自定義主題

和引入默認(rèn)主題一樣，在代碼里直接引用「在線主題編輯器」或「命令行工具」生成的主題的 theme/index.css 文件即可。

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

Vue.use(ElementUI)