Vue + Element UI 前端篇（六）：更换皮肤主题

自定义主题

命令行主题工具

1.安装主题工具

首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。

yarn add element-theme --dev

2.安装chalk主题

安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。

yarn add element-theme-chalk -D

3.初始化变量文件 

主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参数指定文件输出目录。

node_modules/.bin/et -i

执行命令

命令执行成功之后，会在根目录生成 scss文件 element-variables.scss 。

4、修改主题色 

在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e，即你想要的主题颜色

5、编译主题 

执行主题编译命令生成主题，根目录会生成一个theme的文件夹 。

node_modules/.bin/et

6、引入自定义主题 

把生成的主题按颜色改名放置 src/theme 目录下。

在 main.js 中 import ‘所在路径/index.css’。

7、效果展示

重新加载后，我们看到按钮颜色已经不是默认的蓝色了。

动态换肤器方式

1. 在下图位置添加封装的换肤组件。

index.vue

  





.theme-picker .el-color-picker__trigger {
  vertical-align: middle;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}

 2.直接在组件中引用

 在 Home.vue 中引入

在语言切换左边添加换肤组件

 3.换肤测试

点击组件，选择一个颜色确定

我们看到相关主题颜色即刻生效

退回登录界面查看