Vue 后台实战篇之Element UI

Element

去年十月份开始用 vue 做管理后台的时候毫不犹豫的就选择了 Elemen，那时候 vue2 刚发没多久，市面上也没有很多其它的 vue2 的 ui 框架。虽然 Element 也有很多的不足，前期的 bug 也不少，但我还是选择了它，说一下我选择 Element 的原因吧：

• 有大厂背书 : 虽然核心开发只有三个人，但至少不用担心哪天就不维护，带着小姨子跑路了。
• 持续迭代 : Element 发版至今 release 了四十多个版本，之前平均都是一周一个小版本更新(是不是不小心暴露了它 bug 多的问题 /(ㄒoㄒ)/~~)
• 生态圈优异，社区活跃 ：其 contributors 已经有 160 多人(前期我有饶有兴致的贡献过几个 pr，参与过七八十个 issue)，社区里也有很多基于 Element 的拓展组件，也有很多相关的 qq 讨论群或者 gitter。
• 社区的认可:目前 Element 已经是 vue 相关最多 star 的开源项目了，体现出了社区对其的认可。

说了这么多优点，作为一个资深 Element 用户还是有些要抱怨的~和 react 老大哥 Ant Design 相比还是有一定的差距的，不管是组件的丰富性，参数的可配性还是文档的完整性，亦或是 UI 的交互和美观度。不过 ant 也是经过了近 9k 次 commit 的不断打磨，才有了今天。我也相信 Element 也会越来越好的。

这里还有一些其它的框架(只讨论 pc 端的框架)大家可以自行选择：

• ivew 一国人个人写的框架，美观度和交互性都不错，有种介于 Element 和 Ant 之间的感觉，之前和 element 团队小小的撕了一下，有兴趣的自己去围观吧，框架还是很不做的，一个人能做出这样，也是很不容易的。作者公开信件
• vue-admin 也是一个不错的选择，代码写的和不错，官方也出了一个 admin 的架子，也很值得借鉴
• vue-material 一个 material design vue 框架库
• vuetify 又是一个 material design vue 框架库
• Keen-UI 又又是一个 material design vue 框架库
• CoreUI-Free-Bootstrap-Admin-Template 和以前的 Bootstrap 一样，搭好了一个完整的架子，大家可以进行二次拓展，它有 vue,react,angular 多个版本

简单列举了一些主流的框架，不得不感慨现在 vue 的生态圈真是太繁荣了，上述框架楼主并没有深入使用过，不好发表太多建议，大家自行甄别适合自己业务的框架吧。

---

这里开始我们会开始介绍一些结合 Element 的开发经验。

基于 Element 的动态换肤

有些产品就是这么残忍，能完成需求就不错了，还要让我们做动态换肤。Element 官网上也提供了自定义主题的方案 同时也提供了一个在线自定义主题的demo

是不是很酷，作者也说明了实现的方案 地址,大概思路:

1. 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词
2. 根据用户选择的主题色生成一系列对应的颜色值
3. 把关键词再换回刚刚生成的相应的颜色值
4. 直接在页面上加 style 标签，把生成的样式填进去

我看完觉得真的还是有点复杂的。有没有简单的方案呢？ 让我们思考一下，让我们自己写动态换肤该怎么写呢？最常见的方法就是写两套主题，一套叫 day theme，一套叫 night theme，night theme 主题 都在一个.night-theme 的命名空间下，我们动态的在 body 上 add .night-theme ; remove .night-theme。这就是最简单的动态换肤。所以我们也能不能顺着这个思路，基于 Element 实现动态换肤呢？

首先我们下载官方通过的 Theme generator ,一个专门用来生成 Element 主题的工具。按照文档，我们生成了需要的主题。

 之后就是我们要做的事情了，将这个主题的每个元素外面包裹一个 class 来做命名空间。 我们这里用到了 gulp-css-wrap 这个神器，轻轻松松就完成了我们想要的结果

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')) 
    .pipe(cssWrap({selector:'.custom-theme'}))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'));
});

这样就得到了一个以.custom-theme 为命名空间的自定义主题了，之后我们在项目中引入主题

//main.js
import 'assets/custom-theme/index.css'

我们在换肤的地方toggleClass(document.body, 'custom-theme')一直 toggle body 的 class 就可以了。我们就简单实现了动态换肤效果。

不过这种模式实现换肤也是有一个弊端的，它等于把这两个主题都打包在了项目里，如果你的项目主题需要七八种，这种模式就不适合了。我们就需要动态的加载 css，下面就是最简单的动态添加 css 的例子，当然你可以封装一下，增加成功或者失败回调，判断是否加载过改资源等等就不展开了。

var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);

---

侧边栏

这里又有谈一下导航栏的问题，我项目里的侧边栏是根据 router.js 配置的路由并且根据权限动态生成的，这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事，但也遇到了一个问题，路由可能会有多层嵌套，很多人反馈自己的侧边栏会有三级，甚至还有五级的。所以重构了一下侧边栏，使用了递归组件，这样不管你多少级，都能愉快的显示了。代码

侧边栏高亮问题: 很多人在群里问为什么自己的侧边栏不能跟着自己的路由高亮，其实很简单，element-ui 官方已经给了 default-active 所以我们只要

:default-active="$route.path"

将 default-active 一直指向当前路由就可以了，就是这么简单。

点击侧边栏 刷新当前路由 在用 spa 这种开发模式的之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。