vue elementui实现主题色皮肤切换

在实践过程中，如果遇到这样的需求也是很常见的，毕竟一个系统的切换主题色的功能是比较常见和比较基础的功能。

自己在做这块需求的时候也是用了好几个方案，方案一为借鉴他人的方案，方案二为自己琢磨的方案

方案一：借鉴别人的博客，直接上代码，点击触发这个颜色选择器的模态框，在选好颜色之后调用主题色的颜色包到后台，具体实现不明，有报错，未实现，有实现的同行还请给我留言，我这边这块没有实现。到那时感觉这个方案应该没有问题，是我这边的交换传递出了问题。

vue换肤的触发地：

点击之后触发的模态框：

created处执行初始化颜色：

color.js内容如下：

方案二：从element-ui官网导出三份主题色文件，均为index.scss为基础的颜色文件夹，放入static文件夹下，

index.html head内加入<link rel="stylesheet" href="./static/theme/theme1-style/theme/index.css" />

<script type="text/javascript">

    var theme = localStorage.getItem('theme') || 'theme1'

    document.getElementsByTagName('link')[0].href = 'static/theme/' + theme + '-style/theme/index.css'

  </script>

全局theme变量均从local storage中获取，点击切换肤色的时候改变local storage中的theme值

以上是针对element-ui的颜色切换，亲测可用

以下是针对自己在项目中自定义的按钮或者模块的有颜色

variable.scss内的颜色设为多色可选

自定义一个scss文件@each颜色做多类名色值，根据最外层class类名的不同实现颜色切换

app.vue修改如下：