vue动态换肤（elementui+webpack-theme-

利用webpack-theme-color-replacer插件，为elementui实现了在运行时动态切换主题色的功能，无需在页面进行less的编译，提升了切换速度。

好了，废话不多说，直接上代码

image.png
vue/cli3脚手架下载下来后，改动这几个文件。

/*/config/app-config.js*/
module.exports = {
    LOGIN_PATH: './',
    title: 'vue + webpack4 + element-ui脚手架项目',
    description: 'vue + webpack4 + element-ui脚手架项目',
    themeColor: '#409EFF' // 这个色号必须和主题色是一个颜色才行，要不然出来的css模板文件是空的
  }

/*/vue.config.js*/
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

const appConfig = require('./config/app-config.js')
module.exports = {
  configureWebpack: {
    plugins: [
      // 生成仅包含颜色的替换样式（主题色等）
      new ThemeColorReplacer({
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [
          ...forElementUI.getElementUISeries(appConfig.themeColor)
        ],
        changeSelector: forElementUI.changeSelector,
        isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
      })
    ]
  }
}

如果是cli2的话，这个文件中的plugins定义在build/webpack.base.conf.js中。

/*/src/utils/themeColorClient.js*/
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
// 注意自己项目里的引入路径
import appConfig from '../../config/app-config'

export let curColor = appConfig.themeColor

// 动态切换主题色
export function changeThemeColor(newColor) {
  var options = {
    newColors: [...forElementUI.getElementUISeries(newColor)]
  }
  return client.changer.changeColor(options, Promise)
    .then(() => {
      curColor = newColor
      localStorage.setItem('theme_color', curColor)
    })
}

export function initThemeColor() {
  const savedColor = localStorage.getItem('theme_color')
  if (savedColor) {
    curColor = savedColor
    changeThemeColor(savedColor)
  }
}

/*/src/main.js*/
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

import ElementUI from 'element-ui';
Vue.use(ElementUI)

// 主题换肤
import { initThemeColor } from './utils/themeColorClient'

initThemeColor();

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

/*/src/views/Home.vue*/
<template>
  <div class="home">
    <div class="head"></div>
    <el-button type="primary">主要按钮</el-button>
    <el-color-picker
      size="medium"
      @change="changeColor">
    </el-color-picker>
    <div>
      <span class="font-test">
        看我到底变不变色
      </span>
      <span class="font-test1">
        看我到底变不变色
      </span>
    </div>
  </div>
</template>

<script>
import { changeThemeColor } from '@/utils/themeColorClient'
export default {
  name: "Home",
  data() {
    return {
    }
  },
  methods: {
    changeColor(newColor) {
      changeThemeColor(newColor).then(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.head{
  height:100px;
  width: 100%; 
  background-color: #409EFF;
}
.font-test{
  font-size: 20px;
  line-height: 40px;
  color: #409EFF;
}
.font-test1{
  font-size: 20px;
  line-height: 40px;
  color: #000000;
}
</style>

最后，一定不能遗漏babel.config.js的修改，当时我也是没有修改babel这里，鼓捣了半天。（babel还在学习中，也不知道原因是啥）

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
      [
          'babel-plugin-component',
          {
              libraryName: 'element-ui',
              styleLibraryName: '~node_modules/element-theme-chalk/src',
              ext: '.scss'
          }
      ]
  ],
};

来看一下运行效果吧~

image.png

当点击按钮，换肤后：

image.png
不管是自定义的颜色，还是elementui的颜色，都被替换了。