《前端開發實戰派——Vue.js 3+Node.js+Serverless+Git》是電子工業出版社出版圖書，作者楊成功。
基本介紹
- 中文名：前端開發實戰派——Vue.js 3+Node.js+Serverless+Git
- 作者：楊成功
- 出版時間：2024年1月
- 出版社：電子工業出版社
- 頁數：456 頁
- ISBN：9787121469671
- 定價：128 元
- 開本：16 開
內容簡介,圖書目錄,作者簡介,
內容簡介
《前端開發實戰派——Vue.js 3+Node.js+Serverless+Git》從實戰的角度出發，提煉並總結項目開發中需要掌握的前端知識，既可以為前端開發初學者提供清晰的學習路徑，又可以為具有3～5年經驗的開發者提供進階的方向。
《前端開發實戰派——Vue.js 3+Node.js+Serverless+Git》包括5篇。第1篇介紹前端基礎，包括前端“三駕馬車”（HTML、CSS、JavaScript）和新時代的JavaScript（ES6+、Node.js、TypeScript）；第2篇介紹前端框架，圍繞Vue.js 3的基礎知識點和Vue全家桶展開介紹，並使用Vue.js 3實戰開發一個備忘錄項目；第3篇與第4篇介紹前端中級和高級知識（構建工具Vite、瀏覽器高階調試、性能最佳化、Git協作、代碼規範）在項目開發中的套用；第5篇全棧開發“仿稀土掘金”項目，幫助讀者通過實戰將書中的知識融會貫通。
《前端開發實戰派——Vue.js 3+Node.js+Serverless+Git》內容由淺入深，將理論與實戰相結合。讀者如果已經掌握了“HTML + CSS + JavaScript”基礎，那么學習本書可以快速打牢基礎，並逐步完善自己的前端知識體系，最終具備中級和高級前端與全棧開發的能力。
圖書目錄
第1篇 前端開發第一步：夯實基礎
第1章 前端發展的幾個時代 2
1.1 附屬時代 2
1.1.1 前端的誕生 3
1.1.2 jQuery實現互動 3
1.2 分家時代 4
1.2.1 AJAX出現 5
1.2.2 前後端分離 5
1.2.3 三大框架出現並流行 6
1.3 工程時代 7
1.3.1 Node.js開啟了前端工程 7
1.3.2 Webpack帶來了編譯 8
1.3.3 工程化體系持續完善 8
1.4 大前端時代 9
1.4.1 多端開發的現狀 9
1.4.2 跨端開發成為趨勢 10
1.4.3 一處代碼，多處運行 10
1.5 Serverless時代 11
1.5.1 函式即服務 12
1.5.2 前後端一體化開發 12
1.6 本章小結 13
第2章 前端“三駕馬車”，你真的掌握了嗎 14
2.1 HTML：搭建頁面的結構 14
2.1.1 核心DOM體系 15
2.1.2 語義化元素 20
2.1.3 了解HTML 5 23
2.1.4 實現表單與驗證 25
2.2 CSS：修飾頁面的布局和樣式 29
2.2.1 3種頁面布局方案 29
2.2.2 樣式與動畫解析 34
2.2.3 CSS工程化 40
2.2.4 動態值與回響式 44
2.3 JavaScript：頁面運行的核心原理 47
2.3.1 數據類型與函式 47
2.3.2 變數與作用域 51
2.3.3 面向對象 53
2.3.4 事件循環 58
2.3.5 執行上下文與this 61
2.4 本章小結 64
第3章 新時代的JavaScript 65
3.1 ES6+：下一代語法標準 65
3.1.1 變數與字元串的擴展 66
3.1.2 對象的擴展 69
3.1.3 數組的擴展 73
3.1.4 函式的擴展 76
3.1.5 異步編程方案 77
3.1.6 模組體系 79
3.2 Node.js：服務端的JavaScript 81
3.2.1 Node.js基礎 81
3.2.2 Node.js的內置模組 85
3.2.3 Npm包管理 88
3.2.4 環境與環境變數 92
3.3 TypeScript：支持類型的JavaScript 93
3.3.1 應該使用TypeScript嗎 94
3.3.2 常用類型全覽 95
3.3.3 接口與泛型 98
3.3.4 裝飾器的妙用 102
3.3.5 吃透tsconfig.json 105
3.4 本章小結 106
第2篇 掌握一個主流前端框架
第4章 Vue.js 3的基礎與核心 108
4.1 初識Vue.js 3 108
4.1.1 聲明式渲染 109
4.1.2 組件系統 110
4.2 Vue.js的基礎概念 112
4.2.1 狀態與方法 112
4.2.2 條件與列表 114
4.2.3 模板語法 116
4.2.4 計算屬性與監聽器 118
4.2.5 事件處理 120
4.2.6 表單雙向綁定 121
4.2.7 DOM操作 122
4.3 Vue.js的組件體系 123
4.3.1 組件狀態：data與props 123
4.3.2 組件的自定義事件 125
4.3.3 組件的生命周期 127
4.3.4 使用插槽動態渲染模板 129
4.3.5 使用異步組件提升性能 130
4.3.6 在組件中自定義v-model 131
4.4 Vue.js 3的核心：組合式API 132
4.4.1 選項式API與組合式API 132
4.4.2 理解回響式狀態 133
4.4.3 生命周期鉤子 135
4.4.4 計算屬性與監聽器 136
4.4.5 渲染方式：模板與JSX 138
4.4.6 與TypeScript集成 140
4.5 Vue全家桶指南 143
4.5.1 路由管理——Vue Router 144
4.5.2 狀態管理——Pinia 147
4.5.3 統一請求管理——Axios 151
4.6 本章小結 156
第5章 【實戰】使用Vue.js 3編寫一個備忘錄套用 157
5.1 需求：備忘錄需求分析 157
5.1.1 分析首頁 158
5.1.2 分析登錄頁 159
5.2 設計：搭建項目的基礎結構 159
5.2.1 使用腳手架創建項目 160
5.2.2 接入UI框架Element Plus 160
5.2.3 使用Vue Router配置頁面路由 161
5.2.4 使用Pinia做全局狀態管理 162
5.2.5 編寫公共組件和公共函式 162
5.3 開發：業務功能編碼 164
5.3.1 開發登錄頁 164
5.3.2 編寫用戶Store 166
5.3.3 開發首頁 169
5.3.4 編寫首頁Store 171
5.3.5 開發資料夾列表組件 173
5.3.6 開發備忘錄列表組件 175
5.3.7 開發編輯器組件 177
5.3.8 實現備忘錄編輯 179
5.4 本章小結 181
第3篇 從3個方向提升技術實力
第6章 構建工具Vite——將新技術的代碼轉換為瀏覽器認識的語法 183
6.1 認識構建工具 183
6.1.1 老牌工具——Webpack 184
6.1.2 輕量工具——Rollup 185
6.1.3 下一代工具——Vite 186
6.2 在項目中使用Vite 187
6.2.1 使用腳手架創建項目 187
6.2.2 Vite的基礎命令 188
6.3 Vite功能介紹 189
6.3.1 裸模組解析 189
6.3.2 依賴的預構建 190
6.3.3 模組熱替換 191
6.3.4 TypeScript轉譯 192
6.3.5 JSX/TSX轉譯 193
6.3.6 CSS資源處理 193
6.3.7 靜態資源導入 195
6.4 Vite配置介紹 197
6.4.1 多環境配置 197
6.4.2 通用配置 198
6.4.3 開發伺服器配置 201
6.4.4 打包構建配置 203
6.4.5 性能最佳化配置 205
6.5 Vite外掛程式系統 206
6.5.1 Vite官方外掛程式 207
6.5.2 Vite社區外掛程式 208
6.5.3 Rollup外掛程式 209
6.6 本章小結 211
第7章 利用瀏覽器解決在開發中遇到的問題 212
7.1 瀏覽器的組成與渲染原理 212
7.1.1 瀏覽器的組成 212
7.1.2 渲染引擎的工作原理 214
7.1.3 重排與重繪 215
7.2 開發者工具 217
7.2.1 打開DevTools 218
7.2.2 DevTools的結構 219
7.3 “元素”面板 222
7.3.1 DOM樹的查看與調試 222
7.3.2 CSS的查看與調試 223
7.4 “控制台”面板 226
7.4.1 列印日誌 226
7.4.2 執行JavaScript代碼 229
7.4.3 其他console功能 230
7.5 “原始碼”面板 232
7.5.1 查看網頁源碼 233
7.5.2 斷點調試 234
7.5.3 作用域、調用棧、事件監聽 236
7.6 “網路”面板 238
7.6.1 捕獲網路請求 238
7.6.2 請求的篩選過濾 239
7.6.3 單條請求詳解 240
7.6.4 網路功能設定 241
7.7 “套用”面板 242
7.7.1 Cookie管理 243
7.7.2 WebStorage管理 244
7.8 本章小結 245
第8章 前端性能最佳化全覽 246
8.1 認識性能最佳化 246
8.1.1 從渲染原理開始 247
8.1.2 網路層面的最佳化 247
8.1.3 渲染層面的最佳化 249
8.2 檢測性能問題 250
8.2.1 主觀感知性能 251
8.2.2 利用“性能”面板檢測性能 251
8.2.3 利用Lighthouse檢測性能 254
8.2.4 項目打包後的性能檢測 256
8.3 首屏渲染最佳化 257
8.3.1 首屏變慢的原因 257
8.3.2 最佳化措施一：路由懶載入 258
8.3.3 最佳化措施二：Gzip壓縮 258
8.3.4 最佳化措施三：服務端渲染 260
8.4 網路資源最佳化 261
8.4.1 圖片異步載入 262
8.4.2 高效利用快取 263
8.5 互動性能最佳化 264
8.5.1 防抖與節流：減少事件觸發 265
8.5.2 異步更新：減少重複渲染 267
8.5.3 減少DOM操作 268
8.6 本章小結 271
第4篇 光有技術不夠，還要懂團隊協作
第9章 Git命令與協作指南 273
9.1 初識Git 273
9.1.1 什麼是版本控制 273
9.1.2 Git的工作原理 274
9.1.3 安裝Git 276
9.2 Git的基礎操作 277
9.2.1 Git的基礎配置 277
9.2.2 檔案跟蹤與暫存區 278
9.2.3 創建和查看提交 279
9.2.4 撤銷與回滾 280
9.2.5 合併提交 282
9.2.6 管理標籤與別名 283
9.3 分支管理 285
9.3.1 分支簡介 286
9.3.2 分支的創建、刪除和切換 286
9.3.3 分支的合併 287
9.3.4 分支的管理策略 289
9.4 遠程倉庫GitHub 290
9.4.1 創建遠程倉庫 290
9.4.2 代碼的推送和拉取 291
9.4.3 管理遠程的Tag 293
9.4.4 查看遠程提交信息 293
9.5 Git的高級操作 295
9.5.1 變基——git rebase 295
9.5.2 揀選——git cherry-pick 297
9.5.3 暫存——git stash 298
9.5.4 檢索——git grep 298
9.5.5 調試——git bisect 299
9.6 本章小結 301
第10章 代碼規範實踐 302
10.1 認識代碼規範 302
10.1.1 為什麼需要代碼規範 303
10.1.2 代碼規範包含的內容 303
10.2 代碼規範落地 304
10.2.1 制定規範 304
10.2.2 檢測和統一規範 312
10.3 工具一：ESLint 313
10.3.1 安裝與初始化 314
10.3.2 配置檔案解析 314
10.3.3 代碼檢查 316
10.3.4 自定義規範 317
10.4 工具二：Prettier 318
10.4.1 安裝與配置 319
10.4.2 格式化代碼 320
10.5 工具三：VSCode 321
10.5.1 使用外掛程式 321
10.5.2 編輯器的配置 322
10.5.3 共享配置 323
10.6 Git提交的規範 324
10.6.1 制定規範 324
10.6.2 驗證規範 325
10.7 本章小結 326
第5篇 綜合實戰——全棧開發“仿稀土掘金”項目
第11章 項目需求分析與API開發基礎 328
11.1 項目需求分析 328
11.1.1 首頁模組 329
11.1.2 文章模組 329
11.1.3 沸點模組 331
11.1.4 用戶中心 332
11.1.5 訊息中心 332
11.2 使用Serverless雲函式創建接口 333
11.2.1 註冊阿里雲，開通函式計算 334
11.2.2 創建服務，編寫項目所需的雲函式 335
11.3 API開發基礎——Express框架的使用 340
11.3.1 Express框架的基本結構 340
11.3.2 使用路由創建API接口 342
11.3.3 理解中間件，搞懂框架的原理 345
11.3.4 統一錯誤處理，提升套用的健壯性 346
11.4 API開發基礎——資料庫操作 347
11.4.1 MongoDB的基本概念 347
11.4.2 實現增、查、改、刪操作 348
11.4.3 高級查詢——聚合管道 350
11.4.4 使用mongoose運算元據庫 351
11.5 本章小結 355
第12章 後端API接口開發與部署 356
12.1 開發用戶管理接口 356
12.1.1 用戶註冊接口 358
12.1.2 用戶登錄接口 360
12.1.3 修改用戶信息接口 362
12.1.4 更新掘力值、點讚量和閱讀量 363
12.2 開發文章管理接口 364
12.2.1 創建與發布文章接口 366
12.2.2 修改與刪除文章接口 367
12.2.3 文章的點讚和收藏接口 368
12.2.4 文章評論接口 371
12.2.5 文章列表接口 376
12.2.6 文章詳情接口 378
12.3 開發沸點管理接口 379
12.3.1 創建沸點接口 381
12.3.2 沸點列表接口 381
12.3.3 沸點評論與點讚接口 382
12.3.4 沸點刪除接口 383
12.4 開發訊息與關注接口 383
12.4.1 未讀訊息接口 384
12.4.2 關注與取消關注接口 386
12.4.3 關注者列表接口 388
12.5 項目完善與部署 389
12.5.1 添加JWT登錄驗證 389
12.5.2 使用分頁查詢列表 392
12.5.3 統一處理路由異常 394
12.5.4 將代碼發布到雲函式中 395
12.6 本章小結 397
第13章 前端頁面功能開發與部署 398
13.1 搭建項目框架和頁面結構 398
13.1.1 創建項目、安裝依賴和修改目錄結構 398
13.1.2 添加全局樣式和代碼規範配置 400
13.1.3 添加統一路由配置、統一請求配置 402
13.1.4 初始化Git倉庫並添加相關配置 404
13.2 開發全局公共組件 405
13.2.1 開發根組件App.vue 406
13.2.2 開發頭部組件 407
13.2.3 開發登錄組件 409
13.2.4 開發編輯器組件 412
13.3 開發首頁 414
13.3.1 開發文章分類子組件 414
13.3.2 開發文章列表子組件 415
13.3.3 創建文章Store，定義狀態和方法 416
13.3.4 創建首頁入口組件，組合各個子組件 417
13.4 開發文章詳情頁 419
13.4.1 開發文章的點讚、收藏功能 419
13.4.2 開發Markdown渲染組件 420
13.4.3 開發文章內容展示模組 421
13.4.4 開發文章作者和目錄模組 422
13.5 開發用戶中心頁 423
13.5.1 開發用戶基本信息模組 423
13.5.2 展示用戶的文章和沸點數據 424
13.5.3 開發用戶的個人成就模組 425
13.6 開發訊息中心頁 426
13.6.1 開發訊息類型tab標籤 426
13.6.2 開發訊息列表模組 427
13.7 開發文章編輯發布頁 428
13.7.1 導入編輯器，編寫頁面基本結構 428
13.7.2 添加發布彈框，編輯發布選項 430
13.7.3 監聽文本編輯，實現自動保存 431
13.8 開發沸點頁 432
13.8.1 開發沸點圈子組件 433
13.8.2 創建沸點Store，定義狀態和方法 433
13.8.3 開發沸點列表組件，展示和操作沸點 434
13.8.4 開發沸點入口組件，新增創建沸點模組 435
13.9 項目打包、部署與解析 437
13.9.1 打包項目並上傳到伺服器上 437
13.9.2 使用Nginx配置項目域名並解析 437
13.10 本章小結 438
作者簡介
楊成功
資深前端工程師、全棧工程師
