element-ui主题切换功能开发

最近公司在做自己的前端规范化项目，技术为element-ui+vue,需要开发几套主题皮肤 并且可以一键切换。

首先很自然的想到了看element官网的自定义主题方法，经过研究采用了如下方法，好处是可以通过修改scss变量实现批量修改

我们需要开发黑色和蓝色两套主题，于是新建两个文件如下

直接引入两套scss肯定是不行的，想到通过给页面添加类名来切换两套主题样式，于是新建theme.scss如下

这样原来的两套主题样式就分别添加到blueTheme和blackTheme两个类名之下，在main.js中引入theme.scss。 接着我们需要动态切换类名了，通过下拉组件来切换样式如下

我们选择动态切换body上的类名，方法如下

这样我们就实现了主题切换功能啦。

可能有人会问为啥不直接通过vue指令动态切换<div id='app'></div>上的 类名而要通过直接操作dom节点的方式修改body类名呢,其实开始我也是这样考虑的，后来发现element生成的组件会在此项目启动节点之外，所以直接通过修改body类名。

另开发过程中会发现字体图标无法使用，可通过下载其字体文件直接引入即可解决。