Vue 3企業(yè)級應(yīng)用開發(fā)實戰(zhàn)(微課版)
定 價:69.8 元
叢書名:Web開發(fā)人才培養(yǎng)系列叢書
- 作者:孫芳 梁大業(yè) 張晶
- 出版時間:2024/4/1
- ISBN:9787115631688
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁碼:
- 紙張:膠版紙
- 版次:
- 開本:16開
Vue是一款用于構(gòu)建用戶界面的漸進式框架,現(xiàn)已成為Web前端開發(fā)領(lǐng)域三大主流框架之一。2020年9月,Vue 3正式發(fā)布,目前其在國內(nèi)Web前端開發(fā)(尤其是手機App的HTML5頁面開發(fā))領(lǐng)域已被廣泛應(yīng)用。
本書共16章,內(nèi)容分為四部分,即Vue概述、Vue基礎(chǔ)、Vue生態(tài)和Vue實戰(zhàn),從基礎(chǔ)知識到實戰(zhàn)項目,全面系統(tǒng)地介紹Vue技術(shù),且涵蓋目前新一代企業(yè)級狀態(tài)管理庫Pinia和下一代前端構(gòu)建工具Vite。本書內(nèi)容由淺入深,實例豐富實用,實戰(zhàn)部分通過一個通用的Vue 3項目腳手架實例和一個基于Vue 3 + Vant的項目實例(易學(xué)、易用、易上手)來幫助讀者將所學(xué)知識更好地應(yīng)用到實際開發(fā)工作中,快速培養(yǎng)獨立完成基于Vue 3的企業(yè)級應(yīng)用開發(fā)與迭代能力。
本書可作為Web前端開發(fā)相關(guān)課程的教材,也可供廣大信息技術(shù)類專業(yè)的學(xué)習(xí)者參考使用,還可作為Web前端開發(fā)相關(guān)領(lǐng)域培訓(xùn)機構(gòu)的教材。
1. Web前端開發(fā)工程師團隊精心打磨新品力作。
2. 精選綜合實例,剖析工程代碼;緊跟前沿技術(shù),配套豐富資源。
3. 知識架構(gòu)合理,示例項目豐富,綜合實例升華,接軌企業(yè)應(yīng)用。
4. 配套PPT、教學(xué)大綱、教案、源代碼、習(xí)題答案及各種參考文件等教輔資源。
孫芳:
遼寧師范大學(xué)副教授,畢業(yè)于大連理工大學(xué)計算機系,CCF計算機應(yīng)用專業(yè)委員會委員,遼寧省大連市西崗區(qū)智慧聯(lián)盟特聘專家;常年從事高校計算機專業(yè)課程的一線教學(xué)工作,并具有多年海外跨國公司IT工作經(jīng)驗,主要從事軟件工程、Web開發(fā)、智能信息處理、多媒體信息安全等方面的研究;主持并參與多項課題,主編出版多部高校優(yōu)秀教材。
梁大業(yè):
騰訊前端架構(gòu)師,騰訊前端通道會長,騰訊技術(shù)委員會委員,騰訊安全委員會委員;專注于Web前端領(lǐng)域,主要負責(zé)前端架構(gòu)搭建技術(shù)選型,并且擁有多年前端開發(fā)實戰(zhàn)經(jīng)驗;參與編寫Web開發(fā)相關(guān)領(lǐng)域圖書多部。
【章名目錄】
第 1章 Vue前世今生
第 2章 第 一個Vue項目實例
第3章 Vue生命周期
第4章 Vue指令
第5章 Vue組件
第6章 計算屬性和偵聽器
第7章 樣式綁定和過渡動畫
第8章 混入
第9章 組合式API
第 10章 Vue Router
第 11章 Pinia—— 一個全新的狀態(tài)管理庫
第 12章 Vite——下一代前端構(gòu)建工具
第 13章 Axios—— 一個HTTP網(wǎng)絡(luò)請求庫
第 14章 Vue組件庫
第 15章 Vue 3+Vue Router+Vite+Pinia+Axios+Element Plus項目腳手架實例
第 16章 一個基于Vue 3+Vant的HTML5版考拉商城
【詳細目錄】
第 1章 Vue前世今生
1.1 Vue簡介 2
1.2 Vue產(chǎn)生的背景 3
1.2.1 jQuery一統(tǒng)天下的時代 3
1.2.2 從jQuery到Vue的思維轉(zhuǎn)變 4
1.3 Vue的學(xué)習(xí)方法 6
1.3.1 Vue前置知識的準(zhǔn)備 6
1.3.2 開發(fā)工具介紹 9
1.4 Vue 3的特點 11
1.5 本章小結(jié) 11
習(xí)題 12
第 2章 第 一個Vue項目實例
2.1 搭建開發(fā)環(huán)境 13
2.1.1 安裝Node.js 13
2.1.2 安裝Vue Devtools 15
2.2 創(chuàng)建Vue 3項目示例 17
2.2.1 創(chuàng)建一個單頁面項目 17
2.2.2 運行及構(gòu)建項目 18
2.3 詳解HelloWorld項目 20
2.3.1 整體項目結(jié)構(gòu) 20
2.3.2 src項目源文件目錄 20
2.3.3 項目主要文件源代碼詳解 21
2.4 本章小結(jié) 22
習(xí)題 22
上機實操 23
第3章 Vue生命周期
3.1 生命周期函數(shù) 25
3.1.1 鉤子函數(shù)詳細描述與使用場景 25
3.1.2 Vue 2與Vue 3生命周期鉤子函數(shù)對比 27
3.2 生命周期代碼示例 27
3.3 本章小結(jié) 29
習(xí)題 29
上機實操 30
第4章 Vue指令
4.1 Vue指令簡介 31
4.2 內(nèi)置指令 32
4.2.1 條件渲染 32
4.2.2 循環(huán)渲染 33
4.2.3 數(shù)據(jù)插入 34
4.2.4 屬性綁定 35
4.2.5 事件綁定 36
4.2.6 雙向數(shù)據(jù)綁定 38
4.2.7 插槽 39
4.2.8 性能提升相關(guān)指令 40
4.3 自定義指令 42
4.3.1 自定義指令使用場景 42
4.3.2 創(chuàng)建與使用自定義指令 42
4.3.3 生命周期鉤子函數(shù) 43
4.3.4 自定義指令應(yīng)用示例 44
4.4 本章小結(jié) 46
習(xí)題 47
上機實操 47
第5章 Vue組件
5.1 組件簡介 48
5.2 注冊組件與使用組件 50
5.2.1 注冊組件 50
5.2.2 使用組件 51
5.3 Props與組件間通信 53
5.3.1 Props 54
5.3.2 組件間通信 55
5.4 插槽 58
5.4.1 默認(rèn)插槽 58
5.4.2 具名插槽 59
5.4.3 作用域插槽 59
5.5 組件間切換 61
5.5.1 條件渲染 61
5.5.2 動態(tài)組件 62
5.6 內(nèi)置組件 63
5.6.1 Transition 63
5.6.2 Teleport 63
5.6.3 Suspense 64
5.6.4 Keep-alive 65
5.7 本章小結(jié) 66
習(xí)題 66
上機實操 67
第6章 計算屬性和偵聽器
6.1 計算屬性 68
6.1.1 計算屬性簡介 68
6.1.2 計算屬性與方法的對比 69
6.1.3 計算屬性的用法 70
6.1.4 計算屬性的使用示例 73
6.2 偵聽器 76
6.2.1 偵聽器簡介 76
6.2.2 偵聽器的用法 77
6.2.3 偵聽器的使用示例 80
6.3 本章小結(jié) 84
習(xí)題 85
上機實操 86
第7章 樣式綁定和過渡動畫
7.1 樣式綁定 87
7.1.1 :class指令 87
7.1.2 :style指令 89
7.1.3 動態(tài)綁定Class 90
7.1.4 動態(tài)綁定Style 90
7.1.5 動態(tài)綁定樣式對象 90
7.2 過渡動畫 91
7.2.1 基本用法 91
7.2.2 高級用法 93
7.2.3 應(yīng)用示例 96
7.3 本章小結(jié) 99
習(xí)題 99
上機實操 99
第8章 混入
8.1 混入簡介 100
8.2 混入的定義 100
8.3 混入的使用 101
8.4 混入的完整示例 101
8.5 混入選項的合并規(guī)則 102
8.6 混入的使用建議 104
8.7 本章小結(jié) 104
習(xí)題 104
上機實操 105
第9章 組合式API
9.1 使用組合式API的動機和優(yōu)勢 106
9.1.1 動機 106
9.1.2 優(yōu)勢 108
9.2 組合式API的核心概念 111
9.2.1 setup函數(shù) 111
9.2.2 reactive API 113
9.2.3 ref API 115
9.3 組合式API與混入比較 116
9.3.1 兩者的區(qū)別 116
9.3.2 代碼示例 116
9.4 本章小結(jié) 117
習(xí)題 118
上機實操 119
第 10章 Vue Router
10.1 Vue Router入門 121
10.1.1 前端路由的概述 121
10.1.2 Vue Router概述 122
10.1.3 Vue Router安裝與配置 123
10.2 靜態(tài)路由與動態(tài)路由 124
10.2.1 靜態(tài)路由 124
10.2.2 動態(tài)路由 126
10.2.3 路由傳參 127
10.3 路由守衛(wèi) 128
10.3.1 路由守衛(wèi)概述 128
10.3.2 全局前置守衛(wèi) 129
10.3.3 路由獨享守衛(wèi) 130
10.3.4 組件內(nèi)的守衛(wèi) 132
10.4 路由的過渡動畫 133
10.4.1 過渡動畫概述與分類 134
10.4.2 漸變過渡動畫 134
10.4.3 幻燈片過渡動畫 135
10.4.4 縮放過渡動畫 137
10.4.5 旋轉(zhuǎn)過渡動畫 138
10.4.6 自定義過渡動畫 140
10.5 本章小結(jié) 141
習(xí)題 142
上機實操 142
第 11章 Pinia—— 一個全新的狀態(tài)管理庫
11.1 認(rèn)識Pinia 143
11.1.1 狀態(tài)管理簡介 143
11.1.2 選擇Pinia的理由 143
11.2 安裝與配置 144
11.2.1 安裝Pinia 144
11.2.2 創(chuàng)建Pinia實例 144
11.2.3 定義Store 145
11.2.4 使用Store 145
11.2.5 提供Store 145
11.3 狀態(tài)管理基礎(chǔ) 146
11.3.1 創(chuàng)建和注冊Store 146
11.3.2 State和Getters 146
11.3.3 $patch 147
11.3.4 Actions 148
11.4 在Vue組件中使用Pinia 150
11.4.1 在組件中獲取狀態(tài) 150
11.4.2 使用$patch和Actions更新狀態(tài) 151
11.4.3 輔助函數(shù)和輔助Hook 151
11.5 高級技巧與實踐 153
11.5.1 異步操作與副作用處理 153
11.5.2 跨Store數(shù)據(jù)共享 154
11.5.3 插件開發(fā)和使用 155
11.5.4 單元測試Pinia應(yīng)用程序 156
11.5.5 完整實踐 156
11.6 本章小結(jié) 158
習(xí)題 159
上機實操 159
第 12章 Vite——下一代前端構(gòu)建工具
12.1 Vite概述 160
12.1.1 Vite的由來和特點 160
12.1.2 Vite與Vue 3結(jié)合的優(yōu)勢 160
12.2 環(huán)境搭建與項目創(chuàng)建 161
12.2.1 安裝與配置Vite 161
12.2.2 Vite項目結(jié)構(gòu)解析 162
12.2.3 Vite配置選項詳解 163
12.2.4 Vite項目開發(fā)與構(gòu)建 163
12.3 本章小結(jié) 164
習(xí)題 165
上機實操 165
第 13章 Axios—— 一個HTTP網(wǎng)絡(luò)請求庫
13.1 Axios概述 166
13.1.1 認(rèn)識Axios與Axios的優(yōu)勢 166
13.1.2 Axios的安裝與配置 167
13.1.3 發(fā)起請求與處理響應(yīng) 167
13.2 Vue 3中的Axios實例 170
13.2.1 在Vue組件中使用Axios 170
13.2.2 Axios結(jié)合Vue Router的異步加載數(shù)據(jù) 171
13.2.3 Pinia中的異步數(shù)據(jù)管理與Axios 171
13.3 Axios公共邏輯與封裝 173
13.3.1 創(chuàng)建可復(fù)用的Axios封裝 173
13.3.2 處理請求的Loading狀態(tài) 175
13.3.3 統(tǒng)一處理錯誤提示與日志記錄 176
13.3.4 優(yōu)化Axios封裝與配置 177
13.4 安全性與性能優(yōu)化 178
13.4.1 有關(guān)網(wǎng)絡(luò)請求的安全性 178
13.4.2 性能優(yōu)化 179
13.5 本章小結(jié) 179
習(xí)題 179
上機實操 180
第 14章 Vue組件庫
14.1 Element Plus 181
14.1.1 Element Plus簡介 181
14.1.2 Element Plus入門 182
14.1.3 Element Plus常用組件 185
14.1.4 Element Plus布局組件 193
14.1.5 Element Plus高級組件 196
14.1.6 項目實踐 —— 一個簡單的后臺管理系統(tǒng) 200
14.2 Vant 203
14.2.1 Vant簡介 203
14.2.2 Vant快速入門 203
14.2.3 Vant基礎(chǔ)組件 207
14.2.4 Vant布局組件 211
14.2.5 Vant業(yè)務(wù)組件 214
14.2.6 項目實踐——一個移動端購物車界面 220
14.3 本章小結(jié) 223
習(xí)題 224
上機實操 224
第 15章 Vue 3+Vue Router+Vite+Pinia+Axios+Element Plus項目腳手架實例
15.1 創(chuàng)建新的Vue 3項目 226
15.1.1 使用Vue 3腳手架創(chuàng)建新項目 226
15.1.2 安裝項目依賴包 227
15.2 集成Element Plus 228
15.3 集成Axios 229
15.4 多環(huán)境配置 232
15.5 項目結(jié)構(gòu)詳解 235
15.6 本章小結(jié) 236
習(xí)題 236
上機實操 236
第 16章 一個基于Vue 3+Vant的HTML5版考拉商城
16.1 商城前端架構(gòu)搭建 237
16.1.1 Vue 3與Vant集成 237
16.1.2 項目結(jié)構(gòu)詳解 243
16.2 項目公用文件 244
16.2.1 assets靜態(tài)資源文件目錄 244
16.2.2 common公用目錄 246
16.2.3 App.vue根組件 252
16.3 首頁 254
16.3.1 頭部搜索欄 254
16.3.2 輪播圖 256
16.3.3 功能導(dǎo)航模塊 257
16.3.4 新品上線模塊 258
16.3.5 熱門商品模塊 260
16.3.6 最新推薦模塊 261
16.3.7 效果優(yōu)化 262
16.3.8 底部導(dǎo)航欄 262
16.3.9 添加路由 264
16.4 登錄頁面和注冊頁面 264
16.4.1 添加路由 264
16.4.2 頭部導(dǎo)航欄 265
16.4.3 登錄頁面和注冊頁面模塊 266
16.5 “我的”頁面 272
16.5.1 首頁登錄狀態(tài)細節(jié) 272
16.5.2 添加路由 273
16.5.3 “我的”頁面模塊 273
16.6 商品列表頁面 275
16.6.1 添加路由 276
16.6.2 頭部搜索欄 276
16.6.3 Tabs欄 277
16.6.4 商品列表欄 278
16.6.5 頁面邏輯代碼實現(xiàn) 280
16.7 商品詳情頁面 282
16.7.1 添加路由 282
16.7.2 商品詳情模塊 282
16.7.3 底部工具欄 285
16.8 購物車頁面 288
16.8.1 添加路由 288
16.8.2 購物車列表模塊 289
16.8.3 底部結(jié)算模塊 293
16.9 地址管理頁面 294
16.9.1 地址列表頁面 294
16.9.2 編輯地址頁面 297
16.10 生成訂單頁面 300
16.10.1 添加路由 301
16.10.2 訂單接口 301
16.10.3 地址欄 301
16.10.4 商品列表模塊 303
16.10.5 生成訂單模塊 305
16.10.6 支付彈窗模塊 306
16.11 “我的訂單”頁面 307
16.11.1 創(chuàng)建頁面 307
16.11.2 定義路由 310
16.12 訂單詳情頁面 311
16.12.1 定義路由 311
16.12.2 創(chuàng)建頁面 311
16.13 分類頁面 315
16.13.1 定義路由 315
16.13.2 區(qū)域滾動組件 316
16.13.3 創(chuàng)建頁面 317
16.14 本章小結(jié) 319
習(xí)題 319
上機實操 320