第
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
目录前言vue-element-admin官方实现的方式参考文档：webpack-theme-color-replacer插件的实现方式总结
前言
最近基于ElementUI的项目上需要实现动态换肤的功能，这里提供两种方式：
vue-element-admin官方实现的方式webpack-theme-color-replacer插件的实现方式
vue-element-admin官方实现的方式
简单说明一下它的原理：element-ui2.0版本之后所有的样式都是基于SCSS编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过package.json拿到element-ui的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加style标签来覆盖原有的css样式。
1、这里无脑参考vue-element-admin的源码，首先现在styles文件夹下创建一个名为element-variables.scss文件，并在main.js中引入该文件。
/*src/styles/element-variables.scss*/
/*改变主题色变量*/
$--color-primary:#256DCB;
$--color-success:#7AC800;
$--color-danger:#EC4242;
$--color-info:#999999;
/*改变icon字体路径变量，必需*/
$--font-path:~element-ui/lib/theme-chalk/fonts;
@import~element-ui/packages/theme-chalk/src/index;
/*如遇到导出的变量值为undefined则本文件名需要改成element-variables.module.scss*/
:export{
theme:$--color-primary
/*main.js*/
importVuefromvue
importElementfromelement-ui
import./element-variables.scss
Vue.use(Element)
2、通过以上方式已经能够实现ElementUI主题替换了，但是想要做到自定义颜色还是远远不够的，考虑到主题色在整个项目中都有应用，所以我们将它存到Vuex中，接下来要做的就是在store/modules下新建settings.js。
/*src/store/modules/settings.js*/
importvariablesfrom@/styles/element-variables.module.scss
import*asTypesfrom../mutation-types
conststate={
theme:variables.theme
constmutations={
CHANGE_SETTING:(state,{key,value})={
localStorage.setItem(theme,value)//缓存起来，刷新的时候重新取用
//eslint-disable-next-lineno-prototype-builtins
if(state.hasOwnProperty(key)){
state[key]=value
constactions={
changeSetting({commit},data){
commit(CHANGE_SETTING,data)
exportdefault{
namespaced:true,
state,
mutations,
actions
3、这一步也是无脑copyvue-element-admin的源码，新建一个名为ThemePicker的组件，代码如下：
/*src/components/ThemePicker/index.vue*/
template
el-color-picker
v-model=theme
:predefine=[#256DCB,#409EFF,#1890ff,#304