element-ui 主题工具

提供自定义 element-ui 主题定制功能。

所有功能需求均来自公司业务需要，与公司技术工具选择和架构有关，不具备通用性。

使用方法

• npm 安装 ele-themes 后，引用 themes 文件夹内的不同主题样式文件

import Vue from "vue";
import ElementUI from "element-ui";
import "ele-themes/themes/dark/index.css";
import "ele-themes/themes/light/index.css";
Vue.use(ElementUI);

• 通过切换页面最外层 元素 的 class 名称实现主题切换，默认提供 dark 和 light 两种主题.

功能

• 在 src 目录下修改 themes 文件夹中 scss 组件样式变量和代码
• 在 fonts 文件夹中添加图标字体
• 使用 build 脚本编译成 css

开发方法

1. 本地链接到使用 element-ui 组件库的项目，使用 npm link 或者 yalc。（推荐 yalc，后续步骤以 yalc 为例。）
2. 命令行输入 pnpm install yalc -g。
3. 到本项目根目录下，使用 yalc publish 发布。
4. 在应用 element-ui 组件库的项目根目录下，使用 yalc add ele-themes 建立连接。
5. 使用 ele-themes 中的文件替换 element-ui 的样式引入。
6. 引入 scss 源码进行开发调试时，需要给该项目添加 sass-loader。
7. 在本项目中修改了代码后，使用 yalc push 即可将更新推送到开发项目中。
8. 注意yalc add以后会修改项目的package.json, 完成联调以后应该去掉这个本地依赖

字体图标

1. 若有需要引入的字体图标，将字体文件放在 src/fonts 文件夹内即可。
2. 注意字体图标的命名不要冲突。
3. 打包后，按照 element-ui 的图标引用方式即可引用。

注意事项

button 按钮

1. 如果使用默认只有图标的按钮，需要在使用按钮组件时 添加属性class="is-icon-button" 超小按钮，添加属性class=“el-button--super-mini”

pagination 分页

• 必须设置 small 属性为 true
• 必须设置 background 属性为 true

table 表格

• 必须设置 border 属性为 true 使用操作按钮时，必须选择超小按钮，button添加class=“el-button--super-mini”

table 表格

• 必须设置 highlight-current 属性为 true