作者：梁睿坤
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
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前端工程架构变得更为合理。本书相关源码
● 本书源码汇总——https://github.com/DotNetAge/vue-in-action；
● vue-todos——第1章例说Vue.js的示例源码https://github.com/DotNetAge/vue-todos；
● vue-shop——第3章路由与页面间导航的示例源码https://github.com/DotNetAge/vue-shop；
● vue-curd——第6章视图与表单的处理的示例源码https://github.com/DotNetAge/vue-curd；
● V-UIkit——UIkit for Vue2的组件库，构思源于第4章组件化的设计与实现方法的内容https://dotnetage.github.io/vue-ui/；
● vue-nvd3——基于NVD3开发的Vue2的组件库https://github.com/DotNetAge/vue-nvd3；
● vue-easy-pie-chart——基于easy pie chart开发的环状图组件库https://github.com/DotNetAge/vue-easy-pie-chart。勘误和交流
本书如有勘误，会在https://github.com/DotNetAge/vue-in-action上发布。由于笔者能力有限，时间仓促，书中难免有错漏，欢迎读者批评指正。读者也可以到博文视点官网的本书页面进行交流（www.broadview.com.cn/31068）。注册成为博文视点社区用户，可享受以下服务：
● 下载资源：本书所提供的示例代码及资源文件均可在【下载资源】处下载。
● 提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
● 与我交流：在页面下方【读者评论】处留下您的疑问或观点，与我和其他读者一同交流。
● 页面入口：
您也可以直接联系我：
● 博客园：http://www.cnblogs.com/ray-liang
● 简书：http://www.jianshu.com/u/5c81d3d72b56
● 邮箱：csharp2002@hotmail.com
● 微博：广州亚睿
● GitHub：https://github.com/dotnetage致谢
首先，感谢电子工业出版社博文视点公司的陈晓猛编辑，是您鼓励我将本书付诸成册，并在我写作过程中审阅了大量稿件，给予我很多指导和帮助。感谢工作在幕后的电子工业出版社评审团队对于本书在校对、排版、审核、封面设计、错误改进方面所给予的帮助，使本书得以顺利出版发行。其次，感谢在我十几年求学生涯中教育过我的所有老师，是你们将知识和学习方法传递给了我。感谢我曾经工作过的公司和单位，感谢和我一起共事过的同事和战友，你们的优秀一直是我追逐的目标，你们所给予的压力正是我不断改进自己的动力。
感谢我的父母和儿子。由于撰写本书，牺牲了很多陪伴家人的时间。感谢你们对我工作的理解和支持。2017年2月16日梁睿坤于广州第1章例说Vue.js
本章将通过极具代表性的Todo的示例作为引领读者进入Vue.js大门的引子。我会以实践为第一出发点，从零开始一步一步地构造一个单页式的Todo应用，在这个过程中会将Vue.js相关的知识点融入其中，在实际应用中展现这个“小”而“强”的界面框架。
我们先来看看最终希望构造出一个什么样的App：
Vue.js与Angular2和React相比，让我感觉最舒适的是它在一开始就为我们铺平了入门的道路，这就是它的脚手架vue-cli。因为它的存在，省去了手工配置开发环境、运行环境和测试环境的步骤，开发者可以直接步入Vue.js开发的殿堂。然而，现在我并不打算详细地介绍这个脚手架工具，先让我们一起从使用体验来感性地认识它，在后面的章节中我会详细地介绍这个工具。
在开始动手之前，必须先得在机器上安装好npm，然后输入以下指令将vue-cli安装到机器的全局环境中： $ npm i vue-cli -g
然后，我们就可以开始建立工程了，键入以下的指令： $ vue init webpack-simple vue-todos
此时控制台会提出一些关于这个新建项目的基本问题，直接“回车”跳过就行了。然后进入vue-todo目录，安装脚手架项目的基本支持包： $ npm i
安装完支持包后键入以下指令就可以运行一个由脚手架构建的基本Vue.js程序了： $ npm run dev
是不是很简单？进入代码中看看vue-cli到底为我们构造了一个什么样的代码结构： ├── README.md ├── index.html # 默认启动页面 ├── package.json # npm 包配置文件 ├── src │ ├── App.vue # 启动组件 │ ├── assets │ │ └── logo.png │ └── main.js # Vue 实例启动入口 └── webpack.config.js # webpack 配置文件
Vue2与Vue1.x相比有了很大的区别，从最小化的运行程序开始了解Vue是一种绝佳的途径，先从main.js文件入手： import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })
这里就运用了Vue2新增的特色Render方法，如果你曾用过React，是不是有一种似曾相识之感？确实，Vue2甚至连渲染机制都与React一样了。为了得到更好的运行速度，Vue2也采用了Virtual DOM。如果你还没有接触过Virtual DOM，并不要紧，现在只需要知道它是一种比浏览器原生的DOM具有更好性能的虚拟组件模型就行了，我们会在稍后的章节中再来讨论它。
我们需要知道的是，通过import将一个Vue.js的组件文件引入，并创建一个Vue对象的实例，在Vue实例中用Render方法来绘制这个Vue组件（App）就完成了初始化。
然后，将Vue实例绑定到一个页面上，真实存在的元素App Vue程序就引导成功了。
打开index.html文件就能看到Vue实例与页面的对应关系：
也就是说，一个Vue实例必须与一个页面元素绑定。Vue实例一般用作Vue的全局配置来使用，例如向实例安装路由、资源插件，配置应用于全局的自定义过滤器、自定义指令等。在本章示例中，我们只需要知道它的作用就可以了。
我们需要了解的是App.vue这个文件，*.vue是Vue.js特有的文件格式，表示的就是一个Vue组件，它也是Vue.js的最大特色，被称为单页式组件。“*.vue”文件可以同时承载“视图模板”、“样式定义”和组件代码，它使得组件的文件组织更加清晰与统一。
Vue.js的组件系统提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这一点，几乎任意类型应用的界面都可以抽象为一个组件树：
Vue2具有很高的兼容性，我们也可以用“.js”文件来单纯地定义组件的逻辑，甚至可以使用React的JSX格式的组件（需要babel-plugin-transform-vue-jsx支持）。
脚手架为我们创建的这个App组件内加入了不少介绍性的文字，将这个文件“净化”后就可以得到一个最简单的Vue组件定义模板：
由以上的代码我们可以了解到，单页组件由以下三个部分组成：
● ——视图模板；
●
从Vue2开始，组件模板必须且只能有一个顶层元素，如果在组件模块内设置多个顶层元素将会引发编译异常。
请注意，在上述代码中template属性是V，也就是视图，title属性是M，也就是模型，这个概念是必须要了解的。1.2 数据绑定
我们需要一个稍微复杂一点的数据模型来表述Todo，它的结构应该是这样的： { value: '事项1', // 待办事项的文字内容 done: false // 标记该事项是否已完成 }
由于是多个事项，那么这个数据模型应该是一个数组，为了能先显示这些待办事项，我们需要先设定一些样本数据。在Vue实例定义中的data属性中加入以下代码： export default { data () { return { title: 'vue-todos', todos: [ { value: "阅读一本关于前端开发的书", done: false }, { value: "补充范例代码", done: true }, { value: "写心得", done: false } ] } } }
初学者可能会问data有什么作用？我们可以将Vue实例定义看作一个类的定义，data相当于这个类的内部字段属性的定义区域。在Vue实例内的其他地方可以直接用this引用data内定义的任何属性，比如this.title就是引用了data.title。
我们要显示todos的数据就需要使用Vue模板的一个最常用的v-for指令标记，它可以用于枚举一个数组并将对象渲染成一个列表。这个指令使用与JS类似的语法对items进行枚举，形式为item in items，items是数据数组，item是当前数组元素的别名：
它的输出结果如下所示。
如果我们要输出待办事项的序号，可以用v-for中隐藏的一个index值来进行输出，具体用法如下：
这个用法有点像Python的元组引用方式，只要用括号括住引用参数，最后一个值就是循环的索引。索引是由0开始计数的，而我们要输出的序号应该从1开始，正好我们使用了一个JavaScript的表达式插值来输出一个index+1的从1开始计数的序号。
这里除了用插值绑定，还使用了属性绑定语法，就是上面的id="index"，这样的写法是一种缩写，下文中会有解释，意思是将index的值输出到DOM的id属性上。如果index=1，那么输出结果就是id="1"，如果没有在id前面加上“:”，那么Vue就会认为我们正在为id属性赋予一个字符串。
完成这一步，我们打开终端输入： $ npm run dev
npm将自动打开流浏览器并显示以下的结果：
v-for不单单可以循环渲染数组，还可以渲染对象属性，例如：
- {{ value }}
输出
● "Ray"
● "Liang"小结
对于从来没有接触过Angular和Vue的初学者，可能对上述的代码感到疑惑，为什么我们的代码内没有任何一个地方操作DOM并且将data内的变量设置到DOM上面呢？
首先，在Vue的代码中直接操作DOM是不被推荐的，如果你之前是jQuery的开发者，这一点一定要牢记；其次，DOM是被Vue直接托管的，所有“绑定”到DOM上的变量一旦发生变化，DOM所对应的属性就会被Vue自动重绘而不需要像jQuery那样通过编码来显式地操作，这才是绑定的意义所在。1.3 样式绑定
没有样式的输出结果样子很丑，此时我们就需要用CSS来美化我们的App。我个人并不推荐直接使用CSS语法来编写样式表，因为纯CSS的代码量很大，而且需要不断地重复，我很讨厌重复而且对DRY（Don't Repeat Yourself）有一种偏执。由于CSS总是充满各种不得不重复的写法，所以我更愿意使用less，以下是安装webpack支持less编译的包的方法： $ npm i less style-loader css-loader less-loader -D
安装完成后在webpack.config.js的modules设置内加入以下的配置： module : { rules: [ // ...省略 { test: /\.less$/, loader: "style!css!less" } ] }
在/assets/中添加一个todos.less文件，并在App.vue的组件定义内引入less样式表： import './assets/todos.less' export default { // ...省略 }
使用import将样式表直接导入到代码的效果是：webpack的less-loader会生成一些代码，在页面运行的时候将编译后的less代码生成到
前文我们只提到如何将data内定义的值以文本插值的方式输出到页面，并没有介绍如何将值“绑定”到属性内。样式的绑定和属性的绑定方式是一样的，我们这里就将done==true的待办事项
Vue的属性绑定语法是通过v-bind实现的，完整的写法是这样：
但v-bind可以采用缩写方式“:”表示，采用完整写法又将出现各种重复，所以建议还是直接使用缩写方式，这样会更直观。
由此可见，Vue的属性绑定语法是attribute="expression"，attribute就是元素接收的属性值（既可以是原生的也可以是自定义的），expression则是在Vue组件内由data或props内定义的对象属性，又或是一个合法的表达式。
要谨记一点：如果在元素属性中不加上“:”，Vue认为是向这个属性赋上字符串值而不是Vue组件上定义的属性引用！
上例中:class="{'checked': todo.done}"的意思是：当todo.done为true时，向
以下是应用样式绑定后的输出效果：小结
这里推荐一个简单的记忆方法来学习Vue的样式绑定，无论绑定的是样式类还是样式属性，:class和:style表达式内一定是一个JSON对象。
● :class的JSON对象的值一定是布尔型的，true表示加上样式，false表示移除样式类。
● :style的JSON对象则像是一个样式配置项，key声明属性名，value则是样式属性的具体值。1.4 过滤器
我们在待办事项的右侧增加一个时间字段created，并用
查看输出结果：
很明显，时间的输出并不是我们想要的结果，这里输出的是一个整数，因为将Date对象直接输出的话，JavaScript引擎会将其时间戳作为值输出，所以我们需要对这个时间戳来一个漂亮的格式化。
此时我们可以用一个很出名的时间格式化专用的包——moment.js，先安装moment.js： $ npm i moment -S
Vue.js用“过滤器”进行模板格式化，过滤器实质上是一个只带单一输入参数的函数，在Vue2中已经将原有的内置过滤器移除了，甚至将一些相关的特色功能也移除了，例如双向过滤器。官方的说法是“计算方法”会比使用“过滤器”更明确，代码更容易读。我认为这有点矫枉过正，过滤器并不是Vue和Angular这类前端框架所独有的，在很多的服务端视图框架中也是一种很常见的用法。过滤器有用的地方是可以以管道方式进行传递调用。在此，对日期的格式化我还是倾向于使用过滤器的方式，在Vue组件中加入自定义过滤器非常简单，只要在filters属性内加入方法定义就可以在模块上使用了。
首先，我们要引入moment，并设定moment的区域为中国： import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn')
然后加入一个date的过滤器： export default { // 省略... filters: { date(val) { return moment(val).calendar() } } }
最后在模板上应用这个过滤器：
我们可以看到浏览器的显示结果将变为下图的方式：
在所有的过滤器中是没有this引用的，过滤器内的this是一个undefined的值，所以不要在过滤器内尝试引用组件实例内的变量或方法，否则会引发空值引用的异常。第2章工程化的Vue.js开发
我们在上一章中只是用了一个非常简单的例子，尝试对Vue的一些基础概念进行大面积的了解，而这个例子也只能跑在开发环境中，它的运行需要有NPM和NPM上的各种依赖包，所以我们没有办法直接将它放到某个服务器上就能运行，而且它的质量不高。因为在开发过程中我们只是通过视觉主观地判断它“能运行”，其中是否潜藏着缺陷我们并不可知。
我认识很多年轻的程序员，其中不乏前端和后端的开发能手，也有入行一两年的新手，我很喜欢与他们交流，因为他们才是现今的开发主力，他们有激情和各种标新立异的想法。在各种的交流活动中我却发现，大多数的前端程序员并不太喜欢谈论测试与部署的话题，多数人认为测试很重要但没有时间写，因为项目时间太短了，某些人认为前端程序的部署不过就是个文件复制的过程，只是将本机上的代码复制到服务器上行了，让运维人员做就够了，没有必要浪费本就不多的开发时间。
几年前，当jQuery还在大行其道之时，前端开发的工作只是负责美化页面样式，修改一些页面的布局，又或者使用一些jQuery插件来增强用户界面的交互能力以提升使用体验。可见，处在这种开发时代下的前端开发者可以说在团队中是没有什么地位的，即使有再强的前端开发能力，充其量也只是个打下手的角色。幸运的是，AngularJS的出现在短短几年间就掀起了一波疯狂的前端技术革命，直到今天这场革命仍然在如火如荼地进行，继而出现了各种形式的响应式编程框架，例如Polymer、Ember、Knockout、React。呈现着你方唱罢我方上台的格局，当然其中少不了本书的主角Vue。这波前端的革命浪潮将原本由后端技术所主导的交互页面开发大量地被前端化，前端开发人员的地位也随之水涨船高。能力越大责任越大，这种角色与职责的转化带来的是对前端开发体系、工具甚至是开发方法的一系列改变。在这样的背景下，怎么才能算是一名合格的前端工程师，怎样才能成为一名优秀的前端工程师而不会成为这场风风火火的前端革命中的牺牲者呢？Vue给了我们一个很好的选择。
选对了前端框架只是第一步，既然前端开发“抢夺”了大量本由后端处理的工作，那么就意味着我们在前端开发过程中要融入一些与后端类似的流程，这样才能真正地达至所谓的“前端开发工程化”。
除了开发，测试与部署可以说是我们在项目开发中的必经阶段，下图很好地诠释了这三者之间的关系。
前端开发与后端开发的不同之处是开放性，换句话说，前端开发具有极强的选择性，工具与开发框架的组合可以说是多得让人眼花缭乱不可胜数。这种开放性带来的多样性选择对于入门者而言无疑像面前横亘了一条深不见底的鸿沟。如果你曾参与过基于AngularJS的开发项目，那你必然会体验到搭建一个多人协作的开发、测试和部署环境如身陷泥潭般难以前行；当你进入到React项目也会有类似的感觉，不同的只是从工具的复杂性陷阱跳入了第三方依赖包所构建的陷阱。
Vue作为AngularJS和React的继承者和改良者，它不单单从编码的特色与开发框架本身的使用上进行大面积的改良与优化。而更实用之处也是它的优秀之处，在于它提供了一整套简化开发、测试与部署的方案。作为它的前端开发者，不再需要花大量的时间去学习理解框架的使用概念，以及耗费大量的精力去建立复杂的自动化环境。
在此我特意以一章的篇幅讲述Vue如何为我们建立开发、测试与部署的自动化环境，我们又将如何在它们的基础上有针对性地进行定制与改良。2.1 脚手架vue-cli
当我们使用Vue构建一个原型的时候，需要做的通常就是通过
试读结束[说明：试读内容隐藏了图片]