vue项目中实现动态换肤

• 👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟
• 🌈擅长领域：前端开发
• 🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
• 🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

换肤是一个常见的需求，换肤涉及的面很多，总的涉及到的有页面整体的样式，自定义的组件样式，外部引入的组件(element，百度地图，echarts等等)，但其实只需要我们分模块去解决，就能迎刃而解。

1.修改element相关的样式

方法1.去官网案例下载

如果仅希望更换 Element 的主题色，推荐使用在线主题生成工具
或者在线主题编辑器，这个需要自己配置

方法2.用命令生成

1.npm i element-theme -g
用这种方式的时候执行et报错primordials is not defined，百度了一下大部分方法是回退node版本，当时我不想回退，后来发现了另一个解决办法：npm i element-themex -g 解决element ui 自定义主题失败问题

2.通过et命令
et -i [可以自定义变量文件] 生成element-variables.scss
et 生成theme文件夹

3.安装依赖
npm install gulp -g
npm install gulp-clean-css -S
npm install gulp-css-wrap -S

4.根目录下新建gulpfile.js

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap =