本书是以实战为导向的前端开发教程，以技术社区网站项目为依托，系统讲解Vue.js框架的核心技术及现代前端工程化实践，涵盖从基础语法到项目部署的全流程技能。全书共六章：第一章奠定前端框架开发基础，涵盖Web前端技术发展概述、前端开发工具、Vue.js入门、前端UI框架入门及版本控制与代码托管；第二章深入基本指令，涵盖数据绑定及相关指令、条件渲染和列表渲染；第三章聚焦交互特性，解析事件处理、计算属性与侦听器；第四章以项目工程化为核心，讲解项目初始化、组件化开发与生命周期；第五章进阶到应用架构优化，探讨路由、组件与状态管理；第六章进行联调与部署实战，完成前后端联调、项目打包部署等生产级操作。

李丽，女，讲师，硕士，主讲《前端框架技术与应用》、《二维动画高级编程》等课程，该课程的课程负责人，承担教改项目1项，发表学术论文2篇，获得软件著作权7项，指导学生获得全国职业院校技能大赛"应用软件系统开发”赛项一等奖、浙江省职业院校技能大赛"应用软件系统开发”赛项一等奖、"移动应用开发”赛项二等奖，全国职业院校技能大赛"应用软件系统开发”赛项一等奖，"中国软件杯”大学生程序设计大赛全国总决赛二等奖，蓝桥杯全国软件和信息技术专业人才大赛浙江省赛区二等奖1个、三等奖4个。

第一章 前端框架开发基础 1
1.1 Web前端技术发展概述 2
1.1.1 前端技术演变 2
1.1.2 前端架构模式 3
1.1.3 单页面应用 5
习题1.1 6
任务1.1 前端框架技术调研 7
1.2 前端开发工具 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高效开发技巧 16
1.3 Vue.js入门 16
1.3.1 Vue.js简介 16
1.3.2 Vue.js脚本引入 17
1.3.3 Vue.js应用实例创建 18
习题1.3 19
任务1.3 开发个人主页 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 开发网站首页 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 开发注册和登录页面 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 开发个人中心页面 64
2.3 列表渲染 66
2.3.1 v-for指令 66
2.3.2 v-for指令与v-if指令 70
习题2.3 70
任务2.3 开发列表渲染功能 71
第三章 交互特性 73
3.1 事件处理 74
3.1.1 v-on指令 74
3.1.2 事件修饰符 76
3.1.3 按键修饰符 77
3.1.4 系统修饰符 78
习题3.1 79
任务3.1 开发商城页面 80
3.2 计算属性 81
3.2.1 特点和基本用法 81
3.2.2 与方法的比较 84
习题3.2 86
任务3.2 优化商城交互功能 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 项目创建 97
4.1.4 前端UI框架集成 100
习题4.1 101
任务4.1 搭建开发环境及创建项目 102
4.2 组件化开发 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 数据加载与用户体验优化 118
第五章 应用架构优化 119
5.1 路由 120
5.1.1 静态路由 120
5.1.2 动态路由 123
5.1.3 路由传参 125
5.1.4 嵌套路由 126
5.1.5 编程式导航 128
5.1.6 重定向 131
5.1.7 导航守卫 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 开发购物车子组件 144
5.3 状态管理 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 实现用户登录功能并保持用户状态 156
第六章 联调与部署 157
6.1 前后端联调 158
6.1.1 Axios简介 158
6.1.2 Axios基本用法 158
6.1.3 模拟后端接口 162
习题6.1 168
任务6.1 开发文章相关功能 169
6.2 项目打包部署 171
6.2.1 项目打包 171
6.2.2 基于Nginx部署 172
习题6.2 174
任务6.2 项目打包与本地部署 175
附录A 习题参考答案 176