Vue.js 3移動應用開發實戰

購買商店

Vue.js 3移動應用開發實戰

$474.00

馬上購買

內容描述

隨著前後端分離開發模式的出現，前端框架Vue、React、Angular相關生態的不斷完善，移動設備的普及，移動端Web App的開發成為主流，越來越多的大學逐步開設Web相關的課程。本書是一本為初學前端的學生量身定製的移動端Web開發入門教材，適合對移動端Web開發瞭解不多、沒有系統學過前端開發，但對前端編程感興趣的讀者學習使用。
本書分為13章，第1~2章主要介紹移動端Web技術的發展和移動端Web項目所需要的技術棧，包括安裝開發環境與調試代碼等；第3~10章主要介紹各種技術棧及第三方庫的基礎語法和使用方法等，涉及的技術棧及第三方庫包括Vue、Vuex、Webpack、Vue Router、Node.js、Mock.js、Vant Weapp、axios等，並在每章中都提供實戰案例或Demo；第11~12章分別給出2個實戰案例—響應式單頁面管理系統TODO和移動電商Web App；第13章介紹Web App轉為移動App的方法。
本書內容由淺到深、解析詳細、示例豐富，是廣大移動前端開發初學者的必備參考書，同時也非常適合作為高等院校和培訓機構的電腦及相關專業的教材。

目錄大綱

3.2.1  Webpack初始化項目 47
3.2.2  Webpack下的Vue.js項目文件結構 49
3.3  本章小結 58
第4章  Vue快速入門 59
4.1  實例 59
4.2  組件 60
4.3  模板語法 63
4.4  方法、計算屬性和監聽器 68
4.4.1  方法 68
4.4.2  計算屬性 70
4.4.3  監聽器 71
4.5  動畫 74
4.6  插槽 84
4.6.1  插槽內容 84
4.6.2  插槽的渲染作用域 86
4.6.3  插槽的備用內容 87
4.6.4  具名插槽 87
4.6.5  作用域插槽 89
4.6.6  解構插槽props 91
4.6.7  動態插槽與具名插槽的縮寫 92
4.7  本章小結 93

第5章  Vuex快速入門 94
5.1  什麽是狀態管理模式 94
5.2  Vuex概述 95
5.2.1  Vuex的組成 96
5.2.2  安裝Vuex 96
5.2.3  一個簡單的store 97
5.3  state 99
5.4  Getters 101
5.5  Mutations 105
5.6  Actions 110
5.7  Modules 115
5.8  Vuex適用的場合 117
5.9  本章小結 124
第6章  Vue Router快速入門 125
6.1  什麽是單頁應用 125
6.2  Vue Router概述 126
6.2.1  安裝Vue Router 126
6.2.2  一個簡單的組件路由 127
6.3  動態路由 129
6.3.1  動態路由匹配 130
6.3.2  響應路由變化 131
6.4  導航守衛 133
6.4.1  全局前置守衛 134
6.4.2  全局解析守衛 136
6.4.3  全局後置鉤子函數 136
6.4.4  組件內的守衛 136
6.4.5  路由配置守衛 137
6.5  嵌套路由 141
6.6  命名視圖 144
6.7  編程式導航 147
6.8  路由組件傳參 148
6.9  路由重定向、別名及元信息 150
6.9.1  路由重定向 150
6.9.2  路由的別名 150
6.9.3  路由元信息 152
6.10  Vue Router的路由模式 153
6.10.1  hash模式 153
6.10.2  history模式 154
6.11  滾動行為 155
6.12  keep-alive 159
6.12.1  keep-alive緩存狀態 159
6.12.2  keep-alive實現原理淺析 161
6.13  路由懶加載 163
6.14  本章小結 163
第7章  ES6/ES7快速入門 164
7.1  變量聲明 164
7.1.1  var、let、const關鍵字 164
7.1.2  箭頭函數 167
7.1.3  對象屬性和方法的簡寫 168
7.2  模塊化 169
7.2.1  ES6模塊化概述 169
7.2.2  import和export 170
7.3  async和await 171
7.4  本章小結 176
第8章  axios快速入門 177
8.1  什麽是axios 177
8.2  vue-axios的使用 177
8.2.1  安裝 177
8.2.2  第一個Demo 179
8.3  axios API 182
8.3.1  通過配置創建請求 182
8.3.2  使用請求方法的別名 183
8.3.3  創建axios實例 183
8.3.4  配置全局的axios默認值 184
8.3.5  請求和響應攔截器 184
8.4  響應結構 185
8.5  本章小結 187
第9章  移動端Web屏幕適配和UI框架 188
9.1  視區 188
9.1.1  物理像素和CSS像素 188
9.1.2  視區分類 189
9.1.3  設置視區 189
9.2  響應式佈局 190
9.2.1  媒體查詢 190
9.2.2  案例：響應式頁面 193
9.3  Flex佈局 196
9.3.1  Flex佈局——新舊版本的兼容性 196
9.3.2  Flex容器屬性 196
9.3.3  Flex子元素屬性 201
9.3.4  Flex更便捷 205
9.4  rem適配 213
9.4.1  動態設置根元素font-size 213
9.4.2  計算rem數值 214
9.5  vw適配 215
9.6  rem適配和vw適配兼容性 216
9.7  移動UI框架的選擇 218
9.7.1  Vant 218
9.7.2  MUI 219
9.7.3  Jingle移動端框架 220
9.7.4  FrozenUI 221
9.8  本章小結 223
第10章  移動端Web單擊事件 224
10.1  touch事件 224
10.1.1  touch事件分類 224
10.1.2  touch事件對象 225
10.2  移動端Web單擊事件 228
10.2.1  iOS單擊延遲 229
10.2.2  單擊穿透的問題 229
10.3  本章小結 231
第11章  實戰項目：響應式單頁面管理系統TODO 232
11.1  創建index.html 232
11.2  創建根實例和頁面組件 233
11.3  頁面切換 235
11.4  待辦事項頁面的開發 236
11.4.1  創建事項 236
11.4.2  單條事項組件 237
11.4.3  數據持久化 239
11.5  回收站頁面的開發 240
11.5.1  創建已刪除事項列表 240
11.5.2  創建單條已刪除事項組件 241
11.6  刪除事項和恢復事項聯動 242
11.7  美化頁面背景 242
11.8  本章小結 252
第12章  實戰項目：移動電商Web App 253
12.1  項目環境配置 253
12.1.1  初始化並整理項目 253
12.1.2  引入並實現Vant的按需加載 255
12.1.3  引入並封裝axios 255
12.1.4  使用Mock.js模擬數據接口 256
12.2  模擬數據接口 258
12.3  設計路由 262
12.4  底部tabbar 264
12.5  登錄頁、註冊頁實現 267
12.5.1  登錄頁實現 267
12.5.2  註冊頁實現 270
12.6  首頁實現 275
12.7  詳情頁實現 280
12.8  購物車頁實現 284
12.9  “我的”頁面實現 289
12.10  本章小結 292
第13章  實戰項目：Web App打包成移動端App 293
13.1  打包準備 293
13.2  使用HBuilderX打包手機端App 294
13.3  本章小結 298