本書以符合初學者思維的方式，結合作者實際參與過的項目，繫統介紹Vue開發技巧及其構建企業項目的實踐，對讀者有極大的參考價值。

●第1章 Vue開發前奏 1
1.1 網站交互方式 1
1.1.1 多頁Web應用（MPA） 2
1.1.2 單頁Web應用（SPA） 2
1.2 前後端分離的開發模式 4
1.3 前端三大開發框架 5
1.4 為什麼要學習流行框架（MVVM框架） 6
1.5 框架和庫的區別 7
1.6 模塊化和組件化 7
1.7 後端中的MVC與前端中的MVVM 之間的區別 8
1.8 Node.js安裝 9
1.9 Promises介紹 10
1.9.1 在Promises出現之前的文件讀取方式 10
1.9.2 Promises基本概念介紹 12
1.10 ES7語法糖async/await 15
1.11 開發工具 16
1.11.1 Visual Studio Code 16
1.11.2 vuedevtools 17
1.11.3 Chrome 18
第2章 Vue基礎入門 19
2.1 Vue發展歷史 19
2.2 什麼是Vue.js 19
2.3 Vue基本代碼 20
2.4 Vue常用指令介紹 22
2.4.1 v-cloak指令 23
2.4.2 v-html指令 25
2.5 v-bind&v-on指令 25
2.5.1 示例：跑馬燈特效 26
2.5.2 事件修飾符 28
2.6 v-model雙向數據綁定 32
2.7 v-for和key屬性 34
2.8 v-if和v-show 37
2.9 在Vue中使用樣式 39
2.9.1 使用class樣式 39
2.9.2 使用內聯樣式 39
2.10 過濾器 40
2.10.1 全局過濾器 40
2.10.2 私有過濾器 41
2.11 鍵盤修飾符以及自定義鍵盤修飾符 42
2.12 自定義指令 43
2.13 增刪改查示例 44
第3章 Vue進階 49
3.1 Vue生命周期 49
3.2 axios介紹 51
3.2.1 跨域請求 54
3.2.2 Node手寫JSONP服務器剖析JSONP原理 55
3.3 Vue過渡動畫 57
3.3.素/組件的過渡 57
3.3.2 列表過渡 63
第4章 Vue組件開發 65
4.1 組件介紹 65
4.1.1 全局組件定義的三種方式 65
4.1.2 使用components定義私有組件 67
4.1.3 組件中展示數據和響應事件 67
4.1.4 組件切換 68
4.2 組件傳值 70
4.2.1 父組件向子組件傳值 70
4.2.2 子組件向父組件傳值 71
4.3 組件案例：留言板 73
4.4 使用ref獲取素和組件引用 76
4.5 Vuex 77
4.5.1 安裝Vuex 78
4.5.2 配置Vuex的步驟 78
4.6 render函數 81
第5章 路由vue-router 84
5.1 什麼是路由 84
5.2 安裝vue-router的兩種方式 84
5.3 vue-router的基本使用 85
5.4 設置選中路由高亮 87
5.5 為路由切換啟動動畫 88
5.6 路由傳參query?ms 89
5.6.1 query 89
5.6.2 params 90
5.7 使用children屬性實現路由嵌套 91
5.8 使用命名視圖 93
5.9 watch監聽 95
5.10 computed：計算屬性的使用 96
5.11 watch、computed、methods的對比 98
5.12 nrm的安裝及使用 99
5.13 vue-router中編程式導航 100
第6章 webpack介紹 101
6.1 webpack概念的引入 101
6.2 webpack：最基本的使用方式 102
6.3 webpack最基本的配置文件的使用 105
6.4 webpack-dev-server的基本使用 106
6.5 使用html-webpack-plugin插件配置啟動頁面 107
6.6 webpack-dev-server的常用命令參數 108
6.7 webpack-dev-server配置命令的另一種方式 110
6.8 配置處理css樣式表的第三方loader 111
6.9 分析webpack調用第三方loader的過程 112
6.10 npm install--save、--save-dev、-D、-S、-g的區別 113
6.11 配置處理less文件的loader 113
6.12 配置處理scss文件的loader 114
6.13 webpack中url-loader的使用 114
6.14 webpack中使用url-loader處理字體文件 118
6.15 webpack中Babel的配置 119
第7章 webpack和Vue的結合 122
7.1 webpack中導入Vue和普通網頁使用Vue的區別 122
7.1.1 在webpack中使用Vue 122
7.1.2 在webpack中配置.vue組件頁面總結 128
7.2 export default和export的使用方式 129
7.3 結合webpack使用vue-router 131
7.4 結合webpack實現children子路由 134
7.5 組件中style標簽lang屬性和scoped屬性的介紹 135
7.6 抽離路由模塊 138
第8章 webpack中UI組件的使用 140
8.1 使用餓了麼的Mint UI組件 140
8.1.1 button組件 141
8.1.2 Toast組件 142
8.2 Mint UI按需導入 144
8.3 MUI介紹 145
8.4 MUI的使用 146
8.5 Vant UI 147
8.6 Element UI 147
8.6.1 引入Element 148
8.6.2 Element常見應用場景及解決方案 148
第9章 移動圖書商城 157
9.1 mockjs介紹 157
9.2 App首頁設計 158
9.3 使用阿裡巴巴矢量庫 159
9.4 App.vue 組件的基本設置 162
9.4.1 設置路由激活時高亮的兩種方式 162
9.4.2 實現tabbar頁簽不同組件頁面的切換 163
9.4.3 路由切換添加過渡效果 164
9.5 首頁輪播圖 165
9.6 首頁九宮格 169
9.7 圖書分類組件 172
9.8 制作頂部滑動導航 174
9.9 制作圖片列表 179
9.10 在Android手機瀏覽器中調試App 182
9.11 真機調試 182
9.12 封裝輪播組件 184
9.13 商品詳情頁 185
9.14 購物車小球動畫 189
9.15 封裝購買數量組件 191
9.16 設計購物車數據存儲 193
9.17 我的購物車 194
9.18 增加頁面返回 199
9.19 總結 200
第10章 天下會管理平臺 201
10.1 Vue前端開發規範 201
10.1.1 統一開發環境 201
10.1.2 技術框架選型 201
10.1.3 命名規範 202
10.1.4 注意事項 203
10.1.5 ESlint配置js語法檢查並自動格式化 204
10.2 通過vue-cli來搭建項目 206
10.3 完善項目結構 209
10.3.1 設置瀏覽器圖標 209
10.3.2 完善src源碼目錄結構 209
10.3.3 引入Element UI 210
10.3.4 封裝axios請求 210
10.3.5 Ajax跨域支持 215
10.3.6 封裝全局的css變量文件 216
10.3.7 vue-wechat-title動態修改title 217
10.3.8 封裝全局的配置文件base-config.js 218
10.4 項目介紹及其界面設計 218
10.5 項目設計和分析 220
10.5.1 幫主首頁 221
10.5.2 其他管理界面 222
10.5.3 設計路由 226
10.5.4 設計業務邏輯層 229
10.5.5 Vuex設計 230
10.5.6 權限設計 231
10.5.7 菜單組件 232
10.6 表單驗證 237
10.7 登錄 244
10.7.1 賬號密碼登錄 244
10.7.2 在線生成二維碼 247
10.7.3 制作網站ico圖標 247
10.7.4 存儲登錄信息 248
10.7.5 回車自動登錄 249
10.7.6 防止登錄按鈕頻繁點擊 249
10.8 增刪改查列表 250
後記 259

本書以符合初學者思維的方式，並結合作者實際參與過的項目，繫統介紹Vue的應用技巧以及基於Vue構建企業項目的方法。通過本書的學習，讀者可以全面掌握Vue及其相關技術的開發，並可以從本書代碼中獲取軟件開發與架構設計的經驗與靈感，對讀者有極大的參考價值。本書分為10章，內容包括Vue開發準備、Vue開發基礎、Vue進階、Vue組件開發、路由vue-router、webpack介紹、webpack和Vue的結合、webpack中UI組件的使用、移動圖書商城以及PC後臺管理繫統。本書適合具有HTML+CSS+JS基礎的Vue初學者、Web前端開發人員，也適合作為高等院校和培訓學校Web前端課程的教學參考書。

鄒瓊俊 著