1.安装vue-cli
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
2.安装element-ui及sass
npm i element-ui -S
npm install --save-dev sass-loader
npm install --save-dev node-sass
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
3.安装elementui的自定义主题工具
npm i element-theme -g
npm i element-theme-chalk -D
4.初始化变量文件
et -i element-variables.scss
5.这时根目录下会产生element-variables.scss
6.编译主题
更改primary的值, 命令行输入et
7.编译完成之后在主目录下生成theme的文件夹(此文件下的fonts以后有用)
8.在main.js的入口文件中引入
import '../theme/index.css'
9.使用gulp-css-wrap神器
npm install gulp
npm install gulp-clean-css
npm install gulp-css-wrap
10.在项目根目录下创建一个名为 gulpfile.js 的文件
// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
return gulp.src(path.resolve('./theme/index.css'))
/* 找需要添加命名空间的css文件,支持正则表达式 */
.pipe(cssWrap({
selector: '.custom-02abfd' /* 添加的命名空间 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */
})
custom-02abfd中的02abfd即为刚才生成自定义主题时的颜色
11.执行gulp输出
gulp css-wrap
12.生成theme文件夹下的主题名称
此时文件夹下没有fonts文件夹,把生成主题时生成的fonts复制到此处即可
13.建立store文件存储主题状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
themecolor:'20a0ff'//默认为20a0ff
},
mutations:{
//更新主题颜色
setThemeColor(state,curcolor){
this.state.themecolor = curcolor;
}
}
});
export default store;
在main.js入口文件中引用
import store from './vuex/store.js';
import './assets/css/theme/02abfd/index.css';
14.在颜色切换页面
做相应的处理
util->index.js
// 换肤加class函数
export function toggleClass(element, className) {
if (!element || !className) {
return;
}
element.className = className;
}
赶紧用左侧导航栏来试一下吧
<template>
<div>
<el-row class="tac">
<el-col :span="8">
<h5>带 icon</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
};
</script>
想做多套主题可以从第5步重新开始生成主题来完成。