Vue 3企業級應用開發實戰(微課版)

孫芳 梁大業 張晶

  • 出版商: 人民郵電
  • 出版日期: 2024-07-01
  • 定價: $419
  • 售價: 8.5$356
  • 語言: 簡體中文
  • 頁數: 320
  • ISBN: 7115631689
  • ISBN-13: 9787115631688
  • 相關分類: Vue.js
  • 下單後立即進貨 (約4週~6週)

  • Vue 3企業級應用開發實戰(微課版)-preview-1
  • Vue 3企業級應用開發實戰(微課版)-preview-2
Vue 3企業級應用開發實戰(微課版)-preview-1

相關主題

商品描述

Vue是一款用於構建用戶界面的漸進式框架,現已成為Web前端開發領域三大主流框架之一。2020年9月,Vue 3正式發布,目前其在國內Web前端開發(尤其是手機App的HTML5頁面開發)領域已被廣泛應用。

本書共16章,內容分為四部分,即Vue概述、Vue基礎、Vue生態和Vue實戰,從基礎知識到實戰項目,全面系統地介紹Vue技術,且涵蓋目前新一代企業級狀態管理庫Pinia和下一代前端構建工具Vite。本書內容由淺入深,實例豐富實用,實戰部分通過一個通用的Vue 3項目腳手架實例和一個基於Vue 3 + Vant的項目實例(易學、易用、易上手)來幫助讀者將所學知識更好地應用到實際開發工作中,快速培養獨立完成基於Vue 3的企業級應用開發與迭代能力。

本書可作為Web前端開發相關課程的教材,也可供廣大信息技術類專業的學習者參考使用,還可作為Web前端開發相關領域培訓機構的教材。

作者簡介

孙芳:

辽宁师范大学副教授,毕业于大连理工大学计算机系,CCF计算机应用专业委员会委员,辽宁省大连市西岗区智慧联盟特聘专家;常年从事高校计算机专业课程的一线教学工作,并具有多年海外跨国公司IT工作经验,主要从事软件工程、Web开发、智能信息处理、多媒体信息安全等方面的研究;主持并参与多项课题,主编出版多部高校优秀教材。

梁大业:

腾讯前端架构师,腾讯前端通道会长,腾讯技术委员会委员,腾讯安全委员会委员;专注于Web前端领域,主要负责前端架构搭建技术选型,并且拥有多年前端开发实战经验;参与编写Web开发相关领域图书多部。

目錄大綱

【章名目錄】

第 1章 Vue前世今生

第 2章 第 一個Vue項目實例

第3章 Vue生命周期

第4章 Vue指令

第5章 Vue組件

第6章 計算屬性和偵聽器

第7章 樣式綁定和過渡動畫

第8章 混入

第9章 組合式API

第 10章 Vue Router

第 11章 Pinia—— 一個全新的狀態管理庫

第 12章 Vite——下一代前端構建工具

第 13章 Axios—— 一個HTTP網絡請求庫

第 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產生的背景 3

1.2.1 jQuery一統天下的時代 3

1.2.2 從jQuery到Vue的思維轉變 4

1.3 Vue的學習方法 6

1.3.1 Vue前置知識的準備 6

1.3.2 開發工具介紹 9

1.4 Vue 3的特點 11

1.5 本章小結 11

習題 12

第 2章 第 一個Vue項目實例

2.1 搭建開發環境 13

2.1.1 安裝Node.js 13

2.1.2 安裝Vue Devtools 15

2.2 創建Vue 3項目示例 17

2.2.1 創建一個單頁面項目 17

2.2.2 運行及構建項目 18

2.3 詳解HelloWorld項目 20

2.3.1 整體項目結構 20

2.3.2 src項目源文件目錄 20

2.3.3 項目主要文件源代碼詳解 21

2.4 本章小結 22

習題 22

上機實操 23

第3章 Vue生命周期

3.1 生命周期函數 25

3.1.1 鉤子函數詳細描述與使用場景 25

3.1.2 Vue 2與Vue 3生命周期鉤子函數對比 27

3.2 生命周期代碼示例 27

3.3 本章小結 29

習題 29

上機實操 30

第4章 Vue指令

4.1 Vue指令簡介 31

4.2 內置指令 32

4.2.1 條件渲染 32

4.2.2 循環渲染 33

4.2.3 數據插入 34

4.2.4 屬性綁定 35

4.2.5 事件綁定 36

4.2.6 雙向數據綁定 38

4.2.7 插槽 39

4.2.8 性能提升相關指令 40

4.3 自定義指令 42

4.3.1 自定義指令使用場景 42

4.3.2 創建與使用自定義指令 42

4.3.3 生命周期鉤子函數 43

4.3.4 自定義指令應用示例 44

4.4 本章小結 46

習題 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 默認插槽 58

5.4.2 具名插槽 59

5.4.3 作用域插槽 59

5.5 組件間切換 61

5.5.1 條件渲染 61

5.5.2 動態組件 62

5.6 內置組件 63

5.6.1 Transition 63

5.6.2 Teleport 63

5.6.3 Suspense 64

5.6.4 Keep-alive 65

5.7 本章小結 66

習題 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 本章小結 84

習題 85

上機實操 86

第7章 樣式綁定和過渡動畫

7.1 樣式綁定 87

7.1.1 :class指令 87

7.1.2 :style指令 89

7.1.3 動態綁定Class 90

7.1.4 動態綁定Style 90

7.1.5 動態綁定樣式對象 90

7.2 過渡動畫 91

7.2.1 基本用法 91

7.2.2 高級用法 93

7.2.3 應用示例 96

7.3 本章小結 99

習題 99

上機實操 99

第8章 混入

8.1 混入簡介 100

8.2 混入的定義 100

8.3 混入的使用 101

8.4 混入的完整示例 101

8.5 混入選項的合並規則 102

8.6 混入的使用建議 104

8.7 本章小結 104

習題 104

上機實操 105

第9章 組合式API

9.1 使用組合式API的動機和優勢 106

9.1.1 動機 106

9.1.2 優勢 108

9.2 組合式API的核心概念 111

9.2.1 setup函數 111

9.2.2 reactive API 113

9.2.3 ref API 115

9.3 組合式API與混入比較 116

9.3.1 兩者的區別 116

9.3.2 代碼示例 116

9.4 本章小結 117

習題 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 靜態路由與動態路由 124

10.2.1 靜態路由 124

10.2.2 動態路由 126

10.2.3 路由傳參 127

10.3 路由守衛 128

10.3.1 路由守衛概述 128

10.3.2 全局前置守衛 129

10.3.3 路由獨享守衛 130

10.3.4 組件內的守衛 132

10.4 路由的過渡動畫 133

10.4.1 過渡動畫概述與分類 134

10.4.2 漸變過渡動畫 134

10.4.3 幻燈片過渡動畫 135

10.4.4 縮放過渡動畫 137

10.4.5 旋轉過渡動畫 138

10.4.6 自定義過渡動畫 140

10.5 本章小結 141

習題 142

上機實操 142

第 11章 Pinia—— 一個全新的狀態管理庫

11.1 認識Pinia 143

11.1.1 狀態管理簡介 143

11.1.2 選擇Pinia的理由 143

11.2 安裝與配置 144

11.2.1 安裝Pinia 144

11.2.2 創建Pinia實例 144

11.2.3 定義Store 145

11.2.4 使用Store 145

11.2.5 提供Store 145

11.3 狀態管理基礎 146

11.3.1 創建和註冊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 在組件中獲取狀態 150

11.4.2 使用$patch和Actions更新狀態 151

11.4.3 輔助函數和輔助Hook 151

11.5 高級技巧與實踐 153

11.5.1 異步操作與副作用處理 153

11.5.2 跨Store數據共享 154

11.5.3 插件開發和使用 155

11.5.4 單元測試Pinia應用程序 156

11.5.5 完整實踐 156

11.6 本章小結 158

習題 159

上機實操 159

第 12章 Vite——下一代前端構建工具

12.1 Vite概述 160

12.1.1 Vite的由來和特點 160

12.1.2 Vite與Vue 3結合的優勢 160

12.2 環境搭建與項目創建 161

12.2.1 安裝與配置Vite 161

12.2.2 Vite項目結構解析 162

12.2.3 Vite配置選項詳解 163

12.2.4 Vite項目開發與構建 163

12.3 本章小結 164

習題 165

上機實操 165

第 13章 Axios—— 一個HTTP網絡請求庫

13.1 Axios概述 166

13.1.1 認識Axios與Axios的優勢 166

13.1.2 Axios的安裝與配置 167

13.1.3 發起請求與處理響應 167

13.2 Vue 3中的Axios實例 170

13.2.1 在Vue組件中使用Axios 170

13.2.2 Axios結合Vue Router的異步加載數據 171

13.2.3 Pinia中的異步數據管理與Axios 171

13.3 Axios公共邏輯與封裝 173

13.3.1 創建可復用的Axios封裝 173

13.3.2 處理請求的Loading狀態 175

13.3.3 統一處理錯誤提示與日誌記錄 176

13.3.4 優化Axios封裝與配置 177

13.4 安全性與性能優化 178

13.4.1 有關網絡請求的安全性 178

13.4.2 性能優化 179

13.5 本章小結 179

習題 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 項目實踐 —— 一個簡單的後台管理系統 200

14.2 Vant 203

14.2.1 Vant簡介 203

14.2.2 Vant快速入門 203

14.2.3 Vant基礎組件 207

14.2.4 Vant佈局組件 211

14.2.5 Vant業務組件 214

14.2.6 項目實踐——一個移動端購物車界面 220

14.3 本章小結 223

習題 224

上機實操 224

第 15章 Vue 3+Vue Router+Vite+Pinia+Axios+Element Plus項目腳手架實例

15.1 創建新的Vue 3項目 226

15.1.1 使用Vue 3腳手架創建新項目 226

15.1.2 安裝項目依賴包 227

15.2 集成Element Plus 228

15.3 集成Axios 229

15.4 多環境配置 232

15.5 項目結構詳解 235

15.6 本章小結 236

習題 236

上機實操 236

第 16章 一個基於Vue 3+Vant的HTML5版考拉商城

16.1 商城前端架構搭建 237

16.1.1 Vue 3與Vant集成 237

16.1.2 項目結構詳解 243

16.2 項目公用文件 244

16.2.1 assets靜態資源文件目錄 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 功能導航模塊 257

16.3.4 新品上線模塊 258

16.3.5 熱門商品模塊 260

16.3.6 最新推薦模塊 261

16.3.7 效果優化 262

16.3.8 底部導航欄 262

16.3.9 添加路由 264

16.4 登錄頁面和註冊頁面 264

16.4.1 添加路由 264

16.4.2 頭部導航欄 265

16.4.3 登錄頁面和註冊頁面模塊 266

16.5 “我的”頁面 272

16.5.1 首頁登錄狀態細節 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 頁面邏輯代碼實現 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 底部結算模塊 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 創建頁面 307

16.11.2 定義路由 310

16.12 訂單詳情頁面 311

16.12.1 定義路由 311

16.12.2 創建頁面 311

16.13 分類頁面 315

16.13.1 定義路由 315

16.13.2 區域滾動組件 316

16.13.3 創建頁面 317

16.14 本章小結 319

習題 319

上機實操 320