Element 换肤方案的探索

墨蓝 2021-12-21 03:43 334阅读 0赞

项目中如果需要换肤，黑白配的话还好说，就两种皮肤，稍微整整就好了，这次直接来了8套皮肤，这就有点渗人了，必须想办法偷偷懒了，开发环境也要好好琢磨一下了。

Element 有提供多种的换肤方案，但我们项目中用的是 less ，所以只能用 [命令行主题工具][Link 1] 了，但是我们的设计图有些和 Element 还不同，还需要去改样式，不是简单的命令行主题工具就能搞得定的，但命令行主题工具肯定是要用的。

基于上面的背景，我搭建了下面的开发环境，使用 gulp 进行文件监测。

可以先看看 [demo][] ，项目地址： [test-element-theme][] 。

## Project setup ##

npm install

### Compiles and hot-reloads for development ###

npm run serve

### Compiles and minifies for production ###

npm run build

## 自定义主题色 ##

先来看一下目录结构：  
![根目录][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z4c3M1MjAx_size_16_color_FFFFFF_t_70]  
使用 [命令行主题工具][Link 1] ，需要在根目录下面添加 `themeCode` 和 `theme` 文件夹，`themeCode` 文件夹下面用于放 初始化变量文件 ，`theme` 文件夹下面用于放 临时css文件。

需要在src文件夹下面添加 `style` 文件夹，`style` 文件夹下面放 自定义覆盖样式 （初始化变量文件解决不了的），至于预编译器自由选定，不过需要改 gulp 内预编译器的配置。

## 使用教程 ##

### 开发环境 ###

1.  `vue-cli-service serve` 打开 vue cli 的开发环境。
2.  `et -i ./themeCode/element-variables-red.scss` 生成对应的主题色配置文件。
3.  `et --watch --config ./themeCode/element-variables-red.scss --out ./theme/red` 观察主题色配置文件的修改并生成对应文件。
4.  `gulp watch` 观察对应的文件修改，并及时编译（需要确保对应的文件存在）。
5.  在 `src/main.js` 中引入文件 `import '../theme/red/index.min.css'`。

开发不同主题色的时候需要将 `gulpfile.js` 第44行的 `const needWatcher = 'blue'` 修改为对应的主题色，例如：

const needWatcher = 'green'

然后重新 `gulp watch`

### 正式环境 ###

发布前先 `gulp build` 主题色文件，然后再 `vue-cli-service build` 项目代码，当然也可以把前两步合并在一起 `gulp build && vue-cli-service build` ，不过这样每次打包时间都比较长。

打包的时候如果没有 `blue/green` 主题色的时候，可以将 `gulpfile.js` 第69行的 `let move_path = ['red', 'green', 'blue']` 中的对应代码删除，例如：

let move_path = ['red', 'blue']

打包的时候可以将 `src/main.js` 中 `import '../theme/red/index.min.css'` 去除，也可以保留作为默认主题色。

## 主要思路 ##

使用 Element 官方提供的[命令行主题工具][Link 1]，并通过 `watch` 生成在 `theme` 文件夹下，在 `src/style` 下修改文件会将 `red.less` 生成为 `red.css`，再将 Element主题工具 生成的 `index.css` 和 `red.css` 合并为 `index.min.css`，再通过 gulp 将 `index.min.css` 重命名为对应的主题色名，例如 `red.min.css` ，并将 `red.min.css` 移动到 `public/theme` 文件下，最后执行 `vue-cli-service build` 的时候会将 `public/theme` 下的内容转移动 vue cli 的 `publicPath` 文件夹下。

开发环境中需要在 `src/main.js` 引入对用的css文件，如

import '../theme/red/index.min.css'

正式环境中，通过为 `<link rel="stylesheet" id="themeLink" href="">` 指定 `href` 来修改主题色。

[Link 1]: https://element.eleme.cn/#/zh-CN/component/custom-theme#ming-ling-xing-zhu-ti-gong-ju
[demo]: https://fxss5201.github.io/test-element-theme/
[test-element-theme]: https://github.com/fxss5201/test-element-theme
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z4c3M1MjAx_size_16_color_FFFFFF_t_70]: /images/20211221/3f00128e1b174c46aa4463fea35acf8d.png