官方教程:https://element.eleme.cn/#/zh-CN/component/custom-theme 点击跳转
一、自行配色与下载
- 在element官网上选择“主题”栏,并复制当前主题,在下方生成一个自定义主题。
地址 https://element.eleme.cn/#/zh-CN/theme 点击跳转
- 点击"编辑"按钮进入,自行配置右侧Color栏中的颜色,并在左侧展示样式,搭配好自己的样式后点击下载即可。
下载完成后我们会得到一个 style.zip包,将其解压里面会有我们需要的index.css
二、引入index.css
- 将我们解压好的theme文件夹,直接放入项目的当前目录下,如下图所示。
- 随后我们配置main.js,将其引入。
(注:要将从theme-chalk中引入index.css这行代码注掉否则不生效,或者将我们引入的这行代码放到它的下分进行覆盖)
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import '../theme/index.css'
// import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
三、效果展示
整体的色系就为我们在element官网上配的色系。