最近使用 Vue 对项目中涉及的各种历史悠久的、基于不同陈旧技术栈的的运营后台进行了彻底重构，简单记录一下过程中一些总结。

当前团队负责的几个运营后台都是很久以前开发的，历史原因前端部分技术栈很混乱，部分是 JSP 写的，还有 Velocity 和 Freemarker 的，甚至还有一个 php 的，维护起来实在是头疼。于是这次借着组件化的计划，我们对后台系统也来个“组件化”重构。由于团队目前并没有专职前端开发同学，鉴于之前做冰箱购物时接触过 Vue 有一定了解以及参加马拉松时写过微信小程序，因此在我的大力推销下团队成员一致赞成使用 Vue 进行前后端分离重构。

本次重构基于一个 Vue 的 Admin 框架vue-element-admin，其中用到了 Vue 生态及相关的一些组件如下：

具体的实现就不细讲了，中间也遇到了一些坑，前端基础不扎实的话在有些细节上就会花费更多的时间，不过最后还是按时顺利上线，和之前完全不同风格的 UI 和交互细节也得到了大家的认可。

单个组件/页面中覆盖 element 样式

可以参考 自定义 element-ui 样式，根据实践最佳方式是在 scope 作用域下通过定义一个父 class，然后使用深度选择器进行样式定制即可，类似这样

1
2
3
4
.demo-form-inline >>> .el-input-group__prepend {
  width: 125px;
  text-align: center;
}

全局 filter

vue 的 过滤器 用起来很方便，如果多个页面公用的过滤器可以抽取到单个js文件中全局注册，这样在组件中使用的时候直接用即可

filters.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export const statusFilter = (status) => {
    const statusMap = {
    '1': 'success',
    '2': 'info',
    '0': 'info',
    '-1': 'danger'
    }
    return statusMap[status]
}

export const statusShowFilter = (status) => {
    const statusMap = {
    '1': 'Passed',
    '2': 'Auditing',
    '-1': 'Deleted',
    '0': 'None'
    }
    return statusMap[status]
}

然后在 main.js 中引入全局注册即可，注意这里注册 filters 一定要在初始化 vue 之前

1
2
3
4
import * as filters from '@/utils/filters'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

js 模块化概念

理解 vuejs 文档中的 对不同构建版本的解释 可以参考这篇文章：JS 模块化规范：CommonJS, AMD, CMD, UMD, ESM

awesome-vue

awesome-vue 是官方整理的 vue 相关的一些资源，包括 ui 库、各种工具、模板等等

vue app 部署至 github pages

具体部署步骤可以参考 vue-cli 官方文档，demo 参考 my-vue-admin
注意：需要将打包路径由 dist 改为 docs（github 只支持这个目录），另外还可以将 dist 目录初始化为一个仓库推送到 github，直接使用 master 分支部署应用也可以，这样就如同 hexo 一样，源码和博客文件放置在不同仓库

后续会考虑找时间结合 mockjs 基于 vue-admin 二次开发做一个 JD 风格的 Admin 组件库，不过可能也只是想想而已。。。