Vue2 element-ui引入 及定制element-ui主题

在Vue2项目中引入和定制element-ui主题，你需要使用element-theme工具和element-theme-default包。以下是步骤和示例代码：

1. 安装必要的包：

npm install element-theme -g
npm install element-theme-default

2. 初始化变量文件（如果你的项目中还没有这个文件）：

et -i [output file]

这将生成element-variables.scss文件。

3. 修改变量文件中的变量以定制你的主题。
4. 编译主题：

et

5. 在main.js或你的入口文件中引入编译好的主题样式和element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import './theme/index.css' // 引入编译后的主题样式
 
Vue.use(ElementUI)

6. 在vue.config.js中配置webpack以正确处理element-ui的主题：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('style')
      .loader('style-loader')
      .end()
      .use('css')
      .loader('css-loader')
      .end()
      .use('sass')
      .loader('sass-loader')
      .tap(options => {
        return {
          additionalData: `@import "~element-ui/packages/theme-chalk/src/index";`
        }
      })
      .end()
  }
}

这样，你就成功地在Vue2项目中引入了element-ui并定制了主题。记得在定制主题后重新编译并在项目中引入新的主题样式。