vue基于Element的动态自定义主题

Vue基于Element的动态自定义主题，可以通过修改Element的样式变量来实现，具体步骤如下：

安装Element UI和webpack插件：

npm install element-ui -S
npm install style-resources-loader -D

在webpack配置文件中添加以下代码：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const StyleResourcesPlugin = require('style-resources-loader')

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    // ...
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
    new StyleResourcesPlugin({
      patterns: path.resolve(__dirname, 'src/assets/scss/variables.scss')
    })
  ]
}

在src/assets/scss/variables.scss文件中定义主题变量，例如：

$--color-primary: #007bff;

:root {
  --color-primary: #007bff;
}

在main.js中引入Element UI和定义主题变量：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/scss/variables.scss'

Vue.use(ElementUI)

new Vue({
  // ...
}).$mount('#app')

在组件中使用主题变量：

<template>
  <div :style="{ color: $styleVars['--color-primary'] }">Hello World</div>
</template>

通过以上步骤，就可以实现基于Element的动态自定义主题。当修改主题变量后，只需要重新编译项目即可看到效果