Vue+ElementUI实现主题色切换

事先声明：本文没有使用到Element官网的切换主题方法。

解决这个需求，我用到的是less，并且通过动态修改class来完成的。

第一步先引入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中。

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
        }