Download link: https://pan.baidu.com/s/1tJH3ETHukGfUxaUbz5lu2w Password: ikrt
- Publisher: Electronics Industry Press; 1st Edition (January 1, 2018)
- Paperback: 288 pages
- Language: Simplified Chinese
- Format: 16
- ISBN: 9787121331565, 712133156X
- Barcode: 9787121331565
- Product size: 23.2 x 17 x 1.6 cm
- Item weight: 458 g
- Brand: Electronic Industry Press
- SALT : B0789TBY8N
Editor's Choice
The experience of the excellent front-end expert team of Baidu Takeaway is fully shared. This book is equipped with a unique online reader circle value-added service. If you have problems reading the book, you can find the author.
About the Author
Li Lide: Senior technical manager of Baidu Takeout, served as a senior engineer of Baidu and Baidu Takeaway, has rich experience in website construction of Internet projects, team management experience, etc.
Xu Xincheng: Responsible for the front-end direction of Baidu Takeaway User Product Department. He has his own opinions on front-end development architecture, technical applications and efficient team collaboration. He is good at solving problems with platform-based and engineering methods.
content
Contents
Chapter 1 Setting up a development environment 1
1.1 Local Node environment 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-related configuration 17
1.2.1 Common 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 Chapter Summary 27
Chapter 2 Building a Vue Project from Scratch 28
2.1 What Tools Are Needed for Local Development 28
2.2 Building a Vue Project 29
2.2.1 Vue-cli 29
2.2.2 Scaffolding project composition analysis 30
2.3 webpack configuration 32
2.3.1 webpack introduction 32
2.3.2 webpack configuration analysis 33
Chapter 3 API details 45
3.1 global variables 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 Template syntax 50
3.3 Directives 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 Custom directives 77
3.4 Filters 79
3.5 Computed properties 80
3.5.1 Basic examples 80
3.5.2 Computed properties vs Methods 81
3.5.3 Computed property caching 81
3.5.4 Computed property vs Watched property 82
3.5.5 Computed setter 83
3.6 Watchers 84
3.7 Functions and usage of components 86
3.7.1 Using components 86
3.7.2 Component Development 88
3.7.3 Non-Props Attributes 92
3.7.4 Custom Events 92
3.7.5 Slots Content Delivery 96
3.7.6 Dynamic Components 99
3.7.7 Additional Knowledge of Components 100
3.8 Inheritance and Mixing 104
3.8.1 Vue .extend 105
3.8.2 Extends in options 105
3.8.3 Source code analysis 105
3.8.4 Merge strategy 106
3.9 Plugin 111
Chapter 4 Vue component library 115
4.1 Element 115
4.1.1 Element design 115
4.1.2 Element UI 116
4.1.3 Advantages and disadvantages of Element 117
4.2 Mint UI 118
4.2.1 Features of Mint UI 118
4.2.2 Advantages and disadvantages of Mint UI 119
4.3 iView 119
4.3.1 Introduction to iView 120
4.3.2 Advantages and disadvantages of iView 120
4.4 Vux 121
4.4.1 Introduction to Vux 121
4.4.2 Advantages and disadvantages of Vux 122
4.5 XCUI 122
4.5.1 Introduction to XCUI 122
4.5.2 Advantages and disadvantages of XCUI 123
Chapter 5 Official Peripheral Libraries 124
5.1 Axios 124
5.1.1 Functions 124
5.1.2 Installation 124
5.1.3 Example 125
5.1.4 Axios API 126
5.1.5 Request Configuration 127
5.1.6 Response Structure 130
5.1.7 Configuration Defaults /defaults 131
5.1.8 Interceptors 132
5.1.9 Error Handling 133
5.1.10 Cancellation 134
5.1.11 Promises 135
5.1.12 TypeScript 135
5.2 Vuex Usage 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 Module Reuse 145
5.3 Vue-router Usage 146
5.3.1 Install 146
5.3.2 Getting Started 146
5.3.3 Dynamic Route Matching 147
5.3.4 Programmatic Navigation 151
5.3.5 Named Routes 152
5.3 .6 Named Views 153
5.3.7 Redirects and Aliases 153
5.3.8 HTML5 History Mode 154
5.3.9 Backend configuration example 155
5.3.10 Warning 155
5.3.11 Navigation hook 156
5.3.12 Transition animation 159
5.3.13 Data acquisition 160
5.3.14 Scrolling behavior 163
5.3.15 Lazy loading 164
Chapter 6 Vue project optimization 166
6.1 State transitions 166
6.1.1 The concept of transitions 166
6.1.2 CSS transitions 166
6.1.3 Javascript hooks 167
6.2 Automated tests for Vue projects 170
6.2.1 unit tests 172
6.2.2 e2e tests 175
6.3 Typescript Support 179
6.3.1 Typescript 179
6.3.2 Installing Typescript 180
6.3.3 Combining Typescript and Vue 180
6.4 MPA 186
6.4.1 About the advantages and disadvantages of MPA 187
6.4.2 How to implement MPA 187
6.5 Vue's heterogeneity 190
6.5.1 Not a case of heterogeneity 191
6.5.2 Implementing heterogeneity by encapsulating into Vue components 192
6.5.3 Implementing heterogeneity by directing 194
6.5.4 Looping nested Vue components 197
6.6 Server-side rendering 198
6.6.1 The concept of server-side rendering 198
6.6.2 The meaning of using Vue-ssr 198
6.6.3 The role of Vue-ssr 198
6.6.4 Vue-ssr learning difficulty 198
6.6.5 Technology stack 199
6.6.6 Front-end and back-end data strategies 199
6.6.7 Performance Impact 199
6.6.8 Installation 200 6.6.9
Rendering a Vue instance 200
6.6.10 An example 202
6.7 Vue's pre-render 204
Chapter 7 Principle Analysis 206
7.1 Virtual DOM Principle 206
7.1.1 DOM 206
7.1 .2 Virtual DOM Algorithm 209
7.2 Responsive Data Streaming of Vue Essence 210
7.2.1 Evolution History of Data Streams 210
7.2.2 Introduction to Vue and React 211
7.2.3 Advantages of Vue's Responsive Data Streams 211
7.2.4 Object.defineProperty and 213
7.2.5 Vue source code 214
7.2.6 Vue's render function is Watcher's expOrFn 218
7.3 Vuex2.0 source code analysis 219
7.3.1 The meaning of Vuex 219
7.3.2 Source code analysis 220
7.3.3 Vuex API analysis 233
7.3.4 Auxiliary functions 235
7.3.5 Plug-ins 239
7.3.6 Encapsulation of some functions 242
7.4 Vue-router principle 244
7.4.1 Vue-router 244
7.4.2 Vue-router application example 244
7.4.3 Vue-router principle
245 Chapter 8 Entering WEEX 256
8.1 Building a WEEX basic environment 256
8.1.1 Initialization: hello world 256
8.1.2 dotwe 257
8.2 Analyzing the first WEEX project code 258
8.2.1 Directory structure 258
8.2.2 Starting a service through serve 258
8.2.3 webpack Configuration 259
8.2.4 Page development 260
8.3 Debug WEEX code 260
8.3.1 Web debug 260
8.3.2 Mobile debug 261
8.4 Integrate WEEX into existing applications 263
8.4.1 Integrate into Android 263
8.4.2 Integrate into iOS 268
8.5 Building Mobile Apps with WEEXpack 271
Preamble
序 言
在很长时间以内，前端开发的工作内容是为静态的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并不适用于所有项目，具体项目具体决策，受成本、时间、团队的影响，选择自己合适的框架进行开发，这也是一个团队技术领袖应该具有的能力。
本书是团队第一次写书，参加本书编写人员还有白杨、李雅男、董庆明、陈立文、肖仁晖。书中表达与样例难免会有纰漏和谬误，如果发现，欢迎联系我们反馈，万分感谢！我们的邮箱是：[email protected]
百度外卖高级技术经理
李利德
文摘
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 目录结构
首先观察一下目录结构：