百度外卖优秀前端专家团队经验完全分享。本书配备特色线上读者圈增值服务,看书有问题,找得到作者。
Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为2016年社区*火的前端框架,越来越多的公司都在尝试用Vue来开发自己的项目。本书主要以项目维度,站在实战的角度,从项目的搭建,项目开发,到项目的优化,结合实际,多维度介绍了Vue.js。本书从实战场景出发,结合各种实用demo,结合开发环境构建,从无到有,剖析原理,全面介绍Vue2.0的实用技巧。后面几章重点讲解Vue内部实现机制,针对各种业务形态的支持以及网站调优方等等,是Vue技术体系追随者不可多得的实战宝典。
12年毕业于北京航空航天大学软件工程专业,先后就职于人人网、百度,现在在百度外卖担任高级前端工程师。拥有五年前端工程经验,对前端开发基础架构造型、技术应用、团队高效协作有自己独到的见解。热爱前端和开源,喜欢用平台化和工程化手段解决业务中的问题。
目 录
第1章 搭建开发环境 1
1.1 本地Node环境 1
1.1.1 Node.js 1
1.1.2 npm 7
1.1.3 yarn 12
1.1.4 npm vs yarn 17
1.2 ide相关配置 17
1.2.1 常用ide 17
1.2.2 Sublime text 17
1.2.3 Atom 20
1.2.4 WebStorm 22
1.2.5 VSCode 23
1.3 本章小结 27
第2章 从零搭建Vue工程 28
2.1 本地开发需要哪些工具 28
2.2 搭建Vue工程 29
2.2.1 Vue-cli 29
2.2.2 脚手架项目构成分析 30
2.3 webpack配置 32
2.3.1 webpack简介 32
2.3.2 webpack配置解析 33
第3章 API详解 45
3.1 全局变量 45
3.1.1 silent 45
3.1.2 optionMergeStrategies 45
3.1.3 devtools 46
3.1.4 errorHandler 48
3.1.5 ignoredElements 48
3.1.6 keyCodes 49
3.1.7 performance 49
3.1.8 productionTip 49
3.2 模板语法 50
3.3 指令 50
3.3.1 v-text 51
3.3.2 v-html 51
3.3.3 v-pre 51
3.3.4 v-cloak 52
3.3.5 v-once 53
3.3.6 v-if 54
3.3.7 v-else 54
3.3.8 v-else-if 55
3.3.9 v-show 55
3.3.10 v-for 56
3.3.11 v-bind 64
3.3.12 v-model 70
3.3.13 v-on 74
3.3.14 自定义指令 77
3.4 过滤器 79
3.5 计算属性 80
3.5.1 基础例子 80
3.5.2 计算属性vs Methods 81
3.5.3 计算属性缓存 81
3.5.4 Computed属性vs Watched属性 82
3.5.5 计算setter 83
3.6 观察者Watchers 84
3.7 组件的功能与使用 86
3.7.1 使用组件 86
3.7.2 组件开发 88
3.7.3 非Props属性 92
3.7.4 自定义事件 92
3.7.5 Slots内容分发 96
3.7.6 动态组件 99
3.7.7 组件的其他知识 100
3.8 继承与混合 104
3.8.1 Vue.extend 105
3.8.2 options里的extends 105
3.8.3 源码分析 105
3.8.4 合并策略 106
3.9 插件plugin 111
第4章 Vue组件库 115
4.1 Element 115
4.1.1 Element的设计 115
4.1.2 Element的UI 116
4.1.3 Element的优缺点 117
4.2 Mint UI 118
4.2.1 Mint UI的特性 118
4.2.2 Mint UI的优缺点 119
4.3 iView 119
4.3.1 iView简介 120
4.3.2 iView的优缺点 120
4.4 Vux 121
4.4.1 Vux简介 121
4.4.2 Vux优缺点 122
4.5 XCUI 122
4.5.1 XCUI简介 122
4.5.2 XCUI优缺点 123
第5章 官方周边库 124
5.1 Axios 124
5.1.1 功能 124
5.1.2 安装 124
5.1.3 Example 125
5.1.4 Axios API 126
5.1.5 请求配置 127
5.1.6 响应结构 130
5.1.7 配置的默认值/defaults 131
5.1.8 拦截器 132
5.1.9 错误处理 133
5.1.10 取消 134
5.1.11 Promises 135
5.1.12 TypeScript 135
5.2 Vuex的使用 135
5.2.1 State 135
5.2.2 Getters 137
5.2.3 Mutations & Actions 138
5.2.4 Modules 141
5.2.5 模块重用 145
5.3 Vue-router使用 146
5.3.1 安装 146
5.3.2 开始 146
5.3.3 动态路由匹配 147
5.3.4 编程式导航 151
5.3.5 命名路由 152
5.3.6 命名视图 153
5.3.7 重定向和别名 153
5.3.8 HTML5 History模式 154
5.3.9 后端配置例子 155
5.3.10 警告 155
5.3.11 导航钩子 156
5.3.12 过渡动效 159
5.3.13 数据获取 160
5.3.14 滚动行为 163
5.3.15 懒加载 164
第6章 Vue项目优化 166
6.1 状态过渡 166
6.1.1 过渡的概念 166
6.1.2 CSS过渡 166
6.1.3 Javascript钩子 167
6.2 Vue项目的自动化测试 170
6.2.1 unit tests 172
6.2.2 e2e测试 175
6.3 Typescript Support 179
6.3.1 Typescript 179
6.3.2 安装Typescript 180
6.3.3 Typescript和Vue结合 180
6.4 MPA 186
6.4.1 关于MPA的优劣势 187
6.4.2 如何实现MPA 187
6.5 Vue的异构 190
6.5.1 不属于异构的情况 191
6.5.2 通过封装成Vue组件的方式实现异构 192
6.5.3 通过directive的方式实现异构 194
6.5.4 循环嵌套Vue组件 197
6.6 服务端渲染 198
6.6.1 服务端渲染的概念 198
6.6.2 用Vue-ssr的意义 198
6.6.3 Vue-ssr的作用 198
6.6.4 Vue-ssr学习难度 198
6.6.5 技术栈 199
6.6.6 前后端数据策略 199
6.6.7 性能影响 199
6.6.8 安装 200
6.6.9 渲染一个Vue实例 200
6.6.10 一个例子 202
6.7 Vue的pre-render 204
第7章 原理解析 206
7.1 Virtual DOM原理 206
7.1.1 DOM 206
7.1.2 Virtual DOM算法 209
7.2 Vue精髓之响应式数据流 210
7.2.1 数据流演进史 210
7.2.2 Vue和React介绍 211
7.2.3 Vue的响应式数据流的优势 211
7.2.4 Object.defineProperty与订阅发布设计模式 213
7.2.5 Vue源码 214
7.2.6 Vue的render函数就是Watcher的expOrFn 218
7.3 Vuex2.0源码解析 219
7.3.1 Vuex的含义 219
7.3.2 源码分析 220
7.3.3 Vuex API分析 233
7.3.4 辅助函数 235
7.3.5 插件 239
7.3.6 一些函数的封装 242
7.4 Vue-router原理 244
7.4.1 Vue-router 244
7.4.2 Vue-router应用举例 244
7.4.3 Vue-router原理 245
第8章 进军WEEX 256
8.1 搭建WEEX基础环境 256
8.1.1 初始化:hello world 256
8.1.2 dotwe 257
8.2 分析首个WEEX工程代码 258
8.2.1 目录结构 258
8.2.2 通过serve起服务 258
8.2.3 webpack配置 259
8.2.4 页面开发 260
8.3 debug WEEX代码 260
8.3.1 web端调试 260
8.3.2 手机端调试 261
8.4 集成WEEX到已有应用 263
8.4.1 集成到Android 263
8.4.2 集成到iOS 268
8.5 使用WEEXpack构建移动应用 271
6.4 MPA
MPA(Multi-Page Application),多页面应用。我们通常在开发的时候都是单页面应用,即一个页面实例化一个Vue对象完成所有的页面逻辑。但是,有些应用场景里面需要切换到多页面应用,即一个模块,一个页面,一个Vue实例。多页面应用开发跟原始的多页面开发类似,不同功能在不同的页面里,跳转页面完成页面刷新加载内容。
关于MPA在Vue里有一些问题需要探讨,例如多页面的文件结构、公共资源、切换规则及优劣势等。
6.4.1 关于MPA的优劣势
说起MPA就不得不提到SPA(Single-Page Application),我们在开发中无非就是从这两个方向里选择,那么MPA相对于SPA有哪些优势?更加适用于哪些场景呢?
MPA的优势明显:
● 开发难度减小,相对于单页面应用,所有的逻辑关系都放在一个页面里,多页面开发将逻辑颗粒化,这样每个模块开发难度降低很多;
● 数据流更为简单,因为进行了颗粒化,所有的模块之间逻辑不存在数据共享,数据互相限制,因此数据流逻辑上更为简单;
● 不会因为业务复杂,某一个模块出现错误导致整个业务不能使用,而单页面会出现这样的问题。
MPA的劣势也很明显:
● 多页面切换会影响用户体验;
● 多页面基于一些规定的配置,很多的多页面应用都是基于webpack规则制定,这增加了开发成本;
● 多页面应用也会增加冗余代码。
6.4.2 如何实现MPA
接下来通过结合案例代码实现一个多页面应用,由于当前代码案例里是SPA,重构成MPA代价较大,而且可能会影响其他部分关联代码的问题,因此我们会通过介绍一个MPA案例来帮助大家理解MPA的实现机制。具体的项目地址:vue-cli-multi-page。
6.4.2.1 目录结构
首先观察一下目录结构:
序 言
在很长时间以内,前端开发的工作内容是为静态的HTML增加动态的效果,所以基于jQuery的Bootstrap非常流行。真正让前端开发产生变化的是2014和2015年Angular.js和React的崛起,这使得MV*模式变得流行,让前端渲染开始流行。MV*模式让前端开发的思维发生了一个翻天覆地的变化,让前端工作变得更有挑战,它不再是为后端开发者写HTML的模板,而是更多地关注在工程化、可维护性、数据流等方面。
“饿了么”大前端团队在2015年主要使用的是Angular.js 1.2版本,在使用其开发了外卖PC站、早餐业务移动站之后,我们体会到了Angular.js的一些痛点。主要的痛点是组件封装的不便、一些历史遗留的设计问题和性能问题,所以我们开始尝试一些新的解决方案。在2015年的下半年,Vue.js发布1.0之后,我们尝试使用Vue.js来完成一些业务的开发。当时Vue.js生态还不是很成熟,我们就边写业务边做了一些组件发布到了开源社区。
当初我们选用Vue.js 1.0的主要原因是团队比较熟悉Angular.js,在我看来Vue.js 1.0版本还只是Angular.js 1.x的改良版。但是在2016年初,Vue.js 2.0公开之后,我觉得Vue.js 2.0将会成为能与React竞争的现代前端框架,所以决定基于Vue.js为团队做一些基础设施建设。
我们团队先后开发了移动端和PC端的两套前端组件库:Mint UI和Element UI,并在开发完成之后发布到了开源社区,为Vue.js的社区活跃做出了一些贡献,也在开源社区取得了一些影响。截止目前,Element UI仍然是Vue.js社区中Star最多、最活跃、最成熟的组件库,我可以负责任地说,Element UI一直应用在我们的生产项目中。
回顾加入饿了么大前端以来的两年多里,推动团队选用Vue.js作为前端框架可能是我做的最明智的决定。当初放弃Angular.js选择Vue.js是个艰难的决策,幸运的是我们能在这段时间里与Vue.js社区共同成长。
如果你是初学者,想入门Vue.js,那么本书可以让你充分体会Vue.js的魅力;如果你想对Vue.js有更为深入的了解,本书对Virtual DOM和Vue Router的原理解析应该对你有所帮助。最后,本书涵盖了Vue.js 2.1、2.3的一些新特性,还对阿里巴巴的开源项目Weex进行了一定的讲解,这保证了本书具有较新的时效性。在细读了一遍后,我觉得这本书适合各个阶段的前端开发者,在此真诚地推荐给大家。
张 龙
饿了么高级研发经理&Element UI创始人
前 言
1. 前端框架的发展
写这本书之前,思考过一段时间,最后问题回归到Vue是什么?从哪来?到哪去?然后,想到了前端框架的发展,当然在这里不敢妄谈演进,只说一下本人对前端的认识过程。
本人是2008年接触前端开发的,那个时候中国公司极少数存在前端开发这个岗位,很多地方还叫网页开发,大部分还是从数据存储到页面展示一把抓。这个时期,以能将文本文档写html、css、js为大牛的标准,你知道的细节越多,意味着你越高深,当然这是学生阶段,大家都讲求一个装字。之后接触一些js框架,诸如prototype、mootools、jquery等是这个时代的主流,后来jquery因为它的易用,高效异军突起,占据主导;这个时代框架主要给大家解决的是兼容性的处理和代码的简化。
其次,随着电脑性能、浏览器支持及网速的不断攀升,前端页面越来越像一个桌面应用,各种交互功能需要在页面中实现,就产生了各种mv*的框架,如backbone、AngularJS等,它们要解决的问题也是很有针对性的,让界面、操作、数据分开,在复杂的交互中,找到一条不变的原则。
再次,随着Nodejs的兴起以及前端环境的进一步发展,前端模块化的概念得到广泛的发展,这段时间与上一段内容并非完全的分先后,有部分重叠;就本人而言,最后解除模块化,模块化的出现也是适应前端工程化进展的重要标志。从一个或者几个文件就能完成一个页面,到一个页面需要一个工程;这种变化也意味着前端进入了技术壁垒,从此,后端开发者(php,java)已经很难上手一个前端项目。
最后,mvvm框架模型概念火爆起来,react首先为大家熟知,并迅速传播火热,随后Vue以其灵活性高、开发效率高等进入大家视野,占得一席之地;是react好还是Vue更好,也成为人们津津乐道的话题,至于答案,我认为适合的就是最好的。
2. 本书面向的人群
本书前五章内容涉及基础开发环境的搭建和API的介绍及开发过程中遇到的问题,书中的代码是对Vue官方文档里样例的扩展,对于初步使用Vue的人群有很好的指导意义。后五章内容是实战的技巧及原理的剖析,适用对框架有一定经验、对原理有研究的人参考。
本书由长期从事Vue开发和研究的百度外卖研发团队撰写完成,充分结合实际,紧跟Vue.js最新特性,对Vue.js作为技术栈的架构有深入的理解,并在此基础上搭建了符合实际业务场景的整套技术栈,对于想重构已有工程的团队,也有很好的指导作用。
3. Vue适用的场景
大量的项目与实践表明,Vue可以适用于各个场景。我们的Vue用在H5运营后台、离线组件等各种业务形态中,最近所做的ssr也是以Vue为基础来做的。我所在的团队以业务为先,没有独立的基础技术部门,所有技术尝试都是直接作用于线上业务项目中,在进行过多次尝试改造后,慢慢形成了一种以Vue为主的架构体系,配合我们自己封装的构建工具fekey,组合成一套前端全栈解决方案;尤其在运营后台项目中,形成了一套快速搭建页面的框架(BLOCKS),人力工效提升5~8倍。当然Vue并不适用于所有项目,具体项目具体决策,受成本、时间、团队的影响,选择自己合适的框架进行开发,这也是一个团队技术领袖应该具有的能力。
本书是团队第一次写书,参加本书编写人员还有白杨、李雅男、董庆明、陈立文、肖仁晖。书中表达与样例难免会有纰漏和谬误,如果发现,欢迎联系我们反馈,万分感谢!我们的邮箱是:lld490112728@163.com
百度外卖高级技术经理
李利德
这本书简直是为我量身定做的!作为一名从PC端Web开发转向移动端Vue开发的新手,我之前一直觉得无从下手,虽然Vue的基础知识掌握得还不错,但一涉及到实际的移动端项目,就感觉力不从心。这本书的出现,就像给我指明了一盏明灯。从项目初始化、组件化开发规范,到数据请求、状态管理,再到各种常见的UI组件封装和性能优化,几乎涵盖了我在移动端Vue开发过程中遇到的所有痛点。尤其是书中关于“如何设计可复用的组件”和“提升列表渲染性能的策略”,这些内容让我受益匪浅。我之前总是陷入重复造轮子的困境,或者写的组件不够灵活,现在看了书中的案例,我才明白原来可以通过Props、Provide/Inject以及Slot等多种方式来构建更具扩展性的组件。而且,书中还贴心地给出了很多调试技巧和打包优化建议,这对我来说至关重要,因为在移动端,性能和包体积直接影响用户体验。我迫不及待地想把书中学到的知识应用到我目前负责的几个项目中,相信这会大大提升我的开发效率和项目质量。
评分这本书的内容给我一种“润物细无声”的感觉,它不像某些书籍那样,上来就罗列一堆晦涩难懂的概念,而是循序渐进,通过一个个生动形象的案例,将Vue移动端开发的各个方面娓娓道来。我印象最深刻的是书中关于“前端安全与防范”的部分,这是很多其他书籍容易忽略的环节,但对于实际项目来说却至关重要。书中详细讲解了XSS攻击、CSRF攻击等常见的安全威胁,以及如何在Vue项目中进行有效的防护,比如输入验证、HTTPS的使用、token管理等等。这让我意识到,作为一名前端工程师,不仅要关注功能的实现,更要关注用户数据的安全。此外,书中关于“如何优雅地处理网络请求和异常”的讲解也让我受益匪浅,它提供了一种统一的请求封装方式,并详细讲解了如何处理各种网络错误,如何展示友好的加载和错误提示,这大大提升了用户的使用体验。
评分我最近刚开始接触Vue移动端开发,市面上能找到的书籍大部分要么过于基础,要么过于理论化,读起来枯燥乏味,而且感觉和实际开发脱节。《前端工程师必备技能:Vue移动开发实战技巧》这本书的内容,可以说完全刷新了我对技术书籍的认知。它不仅仅是“教”你写代码,更是“引导”你思考。书中那些充满智慧的“小技巧”和“优化思路”,比如如何利用Vue的生命周期函数精妙地处理异步数据,如何在组件间实现高效的状态同步,以及如何通过CSS预处理器和PostCSS来构建响应式布局,这些细节的处理,真正体现了作者深厚的功底。我尤其欣赏书中关于“性能监控与优化”的章节,它不仅讲解了常见的性能瓶颈,还提供了多种实用的工具和方法来定位和解决问题,这让我摆脱了之前“凭感觉”做性能优化的窘境。读完这本书,我感觉自己对Vue移动端开发有了更深的理解,也更有信心去迎接未来的挑战了。
评分这本书给我最大的惊喜在于它对“复杂业务场景下的Vue移动开发”的深入剖析。很多教程往往只停留在基础知识的讲解,但实际工作中,我们经常会遇到一些棘手的问题,比如权限控制、页面埋点、国际化适配、以及与原生App的混合开发等等。这本书非常接地气,它并没有回避这些“硬骨头”,而是通过一个接一个的实战案例,将这些复杂的技术点拆解得清晰明了。我特别喜欢其中关于“基于Vue的跨平台方案选型与实践”的章节,它详细对比了Weex、React Native、uni-app等主流方案的优劣,并结合实际项目经验给出了选择建议,这对于我们团队在技术选型时提供了宝贵的参考。此外,书中关于“如何构建可维护的Vue移动端项目架构”的讲解也非常到位,它不仅提供了目录结构和模块划分的建议,还深入讲解了如何引入CI/CD流程,如何进行代码审查,以及如何进行版本管理,这对于保证项目的长期稳定性和团队协作效率有着重要的意义。
评分这本书的内容,绝对称得上是“干货满满”,而且非常“接地气”。它没有那些花哨的理论,更多的是直接切入开发实际,解决我们工作中遇到的痛点。我特别喜欢书中关于“Vue项目中的组件设计模式”的讲解,它不仅仅是教你如何写组件,更重要的是教会你如何从一个更高的维度去思考组件的设计,如何让组件更易于复用、更易于维护。书中介绍的几种常见的组件设计模式,比如容器组件与展示组件分离、高阶组件的应用等,都给我留下了深刻的印象。而且,书中还专门开辟了一个章节来讨论“前端工程化与自动化测试”,这让我意识到,在移动端开发中,工程化和测试的重要性不亚于核心业务逻辑的实现。它讲解了如何使用Webpack进行构建优化,如何集成ESLint和Prettier进行代码规范检查,以及如何编写单元测试和端到端测试,这些内容对于提升团队的开发效率和代码质量有着不可估量的价值。
评分一般吧~
评分没有我想象中的好看
评分还在学习中 适合初学者 有些简易
评分好好放个沟沟壑壑叫姐姐斤斤计较斤斤计较
评分内容干练粗暴
评分发货很快,书本完好,印刷清晰。
评分好好放个沟沟壑壑叫姐姐斤斤计较斤斤计较
评分没有我想象中的好看
评分书还可以,很实用,非常适合我
本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度,google,bing,sogou 等
© 2025 book.coffeedeals.club All Rights Reserved. 静流书站 版权所有