更换主题

ASPDEV主题构建工具

工程代码

git@10.0.33.159:frontend/asp-dev-custom-theme.git

1. 设计Element-ui主题

   请先访问Element-ui在线主题设计网站在线主题设计

2. 设计主题

   主题设计完成后，将主题拷贝到 theme文件内，仿照casc-blue文件目录格式，例 custom-theme

3. 拷贝项目主题

   拷贝工程目录下main.scss文件至 custom-theme 根目录下

4. 修改gulpfile.js

   修改 gulpfile.js 文件内 ThemeDir变量为custom-theme

5. 修改框架主题

   修改main.scss内框架主题变量

6. 打包

   在项目根目录下执行命令npm start

7. 查看生成的文件

   打开根目录下dist文件夹将custom-theme文件夹拷贝，这个文件夹就是我们的一套自定义主题

8. 放入前端

   将此文件夹交给前端，前端会将次文件夹放入项目工程下的@/assets/theme-skin 文件夹下

9. 使用主题

   点开系统字典管理，找到 系统主题 字典，增加字典属性 custom-theme

10. 查看主题

    点击用户头像->布局设置->选择主题颜色即可