更改elementui组件库主题色

一、通过theme-vue更改

1.安装

yarn add theme-vue

2.引入并使用

引入：在main.js文件中进行引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
//注释掉原有的elementui样式
// import 'element-ui/lib/theme-chalk/index.css';
//引入theme-vue依赖
import Theme from "theme-vue"
//创建theme-vue实例
const Th = new Theme()


Vue.config.productionTip = false
Vue.use(ElementUI);
//为了演示在Vue原型上新增属性
Vue.prototype.$Theme = Th

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

使用：通过Vue原型上的方法去更改全局element颜色

<template>
  <div>
    <div><el-color-picker v-model="color" @change="changecolor"></el-color-picker></div>
    <el-button>演示</el-button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      color: "#409EFF",
    };
  },
  methods:{
    changecolor(value){
      Vue.prototype.$Theme.changeTheme(value)
    }
  }
};
</script>

<style>
</style>

二、 通过element-variables.scss文件进行主题的更改

新建element-variables.scss文件

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

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

@import "~element-ui/packages/theme-chalk/src/index";

 在main.js文件中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
//注释掉原有的样式文件引入
// import 'element-ui/lib/theme-chalk/index.css';
//引入element-variables.scss文件
import './style/element-variables.scss'

Vue.config.productionTip = false
Vue.use(ElementUI);

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