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