第一章 前端框架開發(fā)基礎 1
1.1 Web前端技術發(fā)展概述 2
1.1.1 前端技術演變 2
1.1.2 前端架構模式 3
1.1.3 單頁面應用 5
習題1.1 6
任務1.1 前端框架技術調研 7
1.2 前端開發(fā)工具 8
1.2.1 VS Code簡介與安裝 8
1.2.2 VS Code界面介紹 8
1.2.3 VS Code常用插件 9
1.2.4 VS Code集成AI代碼工具 10
1.2.5 VS Code常用快捷鍵 14
習題1.2 14
任務1.2 掌握VS Code高效開發(fā)技巧 16
1.3 Vue.js入門 16
1.3.1 Vue.js簡介 16
1.3.2 Vue.js腳本引入 17
1.3.3 Vue.js應用實例創(chuàng)建 18
習題1.3 19
任務1.3 開發(fā)個人主頁 20
1.4 前端UI框架入門 22
1.4.1 Element Plus集成 22
1.4.2 Element Plus組件 24
1.4.3 Element Plus布局 30
習題1.4 36
任務1.4 開發(fā)網站首頁 37
1.5 版本控制與代碼托管 38
1.5.1 版本控制工具Git 39
1.5.2 代碼托管平臺Gitee 39
習題1.5 42
任務1.5 實現代碼托管 42
第二章 基本指令 44
2.1 數據綁定及相關指令 45
2.1.1 雙大括號文本插值 45
2.1.2 v-text指令 46
2.1.3 v-html指令 47
2.1.4 v-bind指令 48
2.1.5 v-model指令 51
習題2.1 55
任務2.1 開發(fā)注冊和登錄頁面 56
2.2 條件渲染 57
2.2.1 v-if指令 58
2.2.2 v-else指令 59
2.2.3 v-else-if指令 60
2.2.4 v-show指令 61
2.2.5 v-if指令與v-show指令 62
習題2.2 63
任務2.2 開發(fā)個人中心頁面 64
2.3 列表渲染 66
2.3.1 v-for指令 66
2.3.2 v-for指令與v-if指令 70
習題2.3 70
任務2.3 開發(fā)列表渲染功能 71
第三章 交互特性 73
3.1 事件處理 74
3.1.1 v-on指令 74
3.1.2 事件修飾符 76
3.1.3 按鍵修飾符 77
3.1.4 系統(tǒng)修飾符 78
習題3.1 79
任務3.1 開發(fā)商城頁面 80
3.2 計算屬性 81
3.2.1 特點和基本用法 81
3.2.2 與方法的比較 84
習題3.2 86
任務3.2 優(yōu)化商城交互功能 87
3.3 偵聽器 87
3.3.1 基本用法 87
3.3.2 深層偵聽器 89
習題3.3 91
任務3.3 集成表單驗證機制 91
第四章 項目工程化 92
4.1 項目初始化 93
4.1.1 包管理工具 93
4.1.2 腳手架 95
4.1.3 項目創(chuàng)建 97
4.1.4 前端UI框架集成 100
習題4.1 101
任務4.1 搭建開發(fā)環(huán)境及創(chuàng)建項目 102
4.2 組件化開發(fā) 102
4.2.1 單文件組件 103
4.2.2 API 104
4.2.3 響應式機制 106
4.2.4 調試工具 109
習題4.2 110
任務4.2 組件化重寫網站 111
4.3 生命周期 114
4.3.1 生命周期鉤子 114
4.3.2 生命周期鉤子的應用 114
習題4.3 117
任務4.3 數據加載與用戶體驗優(yōu)化 118
第五章 應用架構優(yōu)化 119
5.1 路由 120
5.1.1 靜態(tài)路由 120
5.1.2 動態(tài)路由 123
5.1.3 路由傳參 125
5.1.4 嵌套路由 126
5.1.5 編程式導航 128
5.1.6 重定向 131
5.1.7 導航守衛(wèi) 132
習題5.1 134
任務5.1 利用路由技術實現完整導航體系 136
5.2 深入組件 136
5.2.1 組件注冊及Props 136
5.2.2 組件事件 139
5.2.3 組件通信 140
習題5.2 143
任務5.2 開發(fā)購物車子組件 144
5.3 狀態(tài)管理 145
5.3.1 Pinia簡介 145
5.3.2 Pinia基本用法 147
5.3.3 Pinia核心概念 149
5.3.4 Pinia持久化存儲 152
習題5.3 155
任務5.3 實現用戶登錄功能并保持用戶狀態(tài) 156
第六章 聯調與部署 157
6.1 前后端聯調 158
6.1.1 Axios簡介 158
6.1.2 Axios基本用法 158
6.1.3 模擬后端接口 162
習題6.1 168
任務6.1 開發(fā)文章相關功能 169
6.2 項目打包部署 171
6.2.1 項目打包 171
6.2.2 基于Nginx部署 172
習題6.2 174
任務6.2 項目打包與本地部署 175
附錄A 習題參考答案 176