vue+less换肤，主题切换方案

新的项目对于客户自定义要求很高，然后换肤是其中一个很小的模块，经过了一段时间的摸索，看了许多文章，找到了几种方案。

https://www.cnblogs.com/leiting/p/11203383.html

1.直接在当前页面写多套css，

如header需要有三种颜色方案，直接写三种方案，用一个状态值保存，绑定class根据不同的状态值使用不同的css

2.用less

写一个主题方法，写上颜色的参数，将需要用到的更改的样式进行抽离

 

 这里相当于是一套样式，然后根据参数更改不同的样式，比如

 

 在main里面引入上一个 文件全局使用

然后在需要用到的页面中使用即可

 

 即可。

有一个问题是这个更改的是全局的css属性，整个项目设计到定义的样式的时候都会发生改变，

最后存的时候采用localstorage存储，这个是除非手动清除 则一直有效，可以记录用户之前的设置，关闭浏览器或者刷新页面后都会存在。

 

 第三种方式，使用变量

这种的话用到才会改变，感觉相比起上面的就会好一点点

https://blog.csdn.net/weixin_47731144/article/details/107978728#comments_13356212

这个博客步骤已经很详细了，但是他这个没有记录的功能，我在他的基础上写了一下存储记录的功能，退出后下次访问也会保留上次的数据。

 

 跟上面的实现原理差不多。