在前面两篇文章中已经把基础工作环境构建完成，也已经把后台核心的登录和权限完成了，现在手摸手，一起进入实操。
去年十月份开始用 vue 做管理后台的时候毫不犹豫的就选择了 Elemen，那时候 vue2 刚发没多久，市面上也没有很多其它的 vue2 的 ui 框架。虽然 Element 也有很多的不足，前期的 bug 也不少，但我还是选择了它，说一下我选择 Element 的原因吧：
说了这么多优点，作为一个资深 Element 用户还是有些要抱怨的~和 react 老大哥 Ant Design 相比还是有一定的差距的，不管是组件的丰富性，参数的可配性还是文档的完整性，亦或是 UI 的交互和美观度。不过 ant 也是经过了近 9k 次 commit 的不断打磨，才有了今天。我也相信 Element 也会越来越好的。
这里还有一些其它的框架(只讨论 pc 端的框架)大家可以自行选择：
简单列举了一些主流的框架，不得不感慨现在 vue 的生态圈真是太繁荣了，上述框架楼主并没有深入使用过，不好发表太多建议，大家自行甄别适合自己业务的框架吧。
这里开始我们会开始介绍一些结合 Element 的开发经验。
有些产品就是这么残忍，能完成需求就不错了，还要让我们做动态换肤。Element 官网上也提供了自定义主题的方案 同时也提供了一个在线自定义主题的demo
是不是很酷，作者也说明了实现的方案 地址,大概思路:
我看完觉得真的还是有点复杂的。有没有简单的方案呢？ 让我们思考一下，让我们自己写动态换肤该怎么写呢？最常见的方法就是写两套主题，一套叫 day theme，一套叫 night theme，night theme 主题 都在一个.night-theme 的命名空间下，我们动态的在 body 上 add .night-theme ; remove .night-theme。这就是最简单的动态换肤。所以我们也能不能顺着这个思路，基于 Element 实现动态换肤呢？
首先我们下载官方通过的 Theme generator ,一个专门用来生成 Element 主题的工具。按照文档，我们生成了需要的主题。
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 就可以了。我们就简单实现了动态换肤效果。
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 配置的路由并且根据权限动态生成的，这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事，但也遇到了一个问题，路由可能会有多层嵌套，很多人反馈自己的侧边栏会有三级，甚至还有五级的。所以重构了一下侧边栏，使用了递归组件，这样不管你多少级，都能愉快的显示了。代码
:default-active="$route.path"
将 default-active 一直指向当前路由就可以了，就是这么简单。
点击侧边栏 刷新当前路由
在用 spa 这种开发模式的之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。issue 地址，社区也对该问题展开了激烈讨论。
clickLink(path) {
this.$router.push({
path,
query: {
t: +new Date() //保证每次点击路由的 query 项都是不一样的，确保会重新刷新 view
}
})
}
但这也有一个弊端就是 url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025，但我司用户们表示能接受。。。只能暂时这样 hack 了，不知道大家有没有更好的方法，学习学习。
keep-alive
经过好几个版本的迭代，Element 的 table 组件已经能满足大部分业务需求了。不过 rowSpan colSpan 表格行 /列合并现在并不是支持。官方对此功能的更新情况可以关注这个issue。
这里我着重讲一下 table 表格几个常用的业务形态。
import Sortable from 'sortablejs'
let el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
let sortable = Sortable.create(el)
在 table mounted 之后申明Sortable.create(el) table 的每行 tr 就可以随意拖拽了，麻烦的目前我们的排序都是基于 dom 的，我们的数据层 list 并没有随之改变。所以我们就要手动的来管理我们的列表。
this.sortable = Sortable.create(el, {
onEnd: evt => { //监听 end 事件 手动维护列表
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];
this.newList.splice(evt.newIndex, 0, tempIndex);
}
});
这样我们就简单的完成了 table 拖拽排序。这里如果不是基于 dom 的排序推荐使用**Vue.Draggable**。完整代码
table 内联编辑也是一个常见的需求。
<el-table-column min-width="300px" label="标题">
<template scope="scope">
<el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
<span v-show="!scope.row.edit">{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="编辑" width="120">
<template scope="scope">
<el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="edit">编辑</el-button>
<el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完成</el-button>
</template>
</el-table-column>
通过 dialog 来编辑，新建，删除 table 的元素这种业务场景相对于前面说的两种更加的常见。而且也有不少的小坑。 首先我们要明确一个点 vue 是一个 MVVM 框架，我们传统写代码是命令式编程，拿到 table 这个 dom 之后就是命令式对 dom 增删改。而我们现在用声明式编程，只用关注 data 的变化就好了，所以我们这里的增删改都是基于 list 这个数组来的。这里我们还要明确一点vue 列表渲染注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： * 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
所以我们想改变 table 中第一条数据的值，通过this.list[0]=newValue这样是不会生效的。
解决方案：
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
所以我们可以通过
//添加数据
this.list.unshift(this.temp);
//删除数据
const index = this.list.indexOf(row); //找到要删除数据在 list 中的位置
this.list.splice(index, 1); //通过 splice 删除数据
//修改数据
const index = this.list.indexOf(row); //找到修改的数据在 list 中的位置
this.list.splice(index, 1,this.updatedData); //通过 splice 替换数据 触发视图更新
这样我们就完成了对 table 的增删改操作，列表 view 也自动响应发生了变化。这里在修改数据的时候还有一个小坑需要主要。 当我们拿到需要修改行的数据时候不能直接将它直接赋值给 dialog，不然会发生下面的问题。
//赋值对象是一个 obj
this.objData=Object.assign({}, row) //这样就不会共用同一个对象
//数组我们也有一个巧妙的防范
newArray = oldArray.slice(); //slice 会 clone 返回一个新数组
tab 在后台项目中也比较常用的。假设我们有四个 tab 选项，每个 tab 都会向后端请求数据，但我们希望一开始只会请求当前的 tab 数据，而且 tab 来回切换的时候不会重复请求，只会实例化一次。首先我们想到的就是用v-if 这样的确能做到一开始不会挂载后面的 tab，但有一个问题，每次点击这个 tab 组件都会重新挂载一次，这是我们不想看到的，这时候我们就可以用到<keep-alive>了。
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 它是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
所以我们就可以这样写 tabs 了
<el-tabs v-model="activeTab">
<el-tab-pane label="简介及公告" name="announcement">
<announcement />
</el-tab-pane>
<el-tab-pane label="资讯" name="information">
<keep-alive>
<information v-if="activeTab=='information'" />
</keep-alive>
</el-tab-pane>
<el-tab-pane label="直播流配置" name="stream">
<keep-alive>
<stream v-if="activeTab=='stream'" />
</keep-alive>
</el-tab-pane>
</el-tabs>
Select 选择器直接使用没有什么太多问题，但很多时候我们需要通过 Select 来回显一些数据，当我们<el-select v-model="objValue"> select 绑定一个 obj value 回显就会很蛋疼了，它要求必须保持同一个引用issue。这就意味着，我们回显数据的时候想先要找到该数据在 arr 中的位置，再回塞：demo。这还不是在远程搜索的情况下，如果是远程搜索的情况还要当疼。
这里推荐一下**vue-multiselect** 它能完美的解决前面 Element select 的问题。目前也是 vue component 中比较好用的一个，ui 也非常的好看，建议大家可以尝试性用一下，真的非常的不错。
Upload 本身没什么好说的，文档写的蛮清楚了。这里主要说一下怎么将 Upload 组件和七牛直传结合在一起。
这里我们选择 api 直传的方式，就是我们首先要通过后端(go,node,php 都可以)文档生成七牛上传必要的 token(上传凭证)和 key(资源的最终名称)。 所以现在只要想办法讲 token 和 key 塞进 post 请求里面就可以了，好在官方也提供了这个方法。
<template>
<el-upload
action="https://upload.qbox.me"
:data="dataObj"
drag
:multiple="true"
:before-upload="beforeUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</template>
<script>
import { getToken } from 'api/qiniu'; // 获取七牛 token 后端通过 Access Key,Secret Key,bucket 等生成 token
// 七牛官方 sdk https://developer.qiniu.com/sdk#official-sdk
export default{
data() {
return {
dataObj: { token: '', key: '' },
image_uri: [],
fileList: []
}
},
methods: {
beforeUpload() {
const _self = this;
return new Promise((resolve, reject) => {
getToken().then(response => {
const key = response.data.qiniu_key;
const token = response.data.qiniu_token;
_self._data.dataObj.token = token;
_self._data.dataObj.key = key;
resolve(true);
}).catch(err => {
console.log(err)
reject(false)
});
});
}
}
}
</script>
在使用 Element 的时候，官方提供了很多可以自己写 render function 的地方，但由于 Element 内部都是用 jsx 写 render function 的，所以 demo 也都是 jsx，但很多人自己项目中其实是没有安装的，导致报错。但说真的用 createElement 裸写 render 函数还是有些蛋疼。我们要用 jsx，首先要安装 babel-plugin-transform-vue-jsx 安装方法如下：
npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
.babelrc:文件
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
这样我们就可以愉快的使用 jsx 写 render function 了。
click 事件不触发问题：一直有人在群里问<el-input @click="handlenClick">Click Me</el-input>怎么不触发 click 事件，虽然 element 文档还有完善的空间但这种问题大家还真要自己好好认真看一下官方的FAQ了。
官方说明了所有的原生事件必须添加 .native 修饰符。
修改 element 样式问题： 用 ui 组件总免不了需要对它做一些个性化定制的需求，所以我们就要覆盖 element 的一些样式。 首先我们要了解一下 vue scoped 是什么，很多人非常喜欢用 scoped，妈妈再也不用担心样式冲突问题了，其实 scoped 也没有很神秘的，它就是基于 PostCss 的，加了一个作用局的概念。
//编译前
.example {
color: red;
}
//编译后
.example[_v-f3f3eg9] {
color: red;
}
它和我们传统的命名空间的方法避免 css 冲突没有什么本质性的区别。 现在我们来说说怎么覆盖 element-ui 样式。由于 element-ui 的样式我们是在全局引入的，所以你想在某个 view 里面覆盖它的样式就不能加 scoped，但你又想只覆盖这个页面的 element 样式，你就可在它的父级加一个 class，以用命名空间来解决问题。
.aritle-page{ //你的命名空间
.el-tag { //element-ui 元素
margin-right: 0px;
}
}
建议向楼主一样专门建一个 scss 文件里专门自定义 element-ui 的各种样式。线上代码
其它关于 element 相关的东西真的没有什么好说的了，人家文档和源码就放在那里，有问题就去看文档，再去 issue 里找找，再去看看源码，大部分问题都能解决了。给一个诀窍其实大部分诡异的问题都可以通过加一个 key 或者 Vue.nextTick 来解决。。
管理后台富文本也是一个非常重要的功能，楼主在这里也踩了不少的坑。楼主在项目里最终选择了tinymce 这里在简述一下推荐使用 tinymce 的原因：tinymce 是一家老牌做富文本的公司(这里也推荐 ckeditor，也是一家一直做富文本的公司，也不错)，它的产品经受了市场的认可，不管是文档还是配置的自由度都很好。在使用富文本的时候有一点也很关键就是复制格式化，之前在用一款韩国人做的富文本 summernote 被它的格式化坑的死去活来，但 tinymce 的去格式化相当的好，它还有一个增值项目就是 powerpaste,那是无比的强大，支持从 word 里面复制各种东西，都不会有问题。富文本还有一点也很关键，就是拓展性。楼主用 tinymce 写了好几个插件，学习成本和容易度都不错，很方便拓展。最后一点就是文档很完善，基本你想得到的配置项，它都有。tinymce 也支持按需加载，你可以通过它官方的 build 页定制自己需要的 plugins。 我再来分析一下市面上其它的一些富文本：
楼主列举了很多富文本但并没有列举任何 vue 相关的富文本，主要是因为富文本真的比想象中复杂，在前面的文章里也说过了，其实用 vue 封装组件很方便的，没必要去用人家封装的东西什么 vue-quill vue-editor 这种都只是简单包了一层，没什么难度的。还不如自己来封装，灵活性可控性更强一点。还有一点基于 vue 真没什么好的富文本，不像 react 有 facebook 出的draft-js，ory 出的editor，这种大厂出的产品。
markdown 我们这里选用了 simplemde-markdown-editor ，简单的用 vue 封装了一下地址,如果需求方能接受 markdown 就一定要用 markdown，坑真心会比富文本少很多。这里我们用 markdown 做了编辑器，还需要一个能解析的的东西。可以你传给后端让后端帮你转化，也可以前端自己来，这里推荐一个转化库showdown。使用方法：
import('showdown').then(showdown => { //用了 Dynamic import
const converter = new showdown.Converter();//初始化
this.html = converter.makeHtml(this.content)//转化
})
用法也很简单两行代码就完成了 markdown to html，当然它还有很多个性画的配置，大家有需求自行研究吧。
这里先明确一点，如果你的业务需求对导出文件的格式没有什么要求，不建议导出成 xlsx 格式的，直接导出成 csv 的就好了，真的会简单很多。创建一个 a 标签，写上data:text/csv;charset=utf-8头，再把数据塞进去，encodeURI(csvContent)一下就好了，详情就不展开了，大家可以借鉴这个stackoverflow 回答。
我们重点说一下转 xlsx，我们这里用到了js-xlsx，一个功能很强大 excel 处理库，只是下载各种格式 excel，还支持读取 excel，但上手难度也非常大，相当的复杂，其中涉及不少二进制相关的东西。不过好在官方给了我们一个demo 例子,我们写不来还抄不来么，于是我们就借鉴官方的例子来改造了一下，具体原理就不详细说了，真的很复杂。。。
重点是我们怎么使用！首先我们封装一个Export2Excel.js，
它又依赖三个库
require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //转二进制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx 核心
由于这几个文件不支持 import 引入，所以我们需要`script-loader`来将他们挂载到全局环境下。
它暴露了两个接口export_table_to_excel和export_json_to_excel,我们常用export_json_to_excel因为更加的可控一点，我们可以自由的洗数据。
handleDownload() {
require.ensure([], () => { // 用 webpack Code Splitting xlsl 还是很大的
const { export_json_to_excel } = require('vendor/Export2Excel');
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']; // excel 表格头
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
const list = this.list;
const data = this.formatJson(filterVal, list); // 自行洗数据 按序排序的一个 array 数组
export_json_to_excel(tHeader, data, '列表 excel');
})
}，
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
管理后台图表也是常见得需求。这里图表就只推荐 ECharts，功能齐全，社区 demo 也丰富gallery。我还是那个观点，大部分插件建议大家还是自己用 vue 来包装就好了，真的很简单。ECharts 支持 webpack 引入，图省事可以将 ECharts 整个引入var echarts = require('echarts');不过 ECharts 还是不小的，我们大部分情况只是用到很少一部分功能，我平时习惯于按需引入的。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
webpack 中使用 ECharts 文档 ECharts 按需引入模块文档 接下来我们就要在 vue 中声明初始化 ECharts 了。因为 ECharts 初始化必须绑定 dom，所以我们只能在 vue 的 mounted 生命周期里初始化。
mounted() {
this.initCharts();
},
methods: {
initBar() {
this.chart = echarts.init(this.$el);
this.setOptions();
},
setOptions() {
this.chart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
}
就这样简单，ECharts 就配置完成了，这时候你想说我的 data 是远程获取的，或者说我动态改变 ECharts 的配置该怎么办呢？我们可以通过 watch 来触发 setOptions 方法
//第一种 watch options 变化 利用 vue 的深度 watcher，options 一有变化就重新 setOption
watch: {
options: {
handler(options) {
this.chart.setOption(this.options)
},
deep: true
},
}
//第二种 只 watch 数据的变化 只有数据变化时触发 ECharts
watch: {
seriesData(val) {
this.setOptions({series:val})
}
}
其实都差不多，还是要结合自己业务来封装。后面就和平时使用 ECharts 没有什么区别了。题外话 ECharts 的可配置项真心多，大家使用的时候可能要花一点时间了解它的 api 的。知乎有个问题：百度还有什么比较良心的产品？答案：ECharts，可见 ECharts 的强大与好用。
常规占坑，这里是手摸手，带你用 vue 撸后台系类 完整项目地址：vue-element-admin 系类文章一：手摸手，带你用 vue 撸后台 系列一（基础篇） 系类文章二：手摸手，带你用 vue 撸后台 系列二（登录权限篇） 之后计划项目应会加上 i18n，并完善一下代码和文档。 下一篇文章可能会写关于如何用 electron 包装现有项目，快速实现一个跨平台的终端后台。 相应广大需求 建了一个 qq 群 591724180 方便大家交流
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.