本書以JavaScript語言為基礎，以Vue.js項目開發(fā)過程為主線，介紹了一整套面向Vue.js的項目開發(fā)技術(shù)。從NoSQL數(shù)據(jù)庫的搭建到Express項目API的編寫，后再由Vue.js顯示在前端的頁面中，讓讀者可以非常迅速地掌握這些技術(shù)，提高項目開發(fā)的能力。本書分為4篇。第1篇介紹了Vue.js基礎環(huán)境搭建，是全書的基石；第2篇介紹了電影網(wǎng)站項目的設計，涵蓋ES6、Webpack和工程化環(huán)境搭建等關(guān)鍵技術(shù)；第3篇介紹了電影網(wǎng)站項目的前端和后端的實現(xiàn)，涵蓋Node.js后端技術(shù)、Vue.js各種組件和API等技術(shù)；第4篇介紹了頁面優(yōu)化，通過學習一些Vue.js模板和框架，從而制作更加美觀的用戶界面（UI）。本書適合Vue.js初學者和進階者閱讀，也適合其他Web前端和后端開發(fā)愛好者閱讀。對于一些產(chǎn)品經(jīng)理，本書也同樣適合閱讀。另外，對于培訓機構(gòu)和各類開設Web開發(fā)課程的院校，本書是一本很好的項目開發(fā)教程。
前言 隨著手機和移動互聯(lián)網(wǎng)市場的日益成熟，移動App領域也從如何開發(fā)，發(fā)展到如何更高效、更低成本地開發(fā)階段。傳統(tǒng)的原生平臺（PC、iOS和Android）開發(fā)技術(shù)雖然比較成熟，但由于其開發(fā)效率和成本的限制，已經(jīng)無法滿足移動互聯(lián)網(wǎng)App的開發(fā)需求。
跨平臺技術(shù)橫空出世，大量的JavaScript框架和工具得以迅速流行，而Vue.js躍升為其中的佼佼者，成為構(gòu)建用戶界面的絕佳實踐技術(shù)之一。
Vue.js是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue.js的核心庫只關(guān)注視圖層，并且采用自底向上增量開發(fā)的設計，非常容易學習。
Vue.js完全有能力驅(qū)動采用單文件組件和Vue.js生態(tài)系統(tǒng)支持的庫來開發(fā)復雜的單頁應用，它本身也非常容易與其他庫或已有項目進行整合。
目前，市面上有關(guān)Vue.js的書甚是駁雜，大多數(shù)是對專業(yè)文檔的復述和非常難懂的底層知識的介紹。很難想象一個編程的初學者，或者只是一個初期嘗試Web開發(fā)的學生該如何閱讀這樣的書。
而本書是一本專注于Vue.js項目實戰(zhàn)的書，內(nèi)容涵蓋應用廣泛的前端和后端技術(shù)，可以指導讀者構(gòu)建自身的知識框架。Vue.js主要擅長前端視圖層的開發(fā)，本書不但介紹了Vue.js的一些開發(fā)技巧，而且用大量篇幅介紹了如何構(gòu)建一個合格的工程項目，以及如何用Vue.js在一個項目中開發(fā)出所需要的效果。
本書以實戰(zhàn)為主旨，從一個由Node.js開發(fā)的完整后臺開始，去制作一個電影網(wǎng)站，完成這項工程的每一個步驟，從而提高讀者的整體技術(shù)水平。本書涵蓋了Vue.js中常用的組件、API、布局、第三方UI組件庫、請求和數(shù)據(jù)更新等內(nèi)容，可以讓讀者全面、深入、透徹地理解Vue.js主流開發(fā)技術(shù)和整個項目工程的設計方法，從而提升實際開發(fā)水平和項目實戰(zhàn)能力。
本書涉及的知識點較多，如圖1的詞云圖所示。即便是一個對Vue.js一無所知的小白，通過閱讀本書，也可以一點一滴地積累知識，完成整個Vue.js的學習。
圖1 詞云圖 本書的學習流程如圖2所示。
圖2 本書學習流程本書特色 1．涵蓋Web開發(fā)的常用技術(shù) 本書不僅是一本介紹Vue.js框架技術(shù)的圖書，更是一本JavaScript全棧技術(shù)圖書。書中不僅涵蓋從HTML 5、CSS 3到JavaScript腳本編程等Web開發(fā)的基礎知識，而且也涵蓋NoSQL數(shù)據(jù)庫技術(shù)、Node.js服務器端開發(fā)技術(shù)及頁面優(yōu)化技術(shù)等高級開發(fā)知識。
2．注重實戰(zhàn)，通過一個完整的項目帶領讀者學習 本書通過一個完整的Web工程項目案例貫穿全書，帶領讀者全流程參與該項目的整個開發(fā)過程，讓讀者可以掌握Web開發(fā)的完整技術(shù)鏈，從而提升實際項目開發(fā)水平。
3．對項目案例的核心源代碼做了詳細注釋和講解 為了便于讀者理解本書內(nèi)容，提高學習效率，本書在講解時給出了書中項目案例的核心源代碼，并對源代碼做了詳細注釋，對實現(xiàn)方法和思路做了詳細講解。
4．展現(xiàn)項目設計思路和項目管理流程 筆者認為，一個優(yōu)秀的程序員不僅要有良好的代碼編寫能力，更要有對整個項目的設計思路和把控能力，這對于編寫業(yè)務邏輯的程序員尤其重要。本書從第2章開始就逐步滲透了項目管理的相關(guān)知識，展現(xiàn)了從項目設計到項目開發(fā)的整個流程。
本書內(nèi)容 第1篇 背景知識（第1章） 本篇主要介紹了網(wǎng)頁開發(fā)的相關(guān)背景知識和Vue.js的背景知識，并通過Hello World標準入門示例帶領讀者體驗如何簡單地使用Vue.js。通過對本篇內(nèi)容的學習，讀者可以掌握Vue.js的安裝方法，并對Vue.js的主要特性有個大概的了解，從而給后續(xù)學習打好基礎。
第2篇 項目設計（第2～4章） 本篇主要介紹了一個電影網(wǎng)站的項目設計，包括整個項目的UI設計、路由設計和數(shù)據(jù)庫設計等。通過對本篇內(nèi)容的學習，讀者可以了解一個完整的項目應該如何去構(gòu)思和設計，應該包含哪些內(nèi)容，從而提高自己的項目設計能力。
第3篇 Vue.js應用開發(fā)（第5~8章） 本篇主要介紹了電影網(wǎng)站前端和后端的實現(xiàn)，涵蓋Node.js技術(shù)、Vue.js組件和API等技術(shù)。本篇通過大量的代碼展示了Vue.js的強大功能，并比較了當前流行的前端技術(shù)和傳統(tǒng)的Web開發(fā)技術(shù)的差異。通過對本篇內(nèi)容的學習，讀者可以系統(tǒng)地掌握Vue.js應用開發(fā)所需要掌握的各種技術(shù)。
第4篇 頁面優(yōu)化（第9章） 本篇主要介紹了如何使用網(wǎng)絡中已有的UI庫或其他造好的車輪，去優(yōu)化自己的頁面。通過應用這些流行的UI組件庫，開發(fā)人員可以快速地將一個頁面制作得非常精美。通過對本章內(nèi)容的學習，讀者可以掌握頁面優(yōu)化的各種武器，從而開發(fā)出更加美觀的頁面。
本書配套資源獲取方式 本書涉及的源代碼文件等配套資源需要讀者自行下載。請在華章公司的網(wǎng)站www.hzbook.com上搜索到本書，然后在本書頁面上找到資料下載模塊即可下載。
本書讀者對象* Vue.js初學人員；* Vue.js進階人員；* JavaScript全棧開發(fā)者；* Web前端開發(fā)工程師；* Web服務器端開發(fā)工程師；* Node.js服務端開發(fā)工程師；* 軟件開發(fā)項目經(jīng)理；* 各大院校的學生；* 相關(guān)培訓機構(gòu)的學員。
致謝 感謝本書編輯，讓我有機會和本書結(jié)緣！感謝在本書寫
目錄
前言
第1篇 背景知識
第1章 初探網(wǎng)頁開發(fā)2
1.1 網(wǎng)頁開發(fā)歷史2
1.1.1 傳統(tǒng)網(wǎng)頁開發(fā)3
1.1.2 新前端網(wǎng)頁開發(fā)5
1.2 MVVM風格開發(fā)框架6
1.2.1 為什么會出現(xiàn)MVVM6
1.2.2 MVVM架構(gòu)的最佳實踐7
1.2.3 MVC、MVP和MVVM開發(fā)模式對比8
1.3 Vue.js來了9
1.4 Vue.js的安裝10
1.4.1 使用獨立版本11
1.4.2 使用CDN安裝13
1.4.3 npm大法安裝15
1.4.4 使用Chrome瀏覽器測試Vue.js的雙向綁定17
1.5 Vue.js的主要特性19
1.5.1 組件19
1.5.2 模板22
1.5.3 響應式設計22
1.5.4 過渡效果22
1.5.5 單文件組件24
1.6 小結(jié)與練習24
1.6.1 小結(jié)24
1.6.2 練習25
第2篇 項目設計
第2章 開啟Vue.js之旅的準備工作28
2.1 JavaScript運行與開發(fā)環(huán)境28
2.1.1 神奇的包管理器npm28
2.1.2 好用的瀏覽器Chrome31
2.1.3 Vue.js的調(diào)試神器vue-devtools34
2.1.4 非常智能的IDEWebStorm36
2.2 認識ECMAScript 6（ES 6）39
2.2.1 ES 6的前世今生39
2.2.2 為什么要使用ES 640
2.3 ES 6的一些常用語法40
2.3.1 Default Parameters（默認參數(shù)）40
2.3.2 Template Literals（模板文本）41
2.3.3 Multi-line Strings（多行字符串）41
2.3.4 Destructuring Assignment（解構(gòu)賦值）42
2.3.5 Enhanced Object Literals（增強的對象文本）42
2.3.6 Arrow Functions（箭頭函數(shù)）43
2.3.7 Promise實現(xiàn)44
2.3.8 塊作用域構(gòu)造let45
2.3.9 Classes（類）46
2.3.10 Modules（模塊）46
2.4 使用Babel進行ES 6的轉(zhuǎn)化47
2.4.1 安裝Babel48
2.4.2 使用Babel48
2.5 精簡壓縮生產(chǎn)環(huán)境的Webpack51
2.5.1 Webpack是什么51
2.5.2 配置一個完整項目的Webpack52
2.5.3 不得不說的新版Webpack 456
2.6 小結(jié)與練習59
2.6.1 小結(jié)59
2.6.2 練習59
第3章 從一個電影網(wǎng)站項目學習Vue.js60
3.1 快速構(gòu)建第一個Vue.js程序60
3.1.1 通過CLI構(gòu)建應用60
3.1.2 輸出Hello world！63
3.1.3 開發(fā)環(huán)境與生產(chǎn)環(huán)境66
3.2 電影網(wǎng)站的設計70
3.2.1 網(wǎng)站的功能設計70
3.2.2 網(wǎng)站的路由設計71
3.2.3 網(wǎng)站的頁面設計72
3.3 電影網(wǎng)站的技術(shù)選擇73
3.3.1 服務的堅實后盾數(shù)據(jù)庫73
3.3.2 數(shù)據(jù)的搬運和加工服務器端74
3.4 小結(jié)與練習74
3.4.1 小結(jié)74
3.4.2 練習75
第4章 電影網(wǎng)站數(shù)據(jù)庫的搭建76
4.1 什么是數(shù)據(jù)庫76
4.1.1 什么是SQL76
4.1.2 什么是NoSQL78
4.1.3 兩種數(shù)據(jù)庫的對比分析79
4.2 MongoDB基礎入門80
4.2.1 為什么選擇MongoDB80
4.2.2 安裝MongoDB81
4.2.3 啟動MongoDB83
4.2.4 安裝MongoDB的可視化界面87
4.2.5 MongoDB的基礎操作90
4.3 電影網(wǎng)站數(shù)據(jù)庫的建立92
4.3.1 數(shù)據(jù)庫的分析與設計93
4.3.2 數(shù)據(jù)集的建立94
4.4 小結(jié)與練習96
4.4.1 小結(jié)96
4.4.2 練習97
第3篇 Vue.js應用開發(fā)
第5章 電影網(wǎng)站服務器端的設計100
5.1 使用JavaScript開發(fā)后端服務100
5.1.1 神奇的Node.js100
5.1.2 什么是Express101
5.2 使用Express進行Web開發(fā)102
5.2.1 安裝Express102
5.2.2 設計后臺服務API105
5.2.3 設計路由107
5.3 服務器測試108
5.3.1 一個測試HTTP請求的Postman插件108
5.3.2 在Chrome中安裝Postman插件109
5.3.3 使用Postman插件進行數(shù)據(jù)測試110
5.4 Express后臺代碼編寫112
5.4.1 新建工程112
5.4.2 連接數(shù)據(jù)庫115
5.4.3 使用Supervisor監(jiān)控代碼的修改118
5.5 用戶系統(tǒng)開發(fā)119
5.5.1 注冊路由122
5.5.2 登錄路由125
5.5.3 找回密碼路由128
5.5.4 提交評論路由133
5.5.5 點贊路由135
5.5.6 下載路由137
5.5.7 發(fā)送站內(nèi)信路由138
5.5.8 接收站內(nèi)信路由141
5.6 前臺API開發(fā)143
5.6.1 顯示排行榜145
5.6.2 顯示文章列表145
5.6.3 顯示文章內(nèi)容146
5.6.4 顯示用戶個人信息147
5.7 后臺API開發(fā)148
5.7.1 添加電影148
5.7.2 刪除電影151
5.7.3 更新電影152
5.7.4 獲取所有電影153
5.7.5 獲取用戶評論154
5.7.6 審核用戶評論154
5.7.7 刪除用戶評論156
5.7.8 封停用戶157
5.7.9 更新用戶密碼159
5.7.10 顯示所有用戶160
5.7.11 管理用戶權(quán)限162
5.7.12 新增文章163
5.7.13 刪除文章165
5.7.14 新增主頁推薦166
5.7.15 刪除熱點信息168
5.8 小結(jié)與練習169
5.8.1 小結(jié)169
5.8.2 練習170
第6章 Vue.js項目開發(fā)技術(shù)解析171
6.1 Vue.js實例171
6.1.1 何為構(gòu)造器171
6.1.2 實例的屬性和方法172
6.1.3 生命周期173
6.2 Vue.js路由175
6.2.1 RESTful模式的路由175
6.2.2 安裝vue-router175
6.3 Vue.js路由配置vue-router176
6.3.1 動態(tài)路由匹配176
6.3.2 嵌套路由179
6.3.3 編程式導航181
6.3.4 命名路由183
6.3.5 命名視圖184
6.3.6 重定向和別名186
6.3.7 路由組件傳遞參數(shù)187
6.3.8 HTML 5 History模式188
6.4 數(shù)據(jù)獲取189
6.4.1 導航守衛(wèi)189
6.4.2 數(shù)據(jù)獲取193
6.5 電影網(wǎng)站項目路由設計195
6.5.1 新建Vue.js項目195
6.5.2 前臺
書單推薦
