Vue.js光速入門及企業項目開發實戰

本書採用簡潔直觀的方式來講解Vue2的各方面，並融入了關於Git的基礎和進階的知識，讓讀者在學習前端框架之餘，還能學習到主流的團隊代碼管理工具和版本控制工具Git的知識應用。 本書共11章，分為基礎篇和進階篇和項目實戰篇。基礎篇（第1~3章）詳細講述Vue框架的基礎知識點，並以HTML文件的方式切入，淺顯易懂，讓你的學習體驗達到**。進階篇（第4~8章）從webpack起步，系統地講述webpack項目搭建，腳手架來源並切入到基於腳手架的開發模式中。在進階篇中還講到Vue.js的高級語法（包括Vuex，Vue路由）的應用及Vue 3.js新增的語法。項目實戰篇（第9~11章），分別用Vue2技術實現了通用後台管理系統和大型PC商城的兩個實戰項目及對Git講解。本書示例代碼豐富，實際性和系統性較強，並配有視頻講解，助力讀者透徹理解書中的重點、難點。 本書適合有少量HTML+CSS+JavaScript基礎的初學者入門，並可作為高等院校和培訓機構相關專業的教學參考書。

　　

　　

　　

　　

　　

　　

　　

　　

第1章  Vue.js基礎語法 1

1.1  Vue.js框架簡介 1

1.1.1  國內外前端主流框架分析 1

1.1.2  Vue.js框架簡介 2

1.1.3  Vue.js開發編輯器 2

1.1.4  Vue.js安裝 3

1.2  Vue.js語法結構 4

1.2.1  實例化Vue與Mustache語法 4

1.2.2  雙向數據綁定及其原理 6

1.2.3  Vue.js文件中的MVVM 8

第2章  Vue.js指令、事件與計算屬性 9

2.1  Vue.js基礎指令 9

2.2  事件綁定指令 14

2.3  屬性綁定指令 17

2.4  計算屬性 21

第3章  過濾器及組件化開發 25

3.1  過濾器與生命周期 25

3.1.1  Filter過濾器 25

3.1.2  LifeCycle生命周期 27

3.2  組件化開發 28

3.2.1  組件化開發的必要性 28

3.2.2  全局組件 28

3.2.3  局部組件 33

3.3  書店購物車項目實戰 39

第4章  Webpack、Slot與 Vue CLI腳手架 46

4.1  Webpack模塊化打包工具 46

4.1.1  Webpack的簡介與安裝 46

4.1.2  Webpack基本配置 48

4.1.3  webpack-dev-server 49

4.1.4  html-webpack-plugin 50

4.1.5  loader 51

4.1.6  babel 52

4.1.7  HTML熱更新 53

4.1.8  圖片資源 54

4.2  Vue CLI 55

4.2.1  Vue CLI的簡介與安裝 55

4.2.2  Vue CLI創建項目 56

4.2.3  Vue CLI項目預覽 58

第5章  Vue.js高級語法 61

5.1  插槽 61

5.1.1  匿名插槽 61

5.1.2  具名插槽 62

5.1.3  作用域插槽 63

5.2  修飾符 64

5.2.1  表單修飾符 64

5.2.2  事件修飾符 65

5.2.3  按鍵修飾符 66

5.3  監聽 66

5.3.1  普通監聽 66

5.3.2  立即監聽 67

5.3.3  深度監聽 68

5.3.4  deep優化 69

5.4  動態組件與組件緩存 70

5.4.1  動態組件 70

5.4.2  KeepAlive緩存組件 71

5.5  Vue.js其他高級用法 72

第6章  Vuex 76

6.1  DevTools 76

6.2  Vuex 79

6.2.1  Vuex簡介與安裝 79

6.2.2  Vuex核心概念 80

第7章  路由與請求 85

7.1  路由 85

7.1.1  Vue Router簡介與安裝 85

7.1.2  路由文件配置 86

7.1.3  路由跳轉 87

7.1.4  導航守衛 88

7.2  請求 90

第8章  Vue.js 3.0新增語法 93

8.1  Vue.js?3.0起步 93

8.2  Vue.js?3.0新增語法 94

8.2.1  Composition API 94

8.2.2  Provide與Inject 98

8.2.3  Teleport 98

8.2.4  Suspense 99

8.2.5  Fragment 100

8.2.6  TreeShaking 101

8.2.7  Performance提升 102

8.2.8  生命周期 102

第9章  項目一：Vue.js?2.0全家桶+Element開發後台管理系統 103

9.1  創建項目與添加Element模塊 103

9.2  項目初始化 104

9.3  登錄組件的初步引入及使用 105

9.4  登錄組件的初步完善 106

9.4.1  登錄頁面 106

9.4.2  覆蓋Element UI樣式的正確寫法 108

9.4.3  書寫校驗規則 108

9.4.4  自定義校驗規則 109

9.4.5  校驗 109

9.4.6  企業級項目驗證 110

9.4.7  驗證碼圖片的獲取 111

9.5  封裝axios的攔截器 111

9.6  完善登錄模塊 112

9.7  錯誤提示及其統一處理方案 115

9.8  登錄成功後跳轉到首頁 117

9.9  經典三欄佈局解決方案 118

9.10  書寫路由守衛 120

9.11  手寫菜單欄 121

9.11.1  折疊“菜單”按鈕的初步規劃 121

9.11.2  菜單展開和折疊狀態的展示 122

9.11.3  是否折疊導航欄 123

9.11.4  修改Vuex中isNavCollapse的值 124

9.11.5  菜單欄折疊卡頓的問題 125

9.11.6  折疊過渡效果的實現 125

9.11.7  補充Logo和標題 126

9.11.8  定義初始數據導航 126

9.11.9  菜單實現路由跳轉 128

9.12  統一處理請求後的code==200的情況 129

9.13  動態生成菜單欄 131

9.13.1  請求獲取用戶菜單列表 131

9.13.2  分析思路 134

9.13.3  處理menuData數組 135

9.14  修改二級菜單欄的樣式補充 137

9.15  圖標處理 138

9.16  認證失敗處理 139

9.17  配置子路由（內容部分） 139

9.18  動態添加子路由規則 140

9.19  添加路由切換的過渡動畫 142

9.20  麵包屑處理 143

9.20.1  渲染和樣式初步處理 143

9.20.2  title的收集 144

9.20.3  在麵包屑組件中展示title 145

9.20.4  解決網址欄跳轉但視圖不更新的情況 145

9.21  404頁面的處理 146

9.22  刪除token 147

9.23  用戶信息處理 147

9.23.1  登錄成功獲取用戶信息 147

9.23.2  下拉菜單及退出登錄 150

9.24  標簽欄處理 151

9.24.1  初步佈局 151

9.24.2  組織tags數組 152

9.24.3  當前樣式的處理 153

9.24.4  跳轉處理 155

9.24.5  刪除標簽 155

9.24.6  右擊出現快捷菜單 156

9.24.7  菜單項現實邏輯的控制 156

9.24.8  靜動態路由的區分 158

9.24.9  關閉標簽欄 159

9.24.10  根據單擊的項目對tags進行操作 160

9.25  表格處理 161

9.26  分頁處理 164

9.27  導出文件與上傳文件的處理 165

9.27.1  導出文件 165

9.27.2  上傳文件 166

第10章  Git介紹 169

10.1  Git的基本使用 170

10.2  Git Flow工作流模型 174

10.3  Git拓展 176

第11章  項目二：大型PC商城 182

11.1  項目準備 182

11.2  網站數據請求模塊 183

11.3  頭部組件 186

11.3.1  版心樣式 186

11.3.2  頭部組件佈局 186

11.4  導航組件 188

11.4.1  基本佈局 188

11.4.2  搜索框佈局 189

11.4.3  路由配置及導航項當前樣式 190

11.5  登錄模塊佈局 192

11.5.1  模態窗口的書寫 192

11.5.2  設置單擊展示模態窗口 193

11.5.3  單擊關閉模態窗口 195

11.5.4  單擊標題欄的切換效果 196

11.5.5  表單基本佈局 197

11.6  拼圖驗證滑塊 199

11.7  單擊“獲取驗證碼”按鈕的邏輯 201

11.7.1  邏輯分析 201

11.7.2  判斷手機號格式 201

11.7.3  倒計時及其展示 202

11.7.4  連續單擊倒計時Bug 203

11.7.5  抽取工具函數 204

11.7.6  發起獲取驗證碼請求 205

11.7.7  請求成功回調函數的完善 206

11.8  手機號碼登錄邏輯分析 207

11.8.1  抽取前兩個驗證的代碼 207

11.8.2  發起登錄請求 208

11.8.3  登錄成功後的邏輯 209

11.8.4  購物車按鈕的佈局 210

11.8.5  購物車按鈕展示（登錄狀態）分析 211

11.9  提示組件的封裝 212

11.9.1  icon圖標的使用 212

11.9.2  Toast組件的初步封裝與使用 213

11.9.3  Toast組件展示 215

11.9.4  Toast組件的進場離場效果 216

11.9.5  封裝Toast的屬性 217

11.9.6  Toast組件自動關閉的處理 218

11.9.7  總結：提示框組件的使用 219

11.10  微信掃碼登錄——微信登錄二維碼的獲取與展示 220

11.10.1  獲取微信二維碼 220

11.10.2  微信二維碼樣式調整 220

11.11  微信掃碼登錄——用臨時票據code換取token 221

11.12  手機驗證碼登錄 223

11.13  路由監聽及其應用 223

11.14  組件重載 225

11.15  獲取登錄用戶信息 226

11.16  用戶信息渲染 227

11.17  刪除token後的用戶信息初始化 230

11.18  首頁佈局的套用 230

11.19  詳情頁的處理 240

11.20  單擊加入購物車 247

11.21  全部商品頁面 248

11.21.1  結構樣式套用 248

11.21.2  商品列表渲染 250

11.21.3  選項數據的分析和渲染 251

11.21.4  單擊選項，切換商品列表 252

11.21.5  搜索框事件 253

11.22  導航守衛 254

11.22.1  全局導航守衛 254

11.22.2  組件內部導航守衛 255

11.23  個人中心——購物車頁面 255

11.24  404處理 266

11.25  滾動到底部加載更多 266

11.26  跨域配置 269

11.27  項目環境變量配置 270

　　

　　

IV

V