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

隨著前後端分離開發模式的出現，前端框架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