Vue2实践揭秘

本书以Vue2的实践应用为根基，从实际示例入手，详细讲解Vue2的基础理论应用及高级组件开发，通过简明易懂的实例代码，生动地让读者快速、全方位地掌握Vue2的各种入门技巧以及一些在实际项目中的宝贵经验。本书除了全面、细致地讲述Vue2的生态结构、实际编程技巧和一些从实践中得到的经验，还重点介绍如何以组件化编程思想为指导，以前端工程化方法为实现手段来实践Vue2，通过组件的单元测试和E2E测试来保证工程质量。

十余年软件开发、项目管理、团队建设经验。长年致力于互联网技术应用与大数据应用方面的研究与开发工作。曾任多家软件公司的高级软件工程师、项目经理、首席架构师、技术总监等职。

曾任广州市优晟网络股份有限公司技术总监，从事微信开发以及大数据在电商与互联网传播应用方面的应用。目前主要从事软件工程、系统架构、语言基础及IoT、大数据与AI在商业应用方面的研究与实践。

学会Vue不难，学会怎么用才难！本书没有罗列Vue的语法和指令，而是从实战出发，以组件化编程思想为指导，以前端工程化方法为手段来实践Vue2！

本书先从一个实际示例入手，通过简明易懂的实例代码，生动地讲解Vue2的基础理论应用和高级组件开发，还分享了作者在一些实际项目中汲取的宝贵经验。

写作背景

我从事软件开发至今接近18年了，在我进入这个行业之前，只有软件工程师与硬件工程师之分，并没有什么前端工程师或者后端工程师之说。前端后端都得懂，否则根本找不到工作。当然，现在对于前端工程师与后端工程师的划分是由于软件技术发展实在太快了，两个方向已经发展成各自独立的体系，前端开发由于技术的革新、移动端的崛起，其地位显得越来越重要。

我是从jQuery 1.0开始真正地接受前端工程化开发概念的，也是从那时对 JavaScript产生了一发而不可收的兴趣。因为前端工程化能使项目的体系结构更加合理，那些在后端实现起来极为繁杂的交互操作以一种最“轻巧”的方式给取代了。当第一次遇到Angular之时我更是兴奋不已，它简直就是为传统工程师或者说是后端工程师配备的最强大的前端武器！虽然Angular的入门曲线非常陡峭，很多内容都极为晦涩难懂，但它与jQuery一样，可以算得上是前端架构发展史上的一座丰碑。

软件领域中后者永远具有更大的吸引力，在前端开发领域，React可以说是继Angular之后又一震撼整个前端开发圈子的重磅炸弹。与Angular相比，它大大降低了学习的成本，同时拥有极高效的运行效能，使之一下子盖过了Angular的风头。Angular与React两套前端框架的崛起也掀起了整个前端开发圈的一股革命，实际上我们都清楚这是Google与Facebook之间对开发者的一种争夺手段。对于一直从事实战领域应用的开发者而言，虽然有更多的选择是好事，但“谁更好用？”，“谁更强大？”这类选择困难症也将伴随而来。

Angular与React各有优劣，很难从综合性上来评判谁比谁更好，加上Angular2的诞生，使得我们更难以从中选择最合心意的框架了，可能最熟悉的就自然成为最好的了吧。

2016年我和我的团队所从事的Web项目由于需要有大量界面交互功能，因此我引入了Angular2 + Flask的搭配方式作为项目的基础语言架构。然而，我的团队大多数是由从事多年后端开发和系统开发的工程师所组成，他们对当下前沿的前端技术涉猎并不算深入，我只能不断地进行内部培训以快速提升团队的前端开发实力。Angular2一直处于Beta状态，而且相关的官方开发文档一直缺失，开发与测试工具的发展也相对滞后，在实际使用过程中，TypeScript这个将弱类型化的JS强制变成强类型语言的怪胎在不断地给我们制造麻烦，除了让团队接受Angular2对Angular的优化模式，还得不断地在各种大坑中求生存，这毫无疑问对于我和我的团队是一种极大的挑战。当时我非常担心由于选择了Angular2而导致项目失败，中途曾想过用React对之加以取代。但从实际出发，这只是一种换汤不换药的方案而已，直至我们偶然间遇到了Vue，Vue可以说给予我们项目生的希望！选中了Vue是因为我和我的团队只是付出了极小的代价，甚至可以说是毫无障碍地将Angular2上开发的代码切换到Vue上面来，Vue的开发工具链虽说没有Angular.js完备，但有vue-cli的辅助，也基本能应付项目开发的需要，架构理论上几乎就是对Angular.js的简化。更吸引我们的是，这是一个由我们中国人开发的前端框架！而且适合我们项目使用的社区资源也非常丰富，性能、工具链、学习曲线、极小的运行库这些优点一下就完全弥补了Angular的不足，也成为了我们项目最后能守住的最坚实的防线。

编撰此书出于一次巧合，我们在升级到Vue2之后我一直想找一本能系统化、全面地讲述Vue2开发的书籍作为我团队的培训教材，但很可惜一直无法找到。出于一时的心血来潮，突然间想将我们在实践中应用Vue2的一些技巧和方法记录下来编撰成书，此时也得到了本书的策划编辑陈晓猛先生给予我的鼓励与支持才得以成书。

此书从构思到成书用了接近4个月，实际上花在编撰上的时间估计也只是一个月左右，其他的时间都用在了准备素材与写代码上。本书中的素材都取自我参与过的项目，在此过程中我对Vue2的实践应用也有了很大的提高与深化。期望此书能为正在奋斗于前端开发工作的同行们带来帮助，同时也作为我对Vue团队的一种支持。Vue是一款能与世界级的Angular与React比肩的前端框架，更重要的是它是由我们中国人“智造”的！

内容介绍

本书以Vue2的理论为中心，以实战示例为基础，通过示例应用展开覆盖Vue的各个理论知识点。本书从实践应用出发，对Vue官方未曾进行详尽说明甚至不曾提及的实用内容进行揭秘，试图使此书能成为你在Vue前端工程化开发实战中的参考手册。本书主要从多个示例由浅入深地讲述Vue的使用知识，除此之外，还重点介绍了Vue工程化开发中必备的源码库、第三方开发工具以及如何对Vue的各种模块进行全方位的测试。

第1章 从一个经典的“待办事项”（TODOs）示例入手，从零开始介绍Vue的入门知识，包括插值、数据绑定、属性与样式绑定和组件的基本概念与用法。

第2章 讲述如何为Vue建立一个真实的工程化开发的环境，以及工程化环境下第三方工具的基本使用与配置，其中包括：vue-cli、webpack、Karma、Phantom、Mocha、Sinon、Chai和Nightwatch。

第3章 介绍Vue的路由机制和Vue生态系统中最重要的一个成员——vue-router 的基本使用方法。

第4章 通过手机书店示例来介绍组件化理论与Vue组件的设计与实现的具体方法，包括抽象组件的基本方法，如何用Vue对组件进行封装，如何从界面中提取公共的数据接口，如何在没有实现服务端的情况下运行Vue程序以及怎样创建复杂的复合型组件。

第5章 全方位地讲述Vue的测试与调试过程中使用到技术与工具，包括Mocha的使用方法，如何为组件编写单元测试，如何在运行期和单元测试中进行调试，如何进行端对端测试。

第6章 通过一个非常普遍且实用的图书管理示例讲述Vue在实现一个具有复杂操作的界面时所采用的技术知识点，以及Vue组件的高级用法。例如视图的排序、分页、查找，多行删除的设计与实现，通过表单处理图书数据的添加、编辑和数据验证，如何用组件化的设计方法封装Vue组件以实现最大限度的组件重用。

第7章 介绍Vue生态结构中针对规模庞大的前端程序进行状态管理的利器Vuex，通过实例对Vuex的应用原则和结构组成进行一一剖析，讲述如何将各种本来混乱的组件状态通过Vuex来将其进行分离，每个部分应该如何设计与编码，如何进行测试，最终使Vue前端工程架构变得更为合理。

首先，感谢电子工业出版社博文视点公司的陈晓猛编辑，是您鼓励我将本书付诸成册，并在我写作过程中审阅了大量稿件，给予我很多指导和帮助。感谢工作在幕后的电子工业出版社评审团队对于本书在校对、排版、审核、封面设计、错误改进方面所给予的帮助，使本书得以顺利出版发行。其次，感谢在我十几年求学生涯中教育过我的所有老师，是你们将知识和学习方法传递给了我。感谢我曾经工作过的公司和单位，感谢和我一起共事过的同事和战友，你们的优秀一直是我追逐的目标，你们所给予的压力正是我不断改进自己的动力。

感谢我的父母和儿子。由于撰写本书，牺牲了很多陪伴家人的时间。感谢你们对我工作的理解和支持。

2017年2月16日梁睿坤于广州

第1章 例说Vue．js
1．1 插值
1．2 数据绑定
1．3 样式绑定
1．4 过滤器
第2章 工程化的Vue．js开发
2．1 脚手架vue-cli
2．2 深入vue-cli的工程模板
2．2．1 webpack-simple模板
2．2．2 webpack模板
2．2．3 构建工具
2．3 Vue工程的webpack配置与基本用法
2．3．1 webpack的特点
2．3．2 基本用法
2．3．3 用别名取代路径引用
2．3．4 配置多入口程序
2．4 基于Karma+Phantom+Mocha+Sinon+Chai的单元测试环境
2．5 基于Nightwatch的端到端测试环境
第3章 路由与页面间导航
3．1 vue-router
3．2 路由的模式
3．3 路由与导航
3．4 导航状态样式
3．5 History的控制
3．6 关于Fallback
3．7 小结
第4章 页面的区块化与组件的封装
4．1 页面逻辑的实现
4．2 封装可重用组件
4．3 自定义事件
4．4 数据接口的分析与提取
4．5 从服务端获取数据
4．6 创建复合型的模板组件
4．7 数据模拟
4．8 小结
4．9 扩展阅读：Vue组件的继承――mixin
第5章 Vue的测试与调试技术
5．1 Mocha入门
5．2 组件的单元测试方法
5．3 单元测试中的仿真技术
5．3．1 调用侦测（Spies）
5．3．2 Sinon的断言扩展
5．3．3 存根（stub）
5．3．4 接口仿真（Mocks）
5．3．5 后端服务仿真
5．4 调试
5．5 Nightwatch入门
5．5．1 编写端到端测试
5．5．2 钩子函数与异步测试
5．5．3 全局模块与Nightwatch的调试
5．5．4 Page Objects模式
第6章 视图与表单的处理
6．1 为Vue2集成UIkit
6．2 表格视图的实现
6．2．1 实时数据筛选
6．2．2 多行数据的选择
6．2．3 排序的实现
6．3 单一职责原则与高级组件开发方法
6．3．1 搜索区的组件化
6．3．2 母板组件
6．3．3 重构模态对话框组件
6．3．4 高级组件与Render方法
6．3．5 UIkit按钮
6．3．6 通用表格组件
6．4 表单的设计与实现
6．4．1 计算属性的双向绑定
6．4．2 富文本编辑器组件的实现
6．4．3 实现嵌套式容器组件
6．4．4 表单的验证
6．5 集成服务端的CRUD Restful API
6．6 HTTP拦截器inteceptor
6．7 开发服务器的定制
第7章 Vuex状态管理
7．1 Vuex的基本结构
7．2 data的替代者――State和Getter
7．3 测试Getter
7．4 Action――操作的执行者
7．5 测试Action
7．6 只用Mutation修改状态
7．7 测试Mutations
7．8 子状态和模块
7．9 用服务分离外部操作
附录A Chai断言参考
附录B Vee-Validate验证规则参考