第1篇 前端開(kāi)發(fā)第一步：夯實(shí)基礎(chǔ)
第1章 前端發(fā)展的幾個(gè)時(shí)代 2
1.1　附屬時(shí)代 2
1.1.1 前端的誕生 3
1.1.2 jQuery實(shí)現(xiàn)交互 3
1.2　分家時(shí)代 4
1.2.1 AJAX出現(xiàn) 5
1.2.2 前后端分離 5
1.2.3 三大框架出現(xiàn)并流行 6
1.3　工程時(shí)代 7
1.3.1 Node.js開(kāi)啟了前端工程 7
1.3.2 Webpack帶來(lái)了編譯 8
1.3.3 工程化體系持續(xù)完善 8
1.4　大前端時(shí)代 9
1.4.1 多端開(kāi)發(fā)的現(xiàn)狀 9
1.4.2 跨端開(kāi)發(fā)成為趨勢(shì) 10
1.4.3 一處代碼，多處運(yùn)行 10
1.5　Serverless時(shí)代 11
1.5.1 函數(shù)即服務(wù) 12
1.5.2 前后端一體化開(kāi)發(fā) 12
1.6　本章小結(jié) 13

第2章 前端“三駕馬車(chē)”，你真的掌握了嗎 14
2.1　HTML：搭建頁(yè)面的結(jié)構(gòu) 14
2.1.1 核心DOM體系 15
2.1.2 語(yǔ)義化元素 20
2.1.3 了解HTML 5 23
2.1.4 實(shí)現(xiàn)表單與驗(yàn)證 25
2.2　CSS：修飾頁(yè)面的布局和樣式 29
2.2.1 3種頁(yè)面布局方案 29
2.2.2 樣式與動(dòng)畫(huà)解析 34
2.2.3 CSS工程化 40
2.2.4 動(dòng)態(tài)值與響應(yīng)式 44
2.3　JavaScript：頁(yè)面運(yùn)行的核心原理 47
2.3.1 數(shù)據(jù)類(lèi)型與函數(shù) 47
2.3.2 變量與作用域 51
2.3.3 面向?qū)ο?53
2.3.4 事件循環(huán) 58
2.3.5 執(zhí)行上下文與this 61
2.4　本章小結(jié) 64
第3章 新時(shí)代的JavaScript 65
3.1　ES6+：下一代語(yǔ)法標(biāo)準(zhǔn) 65
3.1.1 變量與字符串的擴(kuò)展 66
3.1.2 對(duì)象的擴(kuò)展 69
3.1.3 數(shù)組的擴(kuò)展 73
3.1.4 函數(shù)的擴(kuò)展 76
3.1.5 異步編程方案 77
3.1.6 模塊體系 79
3.2　Node.js：服務(wù)端的JavaScript 81
3.2.1 Node.js基礎(chǔ) 81
3.2.2 Node.js的內(nèi)置模塊 85
3.2.3 Npm包管理 88
3.2.4 環(huán)境與環(huán)境變量 92
3.3　TypeScript：支持類(lèi)型的JavaScript 93
3.3.1 應(yīng)該使用TypeScript嗎 94
3.3.2 常用類(lèi)型全覽 95
3.3.3 接口與泛型 98
3.3.4 裝飾器的妙用 102
3.3.5 吃透tsconfig.json 105
3.4　本章小結(jié) 106
第2篇 掌握一個(gè)主流前端框架
第4章 Vue.js 3的基礎(chǔ)與核心 108
4.1　初識(shí)Vue.js 3 108
4.1.1 聲明式渲染 109
4.1.2 組件系統(tǒng) 110
4.2　Vue.js的基礎(chǔ)概念 112
4.2.1 狀態(tài)與方法 112
4.2.2 條件與列表 114
4.2.3 模板語(yǔ)法 116
4.2.4 計(jì)算屬性與監(jiān)聽(tīng)器 118
4.2.5 事件處理 120
4.2.6 表單雙向綁定 121
4.2.7 DOM操作 122
4.3　Vue.js的組件體系 123
4.3.1 組件狀態(tài)：data與props 123
4.3.2 組件的自定義事件 125
4.3.3 組件的生命周期 127
4.3.4 使用插槽動(dòng)態(tài)渲染模板 129
4.3.5 使用異步組件提升性能 130
4.3.6 在組件中自定義v-model 131
4.4　Vue.js 3的核心：組合式API 132
4.4.1 選項(xiàng)式API與組合式API 132
4.4.2 理解響應(yīng)式狀態(tài) 133
4.4.3 生命周期鉤子 135
4.4.4 計(jì)算屬性與監(jiān)聽(tīng)器 136
4.4.5 渲染方式：模板與JSX 138
4.4.6 與TypeScript集成 140
4.5　Vue全家桶指南 143
4.5.1 路由管理——Vue Router 144
4.5.2 狀態(tài)管理——Pinia 147
4.5.3 統(tǒng)一請(qǐng)求管理——Axios 151
4.6　本章小結(jié) 156
第5章 【實(shí)戰(zhàn)】使用Vue.js 3編寫(xiě)一個(gè)備忘錄應(yīng)用 157
5.1　需求：備忘錄需求分析 157
5.1.1 分析首頁(yè) 158
5.1.2 分析登錄頁(yè) 159
5.2　設(shè)計(jì)：搭建項(xiàng)目的基礎(chǔ)結(jié)構(gòu) 159
5.2.1 使用腳手架創(chuàng)建項(xiàng)目 160
5.2.2 接入U(xiǎn)I框架Element Plus 160
5.2.3 使用Vue Router配置頁(yè)面路由 161
5.2.4 使用Pinia做全局狀態(tài)管理 162
5.2.5 編寫(xiě)公共組件和公共函數(shù) 162
5.3　開(kāi)發(fā)：業(yè)務(wù)功能編碼 164
5.3.1 開(kāi)發(fā)登錄頁(yè) 164
5.3.2 編寫(xiě)用戶Store 166
5.3.3 開(kāi)發(fā)首頁(yè) 169
5.3.4 編寫(xiě)首頁(yè)Store 171
5.3.5 開(kāi)發(fā)文件夾列表組件 173
5.3.6 開(kāi)發(fā)備忘錄列表組件 175
5.3.7 開(kāi)發(fā)編輯器組件 177
5.3.8 實(shí)現(xiàn)備忘錄編輯 179
5.4　本章小結(jié) 181
第3篇 從3個(gè)方向提升技術(shù)實(shí)力
第6章 構(gòu)建工具Vite——將新技術(shù)的代碼轉(zhuǎn)換為瀏覽器認(rèn)識(shí)的語(yǔ)法 183
6.1　認(rèn)識(shí)構(gòu)建工具 183
6.1.1 老牌工具——Webpack 184
6.1.2 輕量工具——Rollup 185
6.1.3 下一代工具——Vite 186
6.2　在項(xiàng)目中使用Vite 187
6.2.1 使用腳手架創(chuàng)建項(xiàng)目 187
6.2.2 Vite的基礎(chǔ)命令 188
6.3　Vite功能介紹 189
6.3.1 裸模塊解析 189
6.3.2 依賴的預(yù)構(gòu)建 190
6.3.3 模塊熱替換 191
6.3.4 TypeScript轉(zhuǎn)譯 192
6.3.5 JSX/TSX轉(zhuǎn)譯 193
6.3.6 CSS資源處理 193
6.3.7 靜態(tài)資源導(dǎo)入 195
6.4　Vite配置介紹 197
6.4.1 多環(huán)境配置 197
6.4.2 通用配置 198
6.4.3 開(kāi)發(fā)服務(wù)器配置 201
6.4.4 打包構(gòu)建配置 203
6.4.5 性能優(yōu)化配置 205
6.5　Vite插件系統(tǒng) 206
6.5.1 Vite官方插件 207
6.5.2 Vite社區(qū)插件 208
6.5.3 Rollup插件 209
6.6　本章小結(jié) 211

第7章 利用瀏覽器解決在開(kāi)發(fā)中遇到的問(wèn)題 212
7.1　瀏覽器的組成與渲染原理 212
7.1.1 瀏覽器的組成 212
7.1.2 渲染引擎的工作原理 214
7.1.3 重排與重繪 215
7.2　開(kāi)發(fā)者工具 217
7.2.1 打開(kāi)DevTools 218
7.2.2 DevTools的結(jié)構(gòu) 219
7.3　“元素”面板 222
7.3.1 DOM樹(shù)的查看與調(diào)試 222
7.3.2 CSS的查看與調(diào)試 223
7.4　“控制臺(tái)”面板 226
7.4.1 打印日志 226
7.4.2 執(zhí)行JavaScript代碼 229
7.4.3 其他console功能 230
7.5　“源代碼”面板 232
7.5.1 查看網(wǎng)頁(yè)源碼 233
7.5.2 斷點(diǎn)調(diào)試 234
7.5.3 作用域、調(diào)用棧、事件監(jiān)聽(tīng) 236
7.6　“網(wǎng)絡(luò)”面板 238
7.6.1 捕獲網(wǎng)絡(luò)請(qǐng)求 238
7.6.2 請(qǐng)求的篩選過(guò)濾 239
7.6.3 單條請(qǐng)求詳解 240
7.6.4 網(wǎng)絡(luò)功能設(shè)置 241
7.7　“應(yīng)用”面板 242
7.7.1 Cookie管理 243
7.7.2 WebStorage管理 244
7.8　本章小結(jié) 245

第8章 前端性能優(yōu)化全覽 246
8.1　認(rèn)識(shí)性能優(yōu)化 246
8.1.1 從渲染原理開(kāi)始 247
8.1.2 網(wǎng)絡(luò)層面的優(yōu)化 247
8.1.3 渲染層面的優(yōu)化 249
8.2　檢測(cè)性能問(wèn)題 250
8.2.1 主觀感知性能 251
8.2.2 利用“性能”面板檢測(cè)性能 251
8.2.3 利用Lighthouse檢測(cè)性能 254
8.2.4 項(xiàng)目打包后的性能檢測(cè) 256
8.3　首屏渲染優(yōu)化 257
8.3.1 首屏變慢的原因 257
8.3.2 優(yōu)化措施一：路由懶加載 258
8.3.3 優(yōu)化措施二：Gzip壓縮 258
8.3.4 優(yōu)化措施三：服務(wù)端渲染 260
8.4　網(wǎng)絡(luò)資源優(yōu)化 261
8.4.1 圖片異步加載 262
8.4.2 高效利用緩存 263
8.5　交互性能優(yōu)化 264
8.5.1 防抖與節(jié)流：減少事件觸發(fā) 265
8.5.2 異步更新：減少重復(fù)渲染 267
8.5.3 減少DOM操作 268
8.6　本章小結(jié) 271
第4篇 光有技術(shù)不夠，還要懂團(tuán)隊(duì)協(xié)作
第9章 Git命令與協(xié)作指南 273
9.1　初識(shí)Git 273
9.1.1 什么是版本控制 273
9.1.2 Git的工作原理 274
9.1.3 安裝Git 276
9.2　Git的基礎(chǔ)操作 277
9.2.1 Git的基礎(chǔ)配置 277
9.2.2 文件跟蹤與暫存區(qū) 278
9.2.3 創(chuàng)建和查看提交 279
9.2.4 撤銷(xiāo)與回滾 280
9.2.5 合并提交 282
9.2.6 管理標(biāo)簽與別名 283
9.3　分支管理 285
9.3.1 分支簡(jiǎn)介 286
9.3.2 分支的創(chuàng)建、刪除和切換 286
9.3.3 分支的合并 287
9.3.4 分支的管理策略 289
9.4　遠(yuǎn)程倉(cāng)庫(kù)GitHub 290
9.4.1 創(chuàng)建遠(yuǎn)程倉(cāng)庫(kù) 290
9.4.2 代碼的推送和拉取 291
9.4.3 管理遠(yuǎn)程的Tag 293
9.4.4 查看遠(yuǎn)程提交信息 293
9.5　Git的高級(jí)操作 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 調(diào)試——git bisect 299
9.6　本章小結(jié) 301
第10章 代碼規(guī)范實(shí)踐 302
10.1　認(rèn)識(shí)代碼規(guī)范 302
10.1.1 為什么需要代碼規(guī)范 303
10.1.2 代碼規(guī)范包含的內(nèi)容 303
10.2　代碼規(guī)范落地 304
10.2.1 制定規(guī)范 304
10.2.2 檢測(cè)和統(tǒng)一規(guī)范 312
10.3　工具一：ESLint 313
10.3.1 安裝與初始化 314
10.3.2 配置文件解析 314
10.3.3 代碼檢查 316
10.3.4 自定義規(guī)范 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提交的規(guī)范 324
10.6.1 制定規(guī)范 324
10.6.2 驗(yàn)證規(guī)范 325
10.7　本章小結(jié) 326
第5篇 綜合實(shí)戰(zhàn)——全棧開(kāi)發(fā)“仿稀土掘金”項(xiàng)目
第11章 項(xiàng)目需求分析與API開(kāi)發(fā)基礎(chǔ) 328
11.1　項(xiàng)目需求分析 328
11.1.1 首頁(yè)模塊 329
11.1.2 文章模塊 329
11.1.3 沸點(diǎn)模塊 331
11.1.4 用戶中心 332
11.1.5 消息中心 332
11.2　使用Serverless云函數(shù)創(chuàng)建接口 333
11.2.1 注冊(cè)阿里云，開(kāi)通函數(shù)計(jì)算 334
11.2.2 創(chuàng)建服務(wù)，編寫(xiě)項(xiàng)目所需的云函數(shù) 335
11.3　API開(kāi)發(fā)基礎(chǔ)——Express框架的使用 340
11.3.1 Express框架的基本結(jié)構(gòu) 340
11.3.2 使用路由創(chuàng)建API接口 342
11.3.3 理解中間件，搞懂框架的原理 345
11.3.4 統(tǒng)一錯(cuò)誤處理，提升應(yīng)用的健壯性 346
11.4　API開(kāi)發(fā)基礎(chǔ)——數(shù)據(jù)庫(kù)操作 347
11.4.1 MongoDB的基本概念 347
11.4.2 實(shí)現(xiàn)增、查、改、刪操作 348
11.4.3 高級(jí)查詢——聚合管道 350
11.4.4 使用mongoose操作數(shù)據(jù)庫(kù) 351
11.5　本章小結(jié) 355
第12章 后端API接口開(kāi)發(fā)與部署 356
12.1　開(kāi)發(fā)用戶管理接口 356
12.1.1 用戶注冊(cè)接口 358
12.1.2 用戶登錄接口 360
12.1.3 修改用戶信息接口 362
12.1.4 更新掘力值、點(diǎn)贊量和閱讀量 363
12.2　開(kāi)發(fā)文章管理接口 364
12.2.1 創(chuàng)建與發(fā)布文章接口 366
12.2.2 修改與刪除文章接口 367
12.2.3 文章的點(diǎn)贊和收藏接口 368
12.2.4 文章評(píng)論接口 371
12.2.5 文章列表接口 376
12.2.6 文章詳情接口 378
12.3　開(kāi)發(fā)沸點(diǎn)管理接口 379
12.3.1 創(chuàng)建沸點(diǎn)接口 381
12.3.2 沸點(diǎn)列表接口 381
12.3.3 沸點(diǎn)評(píng)論與點(diǎn)贊接口 382
12.3.4 沸點(diǎn)刪除接口 383
12.4　開(kāi)發(fā)消息與關(guān)注接口 383
12.4.1 未讀消息接口 384
12.4.2 關(guān)注與取消關(guān)注接口 386
12.4.3 關(guān)注者列表接口 388
12.5　項(xiàng)目完善與部署 389
12.5.1 添加JWT登錄驗(yàn)證 389
12.5.2 使用分頁(yè)查詢列表 392
12.5.3 統(tǒng)一處理路由異常 394
12.5.4 將代碼發(fā)布到云函數(shù)中 395
12.6　本章小結(jié) 397
第13章 前端頁(yè)面功能開(kāi)發(fā)與部署 398
13.1　搭建項(xiàng)目框架和頁(yè)面結(jié)構(gòu) 398
13.1.1 創(chuàng)建項(xiàng)目、安裝依賴和修改目錄結(jié)構(gòu) 398
13.1.2 添加全局樣式和代碼規(guī)范配置 400
13.1.3 添加統(tǒng)一路由配置、統(tǒng)一請(qǐng)求配置 402
13.1.4 初始化Git倉(cāng)庫(kù)并添加相關(guān)配置 404
13.2　開(kāi)發(fā)全局公共組件 405
13.2.1 開(kāi)發(fā)根組件App.vue 406
13.2.2 開(kāi)發(fā)頭部組件 407
13.2.3 開(kāi)發(fā)登錄組件 409
13.2.4 開(kāi)發(fā)編輯器組件 412
13.3　開(kāi)發(fā)首頁(yè) 414
13.3.1 開(kāi)發(fā)文章分類(lèi)子組件 414
13.3.2 開(kāi)發(fā)文章列表子組件 415
13.3.3 創(chuàng)建文章Store，定義狀態(tài)和方法 416
13.3.4 創(chuàng)建首頁(yè)入口組件，組合各個(gè)子組件 417
13.4　開(kāi)發(fā)文章詳情頁(yè) 419
13.4.1 開(kāi)發(fā)文章的點(diǎn)贊、收藏功能 419
13.4.2 開(kāi)發(fā)Markdown渲染組件 420
13.4.3 開(kāi)發(fā)文章內(nèi)容展示模塊 421
13.4.4 開(kāi)發(fā)文章作者和目錄模塊 422
13.5　開(kāi)發(fā)用戶中心頁(yè) 423
13.5.1 開(kāi)發(fā)用戶基本信息模塊 423
13.5.2 展示用戶的文章和沸點(diǎn)數(shù)據(jù) 424
13.5.3 開(kāi)發(fā)用戶的個(gè)人成就模塊 425
13.6　開(kāi)發(fā)消息中心頁(yè) 426
13.6.1 開(kāi)發(fā)消息類(lèi)型tab標(biāo)簽 426
13.6.2 開(kāi)發(fā)消息列表模塊 427
13.7　開(kāi)發(fā)文章編輯發(fā)布頁(yè) 428
13.7.1 導(dǎo)入編輯器，編寫(xiě)頁(yè)面基本結(jié)構(gòu) 428
13.7.2 添加發(fā)布彈框，編輯發(fā)布選項(xiàng) 430
13.7.3 監(jiān)聽(tīng)文本編輯，實(shí)現(xiàn)自動(dòng)保存 431
13.8　開(kāi)發(fā)沸點(diǎn)頁(yè) 432
13.8.1 開(kāi)發(fā)沸點(diǎn)圈子組件 433
13.8.2 創(chuàng)建沸點(diǎn)Store，定義狀態(tài)和方法 433
13.8.3 開(kāi)發(fā)沸點(diǎn)列表組件，展示和操作沸點(diǎn) 434
13.8.4 開(kāi)發(fā)沸點(diǎn)入口組件，新增創(chuàng)建沸點(diǎn)模塊 435
13.9　項(xiàng)目打包、部署與解析 437
13.9.1 打包項(xiàng)目并上傳到服務(wù)器上 437
13.9.2 使用Nginx配置項(xiàng)目域名并解析 437
13.10　本章小結(jié) 438