vue3.x自定义换肤

场景

换肤是项目中常见的一个功能，本文章是使用的elementUI的一个换肤方案，可以使用elementUI官网给出的方案多个皮肤之间的换肤，实现方案也很简单

主题换肤

加入想要换肤的主题有三种，分别为red，blue，green，那就新建三个样式文件，文件内容就是对应主题的更换颜色，例如element-red.scss文件：

/* 改变主题色变量 */
$--color-primary: red;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
1
2
3
4
5
6
7

之后，在项目的入口文件中，直接引入对应主题的样式文件即可（无需引入elementUI编译好的CSS样式文件了）

import Vue from 'vue'
import elementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import './element-red.scss'

Vue.use(elementUI)
1
2
3
4
5
6

具体可以查看官网换肤方案

自定义换肤

效果

上面的主题换肤适用场景是多个主题之间的切换，但是如果是自定义换肤，就不适用了。自定义换肤需要选择根据颜色选择器选中的颜色进行项目主题的换肤

实现步骤

1. 添加颜色选择器

   // app-header.vue
   <template>
      ...
      <el-color-picker title="选择主题色" size="mini" v-model="mainColor" @change="changeMainColor"></el-color-picker>
      ...
   </template>
   
   <script>
      import { curColor, changeThemeColor } from '@/theme'
      export default {
      	data () {
      		return {
      			mainColor: curColor
      		}
      	},
      	methods: {
      		changeMainColor (newColor) {
      	      changeThemeColor(newColor)
      	    }
      	}
      }
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22

2. 安装依赖npm i webpack-theme-color-replacer
3. 配置自定义换肤插件

   // vue.config.js
   let WebpackThemeColorReplacer = require('webpack-theme-color-replacer')
   let forElementUI = require('webpack-theme-color-replacer/forElementUI')
   let themeConst = require('./src/theme/const')
   
   module.exports = {
     chainWebpack: config => {
       // 自定义换肤
       config.plugin('webpack-theme-color-replacer')
         .use(WebpackThemeColorReplacer)
         .tap(options => {
           options[0] = {
             fileName: 'css/theme-colors-[contenthash:8].css',
             matchColors: [ ...forElementUI.getElementUISeries(themeConst.themeColor), 'green', 'blue' ],
             changeSelector: forElementUI.changeSelector,
             isJsUgly: process.env.NODE_ENV !== 'development'
           }
           return options
         })
     },
     devServer: {
       open: true,
       proxy: {
         '/eolinker': {
           target: 'http://10.8.227.123:8282', // eolinker
           changeOrigin: true // 允许跨域
         },
         '/api': {
           target: 'http://10.8.227.87:8383', // 袁力
           changeOrigin: true // 允许跨域
         }
       }
     },
     css: {
       loaderOptions: {
         css: {},
         sass: {},
         less: {
           javascriptEnabled: true
         }
       }
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43

   // theme/index.js
   import client from 'webpack-theme-color-replacer/client'
   import forElementUI from 'webpack-theme-color-replacer/forElementUI'
   import themeConst from './const'
   
   export let curColor = themeConst.themeColor
   
   export const changeThemeColor = (newColor) => {
    let options = {
      newColors: [...forElementUI.getElementUISeries(newColor), 'purple', 'yellow']
    }
    return client.changer.changeColor(options, Promise)
      .then(t => {
        curColor = newColor
        localStorage.setItem('theme_color', newColor)
      })
   }
   
   export const initThemeColor = () => {
    const savedColor = localStorage.getItem('theme_color')
    if (savedColor) {
      curColor = savedColor
      changeThemeColor(savedColor)
    }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25

   // theme/const.js
   module.exports = {
    themeColor: '#409EFF' // 默认主题色
   }
   1
   2
   3
   4

需要注意：路由模式为hash模式。

vue3.x配置插件

这里用到了在vue.config.js中添加插件，如果不知道自己写的配置插件方式是否正确，可以在配置完以后在终端输入
vue inspect > output.js
会在当前项目中生成配置文件，从这个文件就可以看出你在vue.config.js文件中添加的插件配置是否正确。