Vue+ElementUI实现主题色切换

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

事先声明：本文没有使用到Element官网的切换主题方法，无法实现需求规定的颜色切换，而且感觉不是那么灵活。

解决这个需求，我用到的是less，可以声明变量和动态切换类，并且通过动态修改class来完成的。不太建议sass，虽然功能强大，但是写法更加复杂，上手比较困难，同时还会有一些node版本问题，解决起来需要去更换node版本，如果刚起步的项目还可以，写了一些的一定慎用。

第一步先引入less，这里默认安装好了Node.js。

npm install less less-loader --save-dev

注：网上大多数文章都会让读者去配置webpack.base.conf.js，但这次项目我配置完却报了错，删除后就恢复正常了。

引入Less成功后就可以在项目中使用Less进行样式编译了。

然后就该去新建less文件。 theme存储全部样式及颜色。

color用来设置多个主题色 封装切换class的方法 大功告成，在写个切换方法，num用来控制切换成哪个主题

document.getElementById("app").className = "theme" + num

如果需要长期存储用户选择的主题功能，就放入localStorage或者session中做一个持久化存储，local是永久存储，session关闭页面后就会被清空。

localStorage.setItem("app",document.getElementById("app").className)

每次调用时取出来，这样对用户体验来说更加友善，有一种定制化的感觉。

 this.save = localStorage.getItem("app");
        if(this.save==null||this.save==''){
          document.getElementById("app").className = 'theme1'

        }else{
          document.getElementById("app").className = this.save
        }