Vue.js是一個漸進式的JavaScript 框架，與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。作為2016年社區*火的前端框架，越來越多的公司都在嘗試用Vue來開發自己的項目。本書主要以項目維度，站在實戰的角度，從項目的搭建，項目開發，到項目的優化，結合實際，多維度介紹了Vue.js。本書從實戰場景出發，結合各種實用demo，結合開發環境構建，從無到有，剖析原理，全面介紹Vue2.0的實用技巧。后面幾章重點講解Vue內部實現機制，針對各種業務形態的支持以及網站調優方等等，是Vue技術體系追隨者不可多得的實戰寶典。
百度外賣優秀前端專家團隊經驗完全分享。本書配備特色線上讀者圈增值服務，看書有問題，找得到作者。
序 言
在很長時間以內，前端開發的工作內容是為靜態的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
百度外賣高級技術經理
李利德
12年畢業于北京航空航天大學軟件工程專業，先后就職于人人網、百度，現在在百度外賣擔任高級前端工程師。擁有五年前端工程經驗，對前端開發基礎架構造型、技術應用、團隊高效協作有自己獨到的見解。熱愛前端和開源，喜歡用平臺化和工程化手段解決業務中的問題。
目 錄
第1章 搭建開發環境1
1.1 本地Node環境1
1.1.1 Node.js1
1.1.2 npm7
1.1.3 yarn12
1.1.4 npm vs yarn17
1.2 ide相關配置17
1.2.1 常用ide17
1.2.2 Sublime text17
1.2.3 Atom20
1.2.4 WebStorm22
1.2.5 VSCode23
1.3 本章小結27
第2章 從零搭建Vue工程28
2.1 本地開發需要哪些工具28
2.2 搭建Vue工程29
2.2.1 Vue-cli29
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 silent45
3.1.2 optionMergeStrategies45
3.1.3 devtools46
3.1.4 errorHandler48
3.1.5 ignoredElements48
3.1.6 keyCodes49
3.1.7 performance49
3.1.8 productionTip49
3.2 模板語法50
3.3 指令50
3.3.1 v-text51
3.3.2 v-html51
3.3.3 v-pre51
3.3.4 v-cloak52
3.3.5 v-once53
3.3.6 v-if54
3.3.7 v-else54
3.3.8 v-else-if55
3.3.9 v-show55
3.3.10 v-for56
3.3.11 v-bind64
3.3.12 v-model70
3.3.13 v-on74
3.3.14 自定義指令77
3.4 過濾器79
3.5 計算屬性80
3.5.1 基礎例子80
3.5.2 計算屬性vs Methods81
3.5.3 計算屬性緩存81
3.5.4 Computed屬性vs Watched屬性82
3.5.5 計算setter83
3.6 觀察者Watchers84
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.extend105
3.8.2 options里的extends105
3.8.3 源碼分析105
3.8.4 合并策略106
3.9 插件plugin111
第4章 Vue組件庫115
4.1 Element115
4.1.1 Element的設計115
4.1.2 Element的UI116
4.1.3 Element的優缺點117
4.2 Mint UI118
4.2.1 Mint UI的特性118
4.2.2 Mint UI的優缺點119
4.3 iView119
4.3.1 iView簡介120
4.3.2 iView的優缺點120
4.4 Vux121
4.4.1 Vux簡介121
4.4.2 Vux優缺點122
4.5 XCUI122
4.5.1 XCUI簡介122
4.5.2 XCUI優缺點123
第5章 官方周邊庫124
5.1 Axios124
5.1.1 功能124
5.1.2 安裝124
5.1.3 Example125
5.1.4 Axios API126
5.1.5 請求配置127
5.1.6 響應結構130
5.1.7 配置的默認值/defaults131
5.1.8 攔截器132
5.1.9 錯誤處理133
5.1.10 取消134
5.1.11 Promises135
5.1.12 TypeScript135
5.2 Vuex的使用135
5.2.1 State135
5.2.2 Getters137
5.2.3 Mutations ＆ Actions138
5.2.4 Modules141
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 tests172
6.2.2 e2e測試175
6.3 Typescript Support179
6.3.1 Typescript179
6.3.2 安裝Typescript180
6.3.3 Typescript和Vue結合180
6.4 MPA186
6.4.1 關于MPA的優劣勢187
6.4.2 如何實現MPA187
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-render204
第7章 原理解析206
7.1 Virtual DOM原理206
7.1.1 DOM206
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的expOrFn218
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-router244
7.4.2 Vue-router應用舉例244
7.4.3 Vue-router原理245
第8章 進軍WEEX256
8.1 搭建WEEX基礎環境256
8.1.1 初始化：hello world256
8.1.2 dotwe257
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 集成到Android263
8.4.2 集成到iOS268
8.5 使用WEEXpack構建移動應用271
新書資訊