Vue.js 3+TypeScript從入門到項目實踐

第1篇  基礎知識

第1章  初識Vue.js 2

1.1  Vue簡介 2

1.1.1  Vue的誕生與發展 2

1.1.2  Vue版本的區別 4

1.1.3  前端框架的選擇 4

1.2  從零開始搭建Vue開發環境 5

1.2.1  安裝Node.js和NPM 5

1.2.2  安裝Git 7

1.2.3  安裝Vue CLI 7

1.2.4  安裝Visual Studio Code 8

1.2.5  安裝Vue輔助編碼插件 10

1.3  第一個Vue程序 11

1.3.1  Hello Vue實例解析 11

1.3.2  Vue的目錄結構 12

1.3.3  使用Vue CLI創建項目 13

1.3.4  使用Vite創建項目 15

1.3.5  使用CDN創建項目 16

1.3.6  如何高效地學習Vue 17

1.4  豐富的界面體驗：探索Vue UI庫 18

1.4.1  構建精美的界面：Element-Plus庫簡介 18

1.4.2  借助Ant Design Vue進行快速開發 19

1.4.3  打造輕巧的應用：認識Vant 3組件庫 19

1.4.4  跨平臺開發利器：uni-app框架簡介 19

1.5  小結 21

第2章  TypeScript基礎知識 22

2.1  TypeScript簡介 23

2.1.1  動態語言與靜態語言 23

2.1.2  搭建開發環境 23

2.2  基礎數據類型 26

2.2.1  布爾類型 26

2.2.2  數字類型 26

2.2.3  字符串類型 27

2.2.4  數組類型與元祖類型 27

2.2.5  枚舉類型 27

2.2.6  any類型 28

2.2.7  void類型 28

2.2.8  null與undefined類型 29

2.2.9  never類型 29

2.3  函數 29

2.3.1  函數的使用 29

2.3.2  構造函數 30

2.3.3  可選參數 30

2.3.4  默認參數 31

2.3.5  箭頭函數 31

2.4  類 32

2.4.1  屬性與方法 32

2.4.2  類的繼承 33

2.4.3  類的實現接口 33

2.4.4  權限修飾符 34

2.5  泛型 36

2.5.1  泛型示例 36

2.5.2  泛型接口 37

2.5.3  泛型類 37

2.5.4  泛型約束 38

2.6  交叉類型與聯合類型 39

2.6.1  交叉類型 39

2.6.2  聯合類型 40

2.7  小結 40

第3章  Vue的基本指令 41

3.1  Mustache語法 41

3.2  常用指令 42

3.2.1  v-if指令 42

3.2.2  v-show指令 43

3.2.3  v-for指令 44

3.2.4  v-text指令 45

3.2.5  v-pre指令 45

3.2.6  v-cloak指令 46

3.2.7  v-html指令 46

3.2.8  v-once指令 47

3.2.9  v-on指令 48

3.2.10  v-bind指令 49

3.3  v-model詳解 50

3.3.1  v-model的基本用法 50

3.3.2  v-model修飾符 52

3.4  小結 54

第4章  CSS樣式綁定 55

4.1  Class屬性綁定 55

4.1.1  綁定對象 55

4.1.2  綁定計算屬性 56

4.1.3  綁定數組 57

4.2  Style屬性綁定 59

4.2.1  綁定對象 59

4.2.2  綁定數組 60

4.2.3  自動前綴與樣式多值 61

4.3  CSS預處理器 61

4.3.1  使用Sass 61

4.3.2  嵌套寫法 62

4.3.3  定義變量 63

4.3.4  模塊系統 64

4.3.5  混合指令 64

4.3.6  樣式繼承 65

4.4  綜合案例：計算器的實現 66

4.5  小結 69

第5章  數據響應式基礎 70

5.1  數據響應式的實現 70

5.1.1  Vue 2中的數據響應式 71

5.1.2  Vue 3中的數據響應式 71

5.1.3  Proxy和Object.defineProperty的區別 72

5.2  聲明方法 73

5.2.1  Dom更新時機 74

5.2.2  深層響應 75

5.3  計算屬性 76

5.3.1  computed的基本用法 76

5.3.2  computed與methods的區別 78

5.3.3  computed的讀寫 79

5.4  偵聽器watch 81

5.4.1  watch的基本用法 82

5.4.2  深層偵聽器 83

5.4.3  即時回調的偵聽器 86

5.4.4  computed和watch的區別 87

5.5  綜合案例：購物車的實現 88

5.6  小結 92

第6章  組件化開發 93

6.1  組件的構成 93

6.1.1  Vue中的組件 93

6.1.2  組件化思想 95

6.2  組件的基本用法 95

6.2.1  定義一個組件 96

6.2.2  使用組件 98

6.2.3  全局組件 99

6.2.4  局部組件 100

6.3  Vue的生命周期 101

6.3.1  生命周期的基本用法 101

6.3.2  父子組件的生命周期 106

6.4  組件的通信方式 108

6.4.1  使用props和emit函數實現父子組件通信 108

6.4.2  使用Mitt實現組件間的事件通信 110

6.4.3  使用Provide和Inject函數實現跨級通信 112

6.5  綜合練習：待辦列表 114

6.5.1  待辦項組件的開發 114

6.5.2  製作待辦列表頁 116

6.5.3  添加列表項組件的開發 118

6.6  小結 121

第2篇  進階提升

第7章  HTTP網絡請求 124

7.1  Axios網絡請求庫 124

7.1.1  發送第一條網絡請求 125

7.1.2  使用測試接口調試網絡請求 126

7.2  HTTP基礎知識 128

7.2.1  常見的請求類型與用途 128

7.2.2  解讀HTTP狀態碼的含義 130

7.2.3  設置請求頭 131

7.2.4  一次完整的網絡請求過程 133

7.3  HTTP與安全的HTTPS 133

7.3.1  HTTPS簡介 133

7.3.2  HTTPS的工作原理 134

7.3.3  申請HTTPS證書 134

7.3.4  HTTPS未全面普及的原因 135

7.4  跨域問題及其解決方案 136

7.4.1  跨域請求的成因與相關問題 136

7.4.2  使用JSONP實現跨域數據請求 137

7.4.3  借助反向代理解決跨域問題 138

7.5  綜合案例：封裝Axios 139

7.6  小結 141

第8章  使用Vue Router構建單頁應用 142

8.1  路由的基本用法 142

8.1.1  使用RouterLink創建導航鏈接 144

8.1.2  使用RouterView渲染路由頁面 146

8.1.3  動態路由 146

8.1.4  嵌套路由 148

8.1.5  路由懶加載 149

8.2  路由的跳轉與傳參 150

8.2.1  路由的跳轉 150

8.2.2  路由的傳參 151

8.3  路由守衛 155

8.3.1  前置守衛：導航前的權限檢查 155

8.3.2  解析守衛：導航中的數據解析 156

8.3.3  後置守衛：導航後的邏輯處理 157

8.4  實戰練習：路由權限控制 158

8.4.1  搭建項目 158

8.4.2  製作用戶頁 159

8.4.3  製作登錄頁 162

8.4.4  路由權限 164

8.5  小結 166

第9章  Vuex狀態管理與應用調優 167

9.1  Vuex的基本用法 167

9.2  Vuex的核心概念 170

9.2.1  State：共享狀態數據 170

9.2.2  Getter：計算派生狀態 170

9.2.3  Mutation：同步修改狀態 171

9.2.4  Action：分發與處理異步任務 171

9.2.5  Module：模塊化組織狀態 171

9.3  Vuex的使用技巧 172

9.3.1  狀態持久化 172

9.3.2  使用瀏覽器插件調試Vuex 174

9.4  使用NVM管理NPM的版本 176

9.4.1  NVM的安裝方法 176

9.4.2  NVM的常用指令 177

9.5  實戰練習：使用Vuex處理登錄信息 178

9.5.1  搭建項目 178

9.5.2  製作登錄彈窗 179

9.5.3  處理登錄狀態 182

9.6  小結 185

第10章  項目構建利器——Webpack 186

10.1  認識Webpack 186

10.2  Webpack的主要概念 187

10.2.1  入口：構建起點與模塊依賴 187

10.2.2  輸出：構建結果的路徑與命名 188

10.2.3  loader加載器：處理各類資源轉換 188

10.2.4  插件：優化構建流程與結果 188

10.2.5  模式：指定構建環境與優化策略 188

10.2.6  瀏覽器的兼容性與運行環境要求 189

10.3  Webpack的使用技巧 189

10.3.1  代碼拆分 189

10.3.2  懶加載 190

10.3.3  緩存 191

10.3.4  Tree Shaking：消除無用代碼 191

10.3.5  Module Federation：跨項目資源共享 191

10.4  配置babel-loader 192

10.4.1  安裝與使用babel-loader 192

10.4.2  自定義loader 194

10.4.3  註意事項 195

10.5  使用Webpack配置Vue項目 196

10.5.1  初始化項目 196

10.5.2  配置loader和plugin 197

10.5.3  設置環境變量和模式 198

10.5.4  實現代碼拆分和懶加載 198

10.5.5  使用vue.config.js管理Webpack 199

10.6  小結 199

第11章  搭建後台模擬環境 201

11.1  前後端分離 201

11.2  Postman的安裝與使用 202

11.2.1  Postman的安裝 202

11.2.2  Postman的使用 204

11.3  json-server的安裝與使用 204

11.3.1  json-server的安裝與配置 205

11.3.2  json-server的基本用法 207

11.4  實戰練習：使用json-server實現增、刪、改、查操作 209

11.4.1  建立與配置項目 209

11.4.2  查詢與刪除數據 210

11.4.3  新增與編輯數據 214

11.5  小結 217

第3篇  項目實戰

第12章  商城後台管理系統——項目設計與框架搭建 220

12.1  項目設計 220

12.2  項目起步 222

12.2.1  框架選型 223

12.2.2  創建項目 225

12.2.3  自動化導入組件 228

12.2.4  封裝網絡請求 228

12.3  路由構建 229

12.3.1  組件的建立 229

12.3.2  路由的配置 231

12.4  系統設置 235

12.5  用戶管理 237

12.5.1  用戶登錄 237

12.5.2  用戶註冊 239

12.5.3  權限管理 240

12.6  小結 244

第13章  商城後台管理系統——功能模塊的實現 245

13.1  資產盤點 245

13.1.1  資產概況 245

13.1.2  數據分析 250

13.2  商品管理 253

13.2.1  商品查詢 253

13.2.2  商品添加 255

13.2.3  商品編輯 257

13.3  訂單管理 260

13.4  庫存管理 262

13.4.1  庫存查詢 262

13.4.2  庫存編輯 264

13.5  消息管理 266

13.5.1  消息分類管理 266

13.5.2  意見反饋管理 268

13.6  小結 274