我们经常见到的大部分后台风格都是基于vue-element-admin搭建的，那么产品经理如果让我们做一套新的风格框架，这时候如果我们有一套自己的后台管理系统，放一些常用操作，对里面的内容啥的都很熟悉。如果要做新项目，我们只许复制粘贴，随手改改，岂不很爽。
好了，废话不多说：
下面要说下我自己简单搭建的一个平台：
主要功能：表格，表单，地图，echart图表，换肤
涉及到的框架内容：
1.typescript
2.element-ui
3.echats
4.vue-amap等等
另外因本人也是新手不断学习，有不足之处还请多多指点哦
先看几张界面图：
时间有限，先讲讲换肤操作
1动态修改element-ui主题
1.开发环境配置
npm install -g 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
3安装elementui的自定义主题工具
npm i element-theme -g
npm i element-theme-chalk -D
4初始化变量文件 et -i
5.这时根目录下会产生element-variables.scss
6.编译主题
更改primary的值， 命令行输入et
7.编译完成之后在主目录下生成theme的文件夹
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 的文件
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')) /* 存放的目录 */
})
11.执行gulp输出
gulp css-wrap
12.生成src/assets/css/theme文件夹下的主题名称。
把生成主题时生成的fonts复制到主题02abfd下
13.引入主题
import './assets/css/theme/02abfd/index.css';
14.使用
toggleClass(document.body,'custom-02abfd');
//工具类方法
export function toggleClass(element, className) {
if (!element || !className) {
return;
}
element.className = className;
}
多套皮肤操作：重复6,10,11,13。10步骤修改下空间名即可
2.动态切换颜色
window.document.documentElement.setAttribute('data-theme', theme)
//mixin.scss
@mixin bg_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
background:$color;
[data-theme="theme1"] & {
background:blue;
}
[data-theme="theme2"] & {
background:red;
}
[data-theme="theme3"] & {
background:white;
}
}
3.使用el-color-picker切换主题（缺点：自定义不够，只支持基础颜色的切换）
直接引入ThemePicker，使用即可
参考：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#element-ui-官方文档页面-换肤方式
项目链接：
https://github.com/yam963/vue-typescript