我們經(jīng)常見到的大部分后臺風(fēng)格都是基于vue-element-admin搭建的，那么產(chǎn)品經(jīng)理如果讓我們做一套新的風(fēng)格框架烁巫，這時候如果我們有一套自己的后臺管理系統(tǒng)，放一些常用操作宠能，對里面的內(nèi)容啥的都很熟悉程拭。如果要做新項目，我們只許復(fù)制粘貼棍潘，隨手改改恃鞋，豈不很爽。
好了亦歉，廢話不多說：
下面要說下我自己簡單搭建的一個平臺：
主要功能：表格恤浪，表單，地圖肴楷，echart圖表水由，換膚
涉及到的框架內(nèi)容：
1.typescript
2.element-ui
3.echats
4.vue-amap等等
另外因本人也是新手不斷學(xué)習(xí)，有不足之處還請多多指點哦
先看幾張界面圖：
時間有限赛蔫，先講講換膚操作
1動態(tài)修改element-ui主題
1.開發(fā)環(huán)境配置
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及預(yù)編譯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.這時根目錄下會產(chǎn)生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.在項目根目錄下創(chuàng)建一個名為 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文件泥张，支持正則表達(dá)式 */
.pipe(cssWrap({
selector: '.custom-02abfd' /* 添加的命名空間 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目錄 */
})
11.執(zhí)行g(shù)ulp輸出
gulp css-wrap
12.生成src/assets/css/theme文件夾下的主題名稱。
把生成主題時生成的fonts復(fù)制到主題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;
}
多套皮膚操作：重復(fù)6,10,11,13鞠值。10步驟修改下空間名即可
2.動態(tài)切換顏色
window.document.documentElement.setAttribute('data-theme', theme)
//mixin.scss
@mixin bg_color($color){/*通過該函數(shù)設(shè)置字體顏色媚创，后期方便統(tǒng)一管理；*/
background:$color;
[data-theme="theme1"] & {
background:blue;
}
[data-theme="theme2"] & {
background:red;
}
[data-theme="theme3"] & {
background:white;
}
}
3.使用el-color-picker切換主題（缺點：自定義不夠彤恶，只支持基礎(chǔ)顏色的切換）
直接引入ThemePicker钞钙，使用即可
參考：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#element-ui-官方文檔頁面-換膚方式
