用 Vue 改造 Bootstrap，渐进提高项目框架

时间 2019-11-09

标签 vue 改造 bootstrap 渐进提高项目框架栏目 Bootstarp 繁體版

原文原文链接

前言

Vue 横空出世，以迅雷不及掩耳之势横扫前端界，俨然有当年 jQuery 之势。我认为 Vue 成功的关键在于三点：javascript

学习曲线平缓，有点经验的前端基本上一天就能看完文档，而后就能够上手操做。html
上升空间很大，组件化/路由/Vuex/Ajax，生态完整，架构强壮，用它构建中大型项目也很容易。前端
API 设计优雅，而且和标准很友好。vue

可是在我看来，不少 Vue UI 组件库反倒走在一条错误的道路上：过度追大求全。好比说，第一个组件多半是 Grid，CSS 能搞定的事情为何要作成组件？前端原本就是 HTML/CSS/JS 的集合，咱们理应把合适的技术用在合适的地方。java

固然，若是你是想把一切都塞进 JS 的“JS 至上党”，这样作也行。不过，不是每一个人都要从头开始作一个新产品，不少同窗正在维护一个老产品，如何把新技术应用到老产品里，让它老树开新花，也是本文的主旨。react

因此接下来，我会介绍这些内容：jquery

前端框架不少，为何要使用 Vue？webpack
一个基于 jQuery + Bootstrap 的后台项目。git
对其进行有限的改造，让它能渐进地得到提高。es6
CSS 的归 CSS，JS 的归 JS。

适合的读者

初中级前端，但愿学习 Vue 和组件式开发。
后端，用过 Bootstrap，想升级改造框架。

名词及约定

ES6 = ES2015
MVVM Model-View-ViewModel，一种现代化的 UI 架构体系，很是适合 HTML + CSS 这样的标记型语言，经实践证实能够大大提高开发效率。本文中大部分和 Vue 互相指代。
响应式在 CSS 领域，咱们能够简单理解成手机端和桌面端有不一样的呈现；在 MVVM 框架（本文上，它指界面根据数据自动刷新显示。

Vue 实现响应式的基础是 ES5 中的 Object.defineProperty() 方法，它把普通的属性读写改为 getter/setter，以便注入其它操做。大部分现代化浏览器都已经支持这个方法，但一些古老的浏览器如 IE8 不支持（如今还在使用 IE8 的人你也很难期望他们会升级），若是你要使用 Vue，请确保你的项目不会跑在这些平台上。

本文使用 Bootstrap 4.0.0-alpha.6，Vue 2.4.0+。

做者介绍

你们好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 不要紧，从高中起伴随我到如今。

我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，但愿能与你们分享。

我兴趣爱比如较普遍，尤为喜欢旅游，欢迎你们相互交流。

你能够在这里找到我：

版权许可

本书采用“保持署名—非商用”创意共享4.0许可证。

只要保持原做者署名和非商用，您能够自由地阅读、分享、修改本书。

反馈

若是您对于文中的内容有任何疑问，请在评论或 Issue 中告诉我。亦可发邮件给我：meathill[at]gmail.com。谢谢。

前端框架发展简史

对前端框架不感兴趣的同窗能够跳过这一章，并不会影响后面的理解。

这章主要解决这些问题：

为何要切换到 Vue 上？
jQuery 真的过期了么？
除了 Vue 之外，我还有其它选择么？

我以前还作过一次视频分享 jQuery, Backbone, Vue，也是经过分析 JS 开发的历史，对比三个时期最具表明性的框架。感兴趣的同窗能够看一下。

史前文明

有位名人说过：“一我的的命运啊，固然要靠自我奋斗，可是也要考虑到历史的行程。”这句话放在 Web 技术上，其实也很是正确。

发明 HTML 的目的是为了方便阅读文献，因此它身上有不少印刷业的影子。后来你们嫌排版没有其它工具作得漂亮，因而又发明了 CSS。结果凭借着极高的传播效率，市面上又缺乏竞品，急速普及，被你们拿来干各类事情。

在那个拨号上网的洪荒年代，浏览器还很是初级，与服务器进行数据交互的惟一方式就是提交表单。用户填写完成以后，交给服务器处理，若是内容合规固然好，若是不合规就麻烦了，必须打回来重填。因此很容易想象：当用户填完100+选项，按下提交按钮，等待几十秒甚至几分钟以后，反馈回来的信息倒是：“您的用户名不能包含大写字母”，他会有多么崩溃多么想杀人。为了提高用户体验，网景公司的布兰登·艾克用了大约10天时间，开发出 JavaScript 的原型，今后，这门注定改变世界的语言就诞生了。

石器时代：jQuery

这个时候浏览器还处于很是严重的分裂状态。IE 自恃有 Windows 护身，真是想怎么搞怎么搞。另外一边的网景后来的 Firefox 空有一腔报国热血，可是怎么都干不过 IE。后来干脆全捐给开源社区，曲线救国，用免费开源的群众战争和微软打。

这种环境受苦的仍是网页开发者。同一个页面，常常要写两套代码，而后寻找各式各样的 Hack 方法，费时费力。因而 jQuery 出现后你们以为真是“春风十里，不如你”。

jQuery 的口号是：“Write less, do more“，为 Web 开发作出了卓越的贡献：

提供统一的操做接口。你不须要担忧代码跑在什么浏览器上，自有 jQuery 来适配。
封装了不少经常使用接口。好比增删样式，只须要 .addClass(className) 就能够，比原始方法简单不少。
用组合模式减小错误。HTML 结构多变，JS 操做 DOM 节点很容易发生错误，尤为早期切页面和写 JS 的极可能不是同一我的。用 jQuery 你至少不用担忧会报错。

就这样，jQuery 凭借着出色的工程设计，俘获了大量开发者的心，是如今最普及的框架。

铁器时代：Backbone

jQuery 治下的 DOM 操做实在太简单了，选择器 + 修改，还不用担忧报错。这就比如说，邻居有个热心大哥，买了辆车，说你出门尽管找他。而后他还真的来者不拒，笑脸相迎，以致于小区里的人出门都不开车也不打车也不骑车，都坐他的车。

开始老是好的，但随着环境变化，老的优点也可能会变成问题。就像一个小区只有一辆车确定不够同样，开发者对 DOM 操做过度依赖，会致使 JS 代码和 HTML 严重耦合，牵一发而动全身，维护成本大幅升高。

另外，通过几年发展，包括 Flash 等软件不懈探索，此时的 Web 已经不只仅要提供能阅读的图文信息，愈来愈多的 RIA(Rich Internet Application，富互联网应用) 涌现出来，你们都在竭尽所能地把桌面软件搬上互联网。这对前端开发提出了更高的要求。

Backbone 给出了本身的答案。它是一个 MVP 框架，充分利用了现代 Web 技术，包括 jQuery。它大大减小了操做 DOM 的需求，转而教你们使用模板。它以数据为视角来组织代码，告诉你们：原来 JS 还能够这么写。

使用 Backbone 编写的应用在工程性方面提高巨大，维护成本大大下降，后期增删改功能都变得相对容易。开发中大型软件也变得可行，开发者感觉到技术架构带来的价值，更加主动的放眼看世界，果真还有更值得咱们学习的东西。

蒸汽动力：Knockout，Angular1

MVC 是 Smalltalk 提出的编程模型，实际上，那个时期的概念跟今天相距甚远：主要输入设备是键盘，鼠标指针在屏幕上移动都须要开发者本身写，更没有“元素-点击事件”这种极其抽象的东西。因此它里面的 Model-View-Controller 不能用如今的概念去套。(感兴趣的同窗能够去看下扩展阅读里头两篇文章。)

随着 UI 技术的发展，接下来出现的是 MVP 模型。它里面的 P（Presenter）已是 UI 控件了，因此和 Web 技术很是接近。Backbone 就是这样架构的框架。

接下来，UI 技术进一步发展，HTML 这种标记语言如日中天，因而微软最先提出了 MVVM 的概念，而且将它应用在自家产品中。它的模式是这样的：

(图片来源： https://erazerbrecht.wordpress.com/2015/10/13/mvvm-entityframework/)

View 视图和 ViewModel 双向数据绑定，View 既是数据展现窗口，也是接受用户操做的输入来源。ViewModel 除了负责渲染逻辑之外，还负责全局数据管理，以及和真正的数据源 Model 进行交互。MVVM 很是吸引人，由于它在 MVP 的基础上又进行了一次抽象，而且提供双向数据绑定，因此开发维护效率巨高，代码量可能只有 MVP 的 1/10，但功能一致甚至更强。

最先在 Web 中引入这套模式的是 Knockout。用英语的句式来讲：它是如此之早以致于它甚至支持 IE 6 和 Firefox 3.5……因而这也让它背上了沉重的历史包袱：

它必须显式的声明数据绑定，显式到语法啰哩吧嗦。
赋值时必须使用 .get(key) .set(key, val) 这种语法，甚至 a.get('key1').get('key2').get('key3').set('key4', val) 这样。

另外一个尝试来自 Angular1。它不须要这么复杂的语法，而是采用“脏查询”的方式，即当某个可能致使页面从新渲染的操做产生后，检查全部备案过的变量，若是有改变的，就从新渲染。这种作法的问题就是慢，在运算能力充足的桌面电脑上感受不明显，可是在移动端就会很慢。桌面端也会慢，因此它只能追踪1000个变量。

可是它的开发效率的确很高，在企业级占据霸主地位，几乎已是事实标准。

这两个框架有些生不逢时，由于浏览器总体环境的限制，它们选择了不够完善的实现方案。可是 Angular 至少证实了这个方向可行，并且效果很好，因而他们注定要被后浪拍在沙滩上。

电子时代：Vue，React，Angular2/4/5

接下来便轮到咱们的主角登场了。不过与它一块儿登场的还有另外两名选手，都是背景深厚实力不凡的大 Boss，我先介绍它们。

React

React 是 Facebook 研发的框架。它最大的特色是使用虚拟 DOM 做为实际 DOM 的影子，这样当它判断是否须要从新渲染时，就不用费力的与 DOM 交互，而只要从 JS 内存中取出虚拟 DOM 作 diff 便可。这样作能够大大提高检查效率，提升渲染速度。

但它本质上仍然在执行脏检查，因此实际效率不过高，或者说，有明显的天花板；只是面对愈来愈强的计算能力，这些损失浪费的表现愈来愈不明显。可是虚拟 DOM 也带来另一个好处：若是重写它的实现机制，能够在任意场合实现任意类型的渲染，包括移动 App。因而便诞生了 React Native 这个项目，能够直接把基于 React 开发的 Web 项目转译成原生应用。

React 背靠 Facebook 这座大山，国内也有阿里支持，社区异常活跃，生态异常丰富。又能编译出原生应用，这是它最大的优点。

不过 React 也有缺点，致使我没有选择它：

要使用 React 必须使用丑陋的 JSX，我认为这是反标准的。
它的生态虽然丰富，可是官方并无引导，没有全家桶，各类实现良莠不齐。
设计上为照顾大规模企业级开发，里面有众多新概念，学习曲线很是陡峭。
夹带私货，现在 Apache 基金会已经禁止使用 React。

Angular 2/4/5

Angular 吸收了第一代的教训，在 Angular 2 里重写了底层逻辑，也使用虚拟 DOM 来判断是否须要从新渲染。因此 React 的优点它基本也有。以后的 v四、v5都是在 v2 基础上的改进，并无特别大的变化。

Angular 的学习曲线就更陡峭了，应该说它从一开始就没打算走群众路线，而是直接奔着大而全的企业级开发框架去作的（由于 v1 就是这样作的而且取得了成功）——相对来讲 React 表现的还有点扭捏。

另外 Angular 为了可以更好的对接大规模团队开发，选择 TypeScript 做为开发语言，一方面使得学习成本更高；另外一方面也和标准化渐行渐远。这也是我不推荐它的缘由。

Vue

与前面两个竞品不一样，Vue 是我的做品，并且在 2013 年才开始开发。但我选择它推荐它并非由于什么挑战大公司霸权的情怀，而是它的确设计得很棒。

双向绑定效率高

问世的晚，历史包袱就少。Vue 使用 ES5 新增的 Object.defineProperty() 方法，将对象的属性转化为 getter/setter，这样咱们习觉得常的 this.a=1 赋值语句实际上就被改写成 this.set('a', 1)，而这个操做对开发者来讲是彻底无感的！这样咱们一方面能够正常写代码，另外一方面还能够轻松的享受到双向绑定，而且是高效的没有多余动做的绑定，任何有点点洁癖或者强迫症的人都会以为很舒服吧！
模块化减缓学习曲线

初入门时，咱们只须要学习 Vue 就好。若是只想实现简单的“数据<=>视图”映射，区区几行代码就足够了，很是简单。甚至能够直接拿来替换 jQuery。

以后随着项目增大，使用加深，能够慢慢的开始使用组件，使用路由，使用全局状态管理。这一系列进化都在平缓的进行。
贴近标准

与大公司喜欢夹带私货，搞自有标准不一样，Vue 是标准友好的。甚至连 Vue 控件，写出来都跟普通 HTML 同样。做为我的开发者，或者小公司开发人员，我不肯意介入大公司之间的角逐，我见过妖魔横行的年代，我但愿标准一统天下。

小结

在表明先进生产力的 MVVM 框架里，我最终选了 Vue 做为新的主攻框架。我也把它推荐给你们。

框架入门

这一章会简单介绍 Bootstrap 和 Vue 的入门知识，若是您已经了解，能够跳到下一章。

Bootstrap 简介

Bootstrap 是 Twitter 的两位前端工程师搞出来的前端框架。它包含了大量 UI 组件，能够覆盖到不少开发场景，大大提高开发效率。

Bootstrap 通过几轮升级，如今处于 v4-alpha.6 阶段，做为一个免费开源产品，原做者太忙，alpha 快两年了，还没 beta，不知道何时能正式版。不过通过我一段时间的使用，我以为目前这个版本基本上没啥大问题，仍是推荐你们使用。

Bootstrap 4 alpha 6 文档

做为最流行的前端框架，有不少人基于它作出了不少值得学习的项目，不少都是开源免费的，也一并推荐给你们：

Bootstrap 免费主题
Bootstrap 付费模板
CoreUI 基于 Bootstrap 作的后台类模板，免费，有多种框架配置
Start Bootstrap 另外一套免费模板

Bootstrap 的文档很是详细，我就不凑字数了。未来文章发布后如有问题再补充吧。

Vue 入门

Vue 的文档很是棒，尤为还有中文版，学习起来轻松愉快。

Vue 官方教程中文版

这里我也再也不重复官方已有的内容了，你们本身看就好。说一下我理解中，从 jQuery 向 Vue 转换时须要注意的东西。

MVVM 对数据的抽象

jQuery 里几乎没有数据抽象。你面对的就是一个虽然错综复杂，可是总能找到联系的 DOM 树，只要你有耐心，总能把它改为你想要的样子。

MVP 就抽象出数据层和视图层，可是还要咱们手动更新视图；MVVM 比 MVP 的抽象更进一步，只要操做数据。因此咱们必需要理解它的抽象，而且习惯它的抽象。

在这个体系里，咱们应避免直接操做 DOM，由于一切都是数据的映射。举个例子，一个新闻列表，在传统开发模式中，是无数个 DOM 操做的结果；而在 Vue 里，就是经过模板把数据映射成 HTML。对后台类产品而言，这很好理解也很好实现，由于后台能够抽象成用户与数据的交互，而后还原成数据的展现和修改，继而直接对应到屏幕上的组件上。

在写 Vue 应用的时候，咱们须要注意，哪些数据是业务数据，即要拿来跟后端数据进行交互的；哪些数据是界面数据，即用来切换页面状态，和业务无关。可是基本上，咱们不须要直接操做 DOM。

组件复用

组件是 Vue 最值得注意的强大特性。组件化和组件复用将大大提高咱们的开发效率。

使用组件主要有两种方式：

注册全局组件。这种方式很简单，有点相似 jQuery 插件，咱们只要引用组件就好，而后就能够在模板中使用特定的组件标签。比较适合已有项目，能够在不怎么改动的前提下接入应用 Vue。
使用局部组件。这种方式要复杂一些，并且也有几种不一样的实现，若是同时要加载组件模板和组件样式，可能还要用 webpack + vue-loader。

由于这篇文章就是“渐进式改造项目”，因此根据项目现状选择合适的方法颇有必要。

ES6 与生态

这个其实不是 jQuery 和 Vue 的差异，只是在眼下这个时间点，ES6 已经实装到绝大部分浏览器里，因此咱们不管是看文档、看教程都会看到大量 ES6 的内容。至于整个前端生态，基于 Node.js 开发的各类工具也已经普及到方方面面，使用 webpack + 各类 loader 已经成了默认功课。

因此，那个用 <script src="/path/to/jquery.js"> 引入 jQuery，而后就能够在页面当中任意使用 jQuery 相关技术的年代，其实已通过去了。

目标改造项目简介

这个项目，原本有机会成为一个真实的项目，但造化弄人，因此它如今只是一个虚拟的项目。

这个项目是这样的：

一个后台产品，主要面向公司内部员工，提供对公司产品的维护。
后台已经工做了5年，如今仍在正常工做，不能下线。
后台不断有新需求，不太可能另起炉灶开发。
后台使用 Bootstrap + jQuery 搭建，是一个先后端分离结构，每一个子页面加载完成后，会有一个组件管理器对子页面进行扫描，初始化组件，而且完成数据加载。
公司的角度，对 Vue 即不支持也不反对，只要求必须保证开发效率和工做效率。
虽然这个产品很重要，可是公司不会投入更多的人力，从头至尾都只有原先的几我的来作。

如今，做为一个有追求有梦想，而且想在跳槽的时候有更多加分的前端开发者，我要对它进行 Vuerify 改造了！

第0步：分析

好的，啰嗦半天半天终于进入实战了。不过，在动手以前我还要多说两句。所谓谋定然后动，想清楚再动手，确定比头脑一热上去猛干要好。

一个项目能跑5年，说明其设计大致上仍是过硬的。因此一开始最好不要动其根本，先找比较独立的一起来弄最为合适。

咱们看一眼 Bootstrap 的文档，首先布局（Layout）和内容（Content）的部分就不须要组件化了，CSS 搞得定的事情就不劳 JS 动手了。

组件（Component）里面，有不少也是纯 CSS（好比Badge）或者能够进行纯 CSS 改造的（好比 Navs），这些咱们先无论，即便改造也等未来用 CSS 改造或者直接放到大组件里。还有像 Tooltip 这样，虽然带着一点 JS，但实际上对 JS 的需求很低，咱们也不用管它，只要 jQuery 一日不死，这些旧臣都能尽忠报国。

看来看去，最值得拿来入手的应该是弹窗（Modal）和通知（Alert）之类和主要业务逻辑关系不大，自身可定制性比较强（JS 比较复杂）的组件。

好的，就拿弹窗来试刀吧！

篇幅所限，我无法展现对每个组件的重构/改造，因此本文中的几个篇章都有特定的目的，主要在于介绍一门或几个技术。但愿你们触类旁通，将它们应用到平常工做中。

本章的目的在于领你们入门。

弹窗除了用做通知之外，在后台产品当中还常常用来对特定属性进行修改，以下图所示：

对于这样的需求，在以前的产品中我是这么作的，首先，HTML 部分就按照 Bootstrap 的标准套路来写：

<div class="modal fade" id="sales-editor"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">修改职位</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form action="/api/sales/" data-action="/api/sales/{{id}}" method="POST" id="sales-editor-form"> <input type="hidden" name="user_id" value=""> <div class="form-group"> <label for="type">职位</label> <select class="form-control" name="type" id="type"> <option value="1">区域总监</option> <option value="2">商务经理</option> <option value="3">商务助理</option> </select> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" form="sales-editor-form"><i class="fa fa-check"></i> 保存</button> <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> 取消</button> </div> </div> </div> </div>

表格模板是这样的（只写单行吧，其它部分意义不大）：

<tr> <td>{{name}}</td> <td><button type="button" class="btn btn-primary edit-button" data-id="{{id}}">编辑</button></td> </tr>

这两部分没什么好解释的。接下来 JS 的部分就稍显啰嗦：

// 经过后端接口取出来全部商务数据 let allSales = fetchAllSales(); // 编辑按钮的点击事件，每次点击，除了打开新窗口，还要把表单里面的几个值修改一下 $('#table').on('click', '.edit-button', event => { let id = $(this).data('id'); let sales = allSales[id]; $('#sales-editor').modal('show') .find('[name=user_id]').val(id) .end().find('form').attr(function () { return $(this).data('action').replace('{{id}}', id); }) .end().find('select').val(sales.type); });

很明显，正如前文所写的那样，jQuery 用起来很方便，能够在 DOM 节点之间自由穿梭。可是由于它没有抽象，因此任何操做都要手工编写，会形成 JS 和 HTML 深度耦合，不只不方便维护，新功能开发的时候也要写不少多余的代码。

接下来咱们要用 Vue 实现一样地功能，应该怎么写呢？

首先咱们能够观察一下 Bootstrap 里 Modal 的实现机制，很明显，它是经过修改 .modal 元素的 display 属性和增删 show 样式来实现的。那很简单，咱们知道，Vue 里，能够经过 :prop="someValue" 把 vm 的值 someValue 绑定到 DOM 节点的 prop 属性上，因此控制弹窗的打开关闭就很简单：

<div class="modal fade" :class="isShow ? 'show' : ''" :style="isShow ? 'display:block' : ''" id="sales-editor" @click.self="close"> <!-- 内容 --> </div> <div class="modal-backdrop fade" :class="isShow ? 'show' : ''" v-show="isShow"></div>

let app = new Vue({ el: '#app', data: { isShow: false }, methods: { show() { this.isShow = true; }, close() { this.isShow = false; } } });

（这里只列出重点代码，其它由于不影响大局就没有写。具体能够参考 codepen oegbvK）

这样修改了以后，我发现打开关闭已经正常工做了，可是没有动画，看起来不够炫酷。不要紧，咱们审查元素，发现是 .show 样式增长的过渡效果，opacity 0 <-> 1，而同时设置 display 属性会使得它缺失过渡效果。那很简单，咱们能够用 watch 观察选项，侦听 isShow 的变化，在它变化后，间隔一点点时间，再触发动画。关闭的动画就要侦听 transitionend事件了，在关闭动画完成后再隐藏这部分元素。修改后的代码是这样的：

<div class="modal fade" :class="isShowClass ? 'show' : ''" :style="isShow ? 'display:block' : ''" id="sales-editor" @click.self="close" @transitionend="hide"> <!-- 内容 --> </div> <div class="modal-backdrop fade" :class="isShowClass ? 'show' : ''" v-show="isShow"></div>

let app = new Vue({ el: '#app', data: { isShow: false, isShowClass: false }, methods: { show() { this.isShow = true; }, hide() { this.isShow = false; }, close() { this.isShowClass = false; } }, watch: { isShow(value) { setTimeout(() => { this.nextShow = value; }, 50); } } })

填入表单

进展的还算顺利，咱们如今已经能够正常开关弹窗了。

接下来我要把表单中的其它属性填进去。对于 Vue 来讲，这就太简单了，由于 MVVM 框架最擅长的就是把数据和 UI 进行双向绑定，只用很是少的代码。

<form :action="'/api/sales/' + id" method="POST" id="sales-editor-form"> <input type="hidden" name="user_id" :value="id"> <div class="form-group"> <label for="type">职位</label> <select class="form-control" name="type" id="type" v-modal="type"> <option value="1">区域总监</option> <option value="2">商务经理</option> <option value="3">商务助理</option> </select> </div> </form>

三两下清洁溜溜。接下来改一下编辑按钮的响应事件：

let modal = new Vue(....); // 把 Vue 组件弄出来备好 $('#table').on('click', '.edit-button', event => { let id = $(this).data('id'); let sales = allSales[id]; modal.id = id; modal.type = sales.type; modal.isShow = true; });

代码量一下少了好多，真是舒爽！

不过还没完，由于还要把数据提交给服务器，而且适当的显示结果，因此咱们继续工做。此次要侦听表单的提交事件，把它拦截下来，将数据用 Ajax 的方式提交，而且显示结果。

<form @submit.prevent="submit"> <div class="alert" :class="result-status" v-if="result !== null">{{result}}</div>

// Vue Modal 组件 data: { result: null, message: '' } methods: { submit(event) { $.ajax(event.target.action, { dataType: 'json', data: { type: this.type } }) .then( response => { this.result = response.code; this.message = response.message; this.$emit('saved', this.id, this.type); }) .catch( err => { this.result = 500; this.message = err.message; }); } } // 外面的老列表代码 let allSales = fetchAllSales(); let modal = new Vue(....); modal.on('saved', (id, type) => { allSales[id].type = type; });

在这段代码中，我侦听到 submit 事件，而后把用户选择的数据经过 Ajax 上传给服务器。当服务器返回时，再根据返回值，直接在窗口中显示成功或失败提示。接下来，将完成操做的消息广播出去。外界接到消息后，能够进行下一步的处理。

这里你们能够看到我在侦听事件的 @submit 后面增长了 .prevent，若是你留心的话，上一节还有用到 @click.self，这可不是 jQuery 的事件命名空间，而是 Vue 的事件修饰符。这是一种语法糖，由于咱们常常须要在事件处理函数里进行 .preventDefault() 之类的操做，Vue 干脆把它们进行封装，并以显式声明的方式提供给咱们。

另外，我在 Ajax 请求当中使用了 Promise 的写法，若是你对 JS 的异步开发还不甚了解，推荐你看个人另外一篇文章：JavaScript 开发全攻略

小结

初战告捷！

在这一节中，咱们对一段老的，依赖 jQuery 和 Bootstrap 的代码进行了重构，使得它如今支持 Vue，并以 Vue 的方式打开关闭以及与服务器交互。

可能会有同窗问：这样作，是否是太简单了……

没错，千里之行始于足下。若是咱们从头开发一个项目，大能够直接搬来一套 UI 框架，好比 Element.ui，而后全都按照他的标准来写。但当咱们面对着一个已经上线提供服务的产品，就不得不谨慎行事，经过一点一滴的积累，把它逐步往咱们但愿的目标改造。

不过你们能够放心：

这个改造只是入门，咱们不会就此收手。
“MVVM 最早进 UI 架构”的优点还会保持很长时间，甚至在新的交互方式（好比语言，读心）普及以前不会被取代，咱们大能够把这个改造过程拉长到3~6个月，甚至一年，而不用担忧半路又要改到其它方向。
当咱们学会并施行组件化开发，开发效率会大增。

第二步：用户登陆

本章的目的在于教授你们 Vuex 的用法，以及逐步用 Vue 接管全局。

一段时间过去，我用这种看起来很土的方式改造了一部分代码，如今我但愿更进一步，正好最近几个需求都处在验收阶段，我有一些时间能够作想作的事。

那就改造用户系统吧！

之因此选择这个方向，是考虑到用户登陆与用户信息管理是另外一个全局功能，和具体业务无关，但又在程序入口，经过对它的改造，咱们有机会去触动更基础的部分，对未来完全转向 Vue 有很大帮助。

说干就干，我翻查老代码，发现如今的处理方式，是在页面初始化的时候，向服务器发起一个请求，验证用户身份。

若是已经登陆，获取用户的信息，好比名字，能够看到的导航菜单等。
若是没有登陆，则跳到登陆页。

这个过程其实还有点复杂，复杂就复杂在须要根据用户身份更新导航菜单。不过也正和我意，总得从外围向内核渗透么不是。

首先，修改整个 index.html，把左侧导航列表改为 Vue 模板：

<ul id="navbar-side-inner" class="nav side-nav"> <li class="nav-item"> <a href="#/dashboard"><i class="fa fa-dashboard"></i><span>首页</span></a> </li> <li class="sidebar-nav-item" :class="invisible ? '' : 'hidden'" :id="'parent-' + item.link + item.subId" class="nav-item" v-for="item in sidebar"> <template v-if="item.sub"> <a href="javascript:void(0);" data-parent="#navbar-side-inner" data-toggle="collapse" class="accordion-toggle" :data-target="'#' + item.sub-id" v-if="item.sub"> <i class="fa" :class="'fa-' + item.icon" v-if="item.icon"></i> <span>{{item.title}}</span> <span class="caret" v-if="item.sub"></span> </a> <ul class="nav collapse" :id="item.subId"> <li :id="item.link" :class="invisible ? '' : 'hidden'" v-for="item in sub"> <a :href="item.link"> <i class="fa" :class="'fa-' + item.icon" v-if="item.icon"></i> <span>{{item.title}}</span> <button type="button" class="eye-edit-button" v-if="editing"><i class="fa fa-eye"></i></button> </a> </li> {{/each}} </ul> </template> <a :href="item.link" v-else> <i class="fa" :class="'fa-' + item.icon" v-if="item.icon"></i> <span>{{item.title}}</span> <button type="button" class="eye-edit-button" v-if="editing" v-if="editing"><i class="fa fa-eye"></i></button> </a> </li> </ul>

若是你仔细看上面这段的代码，你会发现，它最多支持二级菜单，而且一二级菜单的 HTML 结构是彻底一致的，这里为接下来组件一章埋下了伏笔。不过这一章咱们姑且放过它。

而后把右上角的用户身份部分也改为 Vue 模板：

<li class="nav-item dropdown me"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="username">{{username}}</span> <span class="caret"></span> </a> <div class="dropdown-menu" role="menu"> <a href="#/my/profile/" class="dropdown-item"><i class="fa fa-user fa-fw"></i> 个人帐户</a></li> <a href="#/my/finance/" class="dropdown-item"><i class="fa fa-yen fa-fw"></i> 财务管理</a> <a href="page/my/changepwd.html" class="popup" title="修改密码" data-confirm="保存" data-cancel="取消"><i class="fa fa-fw fa-lock"></i> 修改密码</a> <a href="#/my/settings"><i class="fa fa-cog fa-fw"></i> 设置</a> <div class="divider"></div> <a href="#/user/logout"><i class="fa fa-fw fa-sign-out"></i> 退出</a> </ul> </li>

模板告一段落。不管使用何种框架，保持对与 DOM 的解耦是很重要的。作的好的话，这个时候就能提现出效果了，此时咱们直接用一个大的 Vue 实例去控制整个后台 UI，与原先的框架进行双轨制管理。

// 原先的框架 var me = new tp.model.DIYUser() var profile = new tp.view.Me({ el: '.me', model: me }); var body = new tp.view.Body({ el: 'body', model: me }); var sidebarEditor = new tp.view.SidebarEditor({ el: '#navbar-side', model: me }); var ranger = new tp.component.DateRanger({ el: '.date-range' }); var search = new tp.view.Search({ el: '.global-search' }); // 新的框架 let app = new App({ el: 'body' });

由于用户有关的部分都准备交给 Vue 处理，因此上面的 profile 和 sidebarEditor 都要干掉。还好里面都是处理界面逻辑的代码，干掉它们没什么大碍，最后就变成：

// 原先的框架 var body = new tp.view.Body({ el: 'body', model: me }); var ranger = new tp.component.DateRanger({ el: '.date-range' }); var search = new tp.view.Search({ el: '.global-search' }); // 新的框架 let app = new App({ el: 'body', data: { sidebar: null, me: null } });

使用 Vuex 保存用户状态

还记得我前面对比 React 时说过的话么？React 生态虽然丰富，但缺乏官方指定库，因此质量良莠不齐。Vue 在这方面作的比较好，官方有几个推荐产品组成全家桶。

虽然如今的改造东一榔头西一棒槌，但放长远来看，这套系统必定会总体迁移到 Vue，而且实现组件化。因此，为了能在组件间共享状态，我决定从如今开始就使用 Vuex。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

若是你想了解 Vuex，建议去看官方文档，很是短小精悍，不超过1个小时你就能看完。

上一章里，我为老框架创建了一个接班人，准备逐步把工做交给它。接下来，我就会用 Vuex 构建一个全局数据中心，方便未来在系统内部存取数据。此次为了扩展考虑，我使用了 Vuex 的模块概念，即把不一样的数据放在不一样的模块里，方便管理。另外，从如今起，我会肆无忌惮地使用新技术，使用 Vue 开发的功能会经过 Webpack 打包到 JS 里（不包含原先的内容），加载到页面中。

// index.js import Vue from 'vue'; import Vuex from 'vuex'; import { API } from 'config'; import user from './user/'; import mutations from './mutations'; import actions from './actions'; Vue.use(Vuex); export default { state: { API: API, _token: '', }, mutations, modules: { user } }; // user.js import mutations from './mutations'; export default { state: { id: 0, name: '', fullname: '', email: '', sidebar: null }, mutations }

而后回到入口 JS，在里面添加用户身份检查：

import base from './store/'; let store = new Vuex.Store(base); let app = new Vue({ el: 'body', store }); let headers = new Headers(); headers.append('Accept', 'application/json'); fetch(API + 'login', { mode: 'cors', headers: headers, credentials: 'include' }) .then( response => { return [response.status, response.json()]; }) .then( (status, json) => { if (status === 401) { router.push('/login'); return; } store.commit(UserMutations.SET_USER_INFO, json.user); }) .catch( err => { router.push('/error/500'); });

这里我用了 Fetch API，从服务器请求用户身份。若是服务器返回 401 错误，就说明用户没有登陆，而后就经过路由跳转到登陆界面；不然的话，把用户信息记入 store 完成操做。

全局登陆状态检查

用户登陆状态也是后台产品比较关心的内容。由于后台有很严格的权限控制，不一样权限的人看到的内容是不一样的，甚至连菜单都是不一样的。用户登陆状态都保存在服务器，前端是不知道的，因此，极可能用户登陆已经超时了，可是前端框架仍然傻乎乎的向后台发起请求。这个时候，后台必须能从服务器端返回的信息里看到端倪，并作出正确的处理，好比跳转到登陆页。

之前用 jQuery，咱们能够用全局的响应函数 .ajaxError() 来处理。现在咱们正在作去 jQuery 化，因此这个工做也同样移交给 Vue 一族来处理。

Vue 生态里有个远程资源组件，叫作 Vue Resouce，能够用来取代 jQuery.ajax。因而我把它也加入项目中，而且利用它的中间件来作全局登陆状态检查：

Vue.use(VueResource);
Vue.http.interceptors.push( (request, next) => {
  // 全部的头 request.headers.set('Accept', 'application/json'); request.credentials = true; next( response => { if (response.status === 401 || (!response.ok && response.status === 0)) { router.push({ name: 'Login', params: { fetch: true, redirectTo: location.hash.substr(1) } }); } }); });

不过须要注意的是，只有经过 Vue-Resource 发起的请求才会被中间件过滤，因此其它由 jQuery 发起的请求仍然继续用之前的策略处理。

第三步：组件化

组件是 Vue 最重要的特性。简单来讲，任何 Vue 实例均可以视做组件；一个组件能够由多个组件组合而成；因此一个应用，不管规模，均可以视做若干个组件组成的总体。

为了接下来的内容，我建议你先读完 Vue 组件的文档。

组件的目的是提升代码的复用性。举个例子，前面咱们实现了 Modal 组件的 Vue 化，彷佛蛮简单的，效果还不错。可是当另外一个页面当中也须要这样的 Modal，麻烦就来了。彻底复制一遍固然能够，但这明显不是最好的作法。

这种时候，咱们就该把它作成组件。由于整个产品框架仍然处于混合运行的状态，因此单文件组件暂时还不容易接入，咱们仍是选择全局组件吧。

Vue.component('my-modal', { template: '', props: { isShow: { type: Boolean, default: false } }, data() { return { isShowClass: false, result: null, message: '' } } methods: { submit(event) { // 提交 }, show() { this.isShow = true; }, hide() { this.isShow = false; }, close() { this.isShowClass = false; } }, watch: { isShow(value) { setTimeout(() => { this.nextShow = value; }, 50); } } })

为防止你没有仔细阅读文档，我仍是把一些要点提一下。首先，注册全局组件要用 Vue.component 方法，注册出来的组件经过在 HTML 里写标签来使用，如：

<my-modal> </my-modal>

其次，组件的 data 属性必须是一个函数，而后返回一个包含要用到数据的对象。

最后，任何组件在用的时候都会变成“子组件”，因此这个时候向它传值必须经过 prop 属性。在咱们的例子中，负责控制 Modal 显示/隐藏的属性是 isShow，原先经过 modal.isShow = true; 便可将它弹出。现在咱们须要把它暴露给父组件，因此放在 props 里。

接下来，我还要调整一下它的模板。既然是组件，必须考虑复用，因此内部表单确定不能写死了。Vue 给咱们提供了 Slot（插槽）做为插入外部内容的手段，因此模板能够改为这样：

<!-- 前面不变 --> <div class="modal-body"> <slot @submit.prevent="submit"></slot> </div> <!-- 后面也不变 -->

模板能够放在任何地方，好比统一堆在 index.html 里面，用 <script type="text/x-template"></script> 包裹；也能够写在组件的 template 属性里，只要能访问到，都不是问题。

这样，咱们就能够在别的地方使用这个 Modal 组件了：

<div class="随便什么容器" id="some-vue-app"> <my-modal @saved="onModalSaved"> <form action="/api/some/" method="post"> <!-- 表单内容 --> </form> </my-modal> </div>

不过使用 Vue 组件的必定是其它 Vue 实例，若是要混合使用的话，也要用 Vue 实例做为中介。

单文件组件

单文件组件是更好的选择。它更容易被复用、被修改、被测试。

不过单文件组件更依赖对整个前端工具体系的掌握，你必须会用 Webpack，会配置各类 loader，对于一些初学者可能会比较困难。因此我建议不要着急上单文件组件，干什么事都应该按部就班，先把 Vue 用好用熟练，解决掉平常用到的问题，再找机会切换到单文件模式就好。

以前的工做固然不是白费的，Vue 的单文件组件也能够正常使用 import、export，因此以前写好的组件能够直接放进来。

好比咱们的 Modal，完成以后，未来若是要誊到单文件组件中，只须要在里面引用就好：

<template> .... </template> <script src="./my-modal.js"></script>

第四步：路由

改造路由自己其实并不困难。真正的难点在于，以前的路由，不管是基于 Backbone.Router 仍是基于 Page.js，都是侦听 URL 变化，而后调用回调函数来处理。而 Vue 官方插件 Vue-Router，则是直接实例化页面组件。

这样致使咱们很难渐进式的迁移功能页，必须当心翼翼的把两个路由分开，好比 /new/path/to/feature/ 交给新路由，其它的交给老路由，等未来完全迁移重构完毕再把 new 去掉。

自己路由的写法直接看官方文档就行了，大约1个小时就能读完，这里就不在赘述。

第五步：使用其它 UI 框架

通过不懈的努力，后台项目的改造告一段落。大部分组件都被重构成基于 Vue，有些还被很好的重构成可复用的组件，用在其它项目中。现在，虽然用的仍是 Bootstrap，但已经能够把 jQuery 从依赖中拿掉了。

整个系统基于 Vue 全家桶开发，使用 Webpack + Babel 管理，既时髦又高效。咱们对 Vue 开发也很熟悉了，平常开发不在话下。

不过从这个时刻起，咱们也不须要像之前那样谨小慎微，土啦吧唧的以“够用就行”的标准来写组件。项目重构完成以后，由于 Vue 单文件组件出色的解耦特性，引用外部组件库也是个不错的选择。并且从提高技术的角度，我仍是强烈推荐你们用一用别人的框架。

我这方面的经验也很少，就推荐两个吧：

Element UI 由饿了么团队开发维护的组件库。
iView 一套基于 Vue.js 的高质量 UI 组件库。

推荐这两款组件库的缘由除了它们自己质量不错，都是国人开发，中文文档丰富也是重要缘由。

总结

其实，动相似的脑筋的人，我确定不是第一个。好比 VueStrap 和 VueStrap 这两个项目，可是它代码写的实在太差，功能也不完备，用起来各类不爽，因此我干脆重写了一些。

Vue 比较让我欣赏的一点也是如此：实现组件库很简单，以为别的库不合适，本身搞也很快。

甚至我认为这才是正道：大部分基础组件，能够依赖 CSS 来实现，又简单又可靠；部分复杂的功能，本身实现有针对性而且能全把握的大型组件。这也是我写做这篇文章的缘由。