Vue + ElementUI 手撸后台管理网站基本框架(四)主题切换

最近因为某些原因，终于把一直纠结的主题方式及切换方式搞了出来。

设计思路

我能想到的主题切换方式无非两种：

• 一种是在body中加样式，对所有css进行命名空间（css前缀）处理
• 一种是类似Element自身的主题切换方式，通过编写scss改变主题

前一种方式在花裤衩同学的vue-element-admin中有具体的实现，项目主页：https://github.com/PanJiaChen/vue-element-admin
他是先将element自己提供的变量文件修改后生成新的css，然后将该css用gulp进行二次编辑增加命名空间，然后引入。也就是说他只是修改了UI框架的主题，并没有修改自己写的样式主题。

第二种方式则是element自己生成一个sass变量文件，执行命令行后生成新主题，然后让开发者自己导入。

以上两种其实都并没有实现项目本身自定义样式的主题切换，所以就产生了很多的问题。但仔细分析一下，其实我们只要将自己写的css样式也如同element官方那样打包一遍，然后动态引入就好了嘛。当然也可能是我傻，没想到还有其他方法。

介于以上总结，项目中设计的主题加载和切换方式大致流程如下：
1. 页面中仅引入基本样式
2. 页面初始化完成，动态加载主题文件
3. 用户切换主题：判断主题文件是否已经存在，存在则不操作；不存在则清空所有的主题文件，然后动态加载对应的主题文件。

主题创建

当前主题编写参考了Element的主题切换方式，通过sass进行变量修改。

# 复制基础变量文件 (src/assets/css/theme/default