JavaScript前端框架应用实践教程（基于Vue 3.x）

紧跟技术前沿

全面解析Vue 3.x新特性，涵盖组合式API、Pinia状态管理等核心技术

理实深度融合

理论讲解与丰富案例深度结合，通过阶段实践项目促进知识向技能转化

项目驱动教学

以多个实际项目贯穿全书，内容由浅入深，培养完整项目开发实战能力

前 言

在当今快速发展的前端开发领域，Vue.js凭借其简洁易用、高效灵活的特性，已成为构建现代Web应用的主流框架之一。Vue 3.x作为Vue.js的最新主要版本，优化和引入了一系列令人瞩目的新特性，极大地提升了开发体验与应用性能，进一步巩固了其在前端开发中的地位。

本书为帮助广大读者快速掌握Vue 3.x这一强大工具而编写。无论是刚踏入前端开发领域的初学者，还是希望从Vue旧版本升级，或是对Vue 3.x新特性感兴趣的开发者，本书都能提供全面、系统且实用的指导。

从内容编排来看，本书遵循循序渐进的原则，从Vue 3.x的基础知识讲起，逐步深入高级应用与实战项目。开篇，引领读者了解Vue 3.x及其环境搭建，通过对前端框架发展脉络梳理、Vue前端框架概述、Vue 3.x新特性深度剖析，以及掌握开发环境搭建与工具配置的方法，帮助读者顺利开启Vue 3.x之旅；随后，详细阐述模板语法与响应式基础、组件化开发基础与进阶等Vue 3.x的核心概念与技术，通过丰富的阶段案例，让读者深入理解并熟练运用Vue 3.x；随着学习的深入，会介绍路由与导航（Vue Router）、状态管理、UI组件库、模板语法与响应式基础在实际项目中不可或缺的知识模块，使读者能够构建功能完备、体验流畅的Web应用。最后，通过一个综合项目实战—新闻管理系统开发，将之前所学知识融会贯通，培养读者解决实际问题的能力，积累项目开发经验。

本书具有以下突出特点。

 紧跟技术前沿：专注于Vue 3.x的最新特性与最佳实践，涵盖组合式API、Pinia状态管理等新功能，确保读者所学知识与当前行业发展保持同步。

 理实深度融合：每章不仅有清晰、易懂的理论讲解，还配备大量精心设计的代码示例与实践案例。读者在学习理论知识后，能立即通过实践加深理解，将知识转化为实际技能。

 项目驱动教学：以多个实际项目贯穿全书，从简单的任务管理器到复杂的新闻管理系统，让读者在项目开发过程中掌握Vue 3.x的应用技巧，提升项目实战能力。

 体系全面系统：全面覆盖Vue 3.x开发的各个方面，从基础语法到高级架构，从前端界面到后端数据交互，为读者构建完整的知识框架。

本书是由多所院校与行业企业共同合作编写的高职软件技术专业校企合作教材，参与编写单位包括武汉软件工程职业学院、黑龙江外国语学院、黑龙江省网络空间研究中心、武汉长江计算科技有限公司及北京亿信华辰软件有限责任公司。本书旨在融合理论教学与行业实践，反映当前前端技术发展动向，满足高职教育对高素质技术技能人才培养的需求。为了更好地辅助读者学习，本书还提供丰富的配套资源，包括源代码、微课视频、PPT课件等。读者可通过相关渠道获取，获得更加高效、便捷的学习体验。

本书由李礼、吴海天、刘颖担任主编，曹廷、邱圣玮、袁振涛、关婷婷、吴梦婷担任副主编，参与编写工作的还有余璐和吴琦。在编写过程中，编写团队结合一线教学经验与行业前沿技术，对内容进行了反复研讨与修改。但由于技术发展迅速及编者水平有限，书中难免存在疏漏与不足之处，恳请广大读者、教育界同仁及行业专家不吝指正，以便在后续版本中不断完善。

衷心希望本书能成为读者学习Vue 3.x的得力助手，帮助读者在前端开发领域不断进步，创造出优秀的Web应用作品。在学习过程中，若遇到任何问题或有宝贵的意见、建议，欢迎随时指正和交流。祝愿各位读者在前端开发的道路上一帆风顺，收获满满！

编 者

2025年6月

前言
第1部分 基 础 篇
第1章 Vue 3.x概述与环境搭建 2
1.1 前端框架发展脉络梳理 2
1.1.1 早期前端框架的兴起与特点 2
1.1.2 主流前端框架的演进历程 2
1.1.3 前端框架发展对开发模式的影响 3
1.2 Vue前端框架概述 4
1.2.1 Vue在前端开发体系里的核心地位 4
1.2.2 Vue的发展历程与特性 5
1.2.3 Vue前端框架的特性 5
1.2.4 Vue与单页应用的紧密关联 6
1.3 Vue 3.x新特性深度剖析 7
1.3.1 组合式API的原理与优势 7
1.3.2 组合式API在实际开发中的
应用场景 7
1.3.3 Vue 3.x的性能优化策略与实现 8
1.3.4 性能优化对应用体验的提升效果 8
1.4 开发环境搭建与工具配置 9
1.4.1 Node.js环境及第三方包管理
工具的安装 9
1.4.2 Vite构建工具的安装与基础配置 11
1.4.3 VS Code编辑器及其插件的安装
与配置优化 14
1.4.4 Vue DevTools的安装与功能介绍 15
1.4.5 Vue 3.x项目的目录结构 15
本章小结 16
练习1 16
第2章 模板语法与响应式基础 19
2.1 文本插值 19
2.1.1 基础插值语法 19
2.1.2 插值中的JavaScript表达式 19
2.2 响应式数据：ref()与reactive() 20
2.2.1 ref()的使用 20
2.2.2 reactive()的使用 21
2.2.3 ref()与reactive()对比 21
2.3 内置指令 22
2.3.1 内容渲染指令：v-text、v-html 22
2.3.2 条件渲染指令：v-if与v-show 22
2.3.3 列表渲染指令：v-for 24
2.3.4 属性绑定指令：v-bind 27
2.3.5 v-bind指令绑定样式属性 29
2.3.6 事件处理指令：v-on 33
2.3.7 事件修饰符 34
2.3.8 双向数据绑定指令：v-model 39
2.4 计算属性与侦听器 44
2.4.1 选项式API中的计算属性
与侦听器 45
2.4.2 组合式API中的计算属性
与侦听器 48
2.4.3 计算属性和侦听器对比使用建议 52
2.5 选项式API和组合式API 53
2.6 阶段案例—任务管理器 56
2.6.1 案例说明 56
2.6.2 案例开发文档 57
本章小结 62
练习2 62
第3章 组件化开发基础 64
3.1 组件的注册和引用 64
3.1.1 全局注册的原理与使用场景 64
3.1.2 局部注册的特点及配置方式 65
3.1.3 异步组件注册的实现与优势 65
3.1.4 在模板中引用组件的标准语法 66
3.1.5 模块导入与组件引用的关联 66
3.2 单文件组件（SFC）结构 67
3.2.1 SFC的基本文件组成 67
3.2.2 SFC中script部分的配置选项 67
3.2.3 SFC的样式作用域与深度选择器 68
3.2.4 SFC的编译原理与工具链支持 69
3.3 组件之间的通信 70
3.3.1 父组件向子组件传值 70
3.3.2 使用props接收父组件数据 70
3.3.3 props的类型校验与默认值设置 71
3.3.4 单向数据流原则与数据传递机制 71
3.3.5 子组件向父组件传值 72
3.3.6 通过自定义事件触发数据传递 72
3.3.7 $emit()方法的使用与事件参数传递 73
3.3.8 跨级组件之间的数据传递 74
3.3.9 Provide/Inject API的原理与使用 74
3.4 阶段案例—用户信息管理系统 75
3.4.1 案例说明 75
3.4.2 案例开发文档 77
本章小结 83
练习3 84
第4章 组件化开发进阶 86
4.1 动态组件 86
4.1.1 使用标签实现动态
组件切换 86
4.1.2 动态组件的属性绑定与事件处理 86
4.1.3 动态组件的动态加载与异步渲染 88
4.1.4 KeepAlive的作用与工作原理 88
4.1.5 include与exclude属性的使用 88
4.1.6 缓存组件的生命周期钩子函数变化 90
4.2 组件的生命周期 91
4.2.1 组件的生命周期和生命周期钩子
函数 91
4.2.2 组件创建阶段的生命周期钩子函数 91
4.2.3 组件挂载阶段的生命周期钩子函数 92
4.2.4 组件更新阶段的生命周期钩子函数 93
4.2.5 组件销毁阶段的生命周期钩子函数 97
4.2.6 父子组件生命周期钩子函数的
执行顺序 98
4.3 插槽 100
4.3.1 插槽的基本概念与默认内容 100
4.3.2 具名插槽的定义与使用 101
4.3.3 具名插槽在复杂布局中的应用 102
4.3.4 作用域插槽的数据传递与渲染 103
4.3.5 作用域插槽在列表渲染中的应用 104
4.3.6 动态插槽的应用场景与实现 106
4.4 阶段案例—用户评论系统 107
4.4.1 案例说明 107
4.4.2 案例开发文档 109
本章小结 117
练习4 118

第2部分 进 阶 篇

第5章 路由与导航（Vue Router） 122
5.1 Vue Router基础认知 122
5.1.1 路由在Vue应用中的核心作用 122
5.1.2 Vue Router的发展与特点 122
5.1.3 Vue Router与SPA的关系 123
5.2 基础路由配置与使用 124
5.2.1 Vue Router的安装 124
5.2.2 路由实例的创建与使用 124
5.2.3 路由重定向与别名设置 126
5.2.4 嵌套路由的实现与应用场景 128
5.3 动态路由与参数处理 131
5.3.1 动态路由的定义与匹配规则 131
5.3.2 动态路由参数的获取与响应式
处理 132
5.3.3 动态路由的使用场景与实战案例 134
5.4 命名路由与编程式导航 136
5.4.1 命名路由的定义与优势 136
5.4.2 通过命名路由实现导航跳转 137
5.4.3 编程式导航API详解 137
5.4.4 编程式导航的使用案例 139
5.5 导航守卫与路由鉴权 142
5.5.1 全局导航守卫 142
5.5.2 路由独享守卫与组件内守卫 143
5.5.3 路由鉴权的实现原理与常用方案 147
5.5.4 基于导航守卫的权限控制实战 148
5.6 阶段案例—后台管理系统 151
5.6.1 案例说明 151
5.6.2 案例开发文档 154
本章小结 162
练习5 163
第6章 状态管理 165
6.1 Vuex与Pinia概述 165
6.1.1 状态管理在Vue应用中的作用 165
6.1.2 Vuex的发展历程与应用场景 165
6.1.3 Pinia的优势及替代Vuex的趋势 166
6.2 Vuex基础使用 166
6.2.1 Vuex的安装配置 166
6.2.2 Vuex核心概念 168
6.2.3 Vuex在Vue 3.x项目中的具体
使用案例 170
6.3 Pinia核心概念与基础应用 174
6.3.1 Pinia的核心特性解析 174
6.3.2 Pinia的安装与初始化 175
6.3.3 创建和使用Pinia store 176
6.3.4 state：定义与响应式数据管理 178
6.3.5 getters：数据计算与缓存机制 179
6.3.6 actions：异步操作与业务逻辑
处理 180
6.4 Pinia的高级应用 183
6.4.1 Pinia的持久化存储实现方案 183
6.4.2 Pinia的模块化管理策略 184
6.4.3 大型项目中Pinia的架构设计
与最佳实践 188
6.5 阶段案例—商品购物车案例 191
6.5.1 案例说明 191
6.5.2 案例开发文档 193
本章小结 201
练习6 201

第3部分 实 践 篇

第7章 UI组件库 204
7.1 UI组件库基础认知 204
7.1.1 UI组件库在前端开发中的
核心作用 204
7.1.2 主流UI组件库对比分析 204
7.1.3 选择UI组件库的关键因素 205
7.2 Element Plus基础应用 205
7.2.1 安装与配置 205
7.2.2 常用基础组件 208
7.2.3 布局组件 215
7.3 Vant移动端组件库 219
7.3.1 移动端适配基础 219
7.3.2 常用移动端组件 221
7.3.3 交互组件 225
7.4 主题定制与国际化 227
7.4.1 主题样式修改 227
7.4.2 国际化配置 229
7.5 阶段案例—后台管理系统UI搭建 232
7.5.1 案例说明 232
7.5.2 案例开发文档 233
本章小结 238
练习7 238
第8章 网络请求与项目架构 241
8.1 Axios基础与进阶 241
8.1.1 Axios在Vue项目中的作用
与优势 241
8.1.2 Axios的安装与基本使用 242
8.1.3 深入理解Axios拦截器 243
8.1.4 Axios的高级配置与定制 245
8.2 API模块化设计与实践 247
8.2.1 API模块化的必要性与设计原则 247
8.2.2 基于Axios的API模块划分
与实现 248
8.2.3 API模块间的协作与数据共享 250
8.2.4 API模块化在项目中的应用案例 251
8.3 项目架构中的网络请求优化 253
8.3.1 网络请求性能优化策略 253
8.3.2 网络请求与状态管理的结合 257
8.3.3 错误处理与用户反馈机制 259
8.4 阶段案例—Axios网络请求案例 266
8.4.1 案例说明 266
8.4.2 案例开发文档 268
本章小结 282
练习8 282
第9章 综合项目实战—新闻管理系统
开发 285
9.1 项目概述 285
9.2 项目功能概述 285
9.2.1 前端功能模块 285
9.2.2 后端功能模块 288
9.3 技术实现要点 289
9.3.1 前端技术 289
9.3.2 后端技术 289
9.4 模块交互流程 289
9.4.1 用户登录流程 289
9.4.2 文章发布流程 289
9.4.3 分类编辑流程 290
9.5 项目亮点 290
本章小结 290
练习9 290
参考文献 291

1. 光纤通信中的物理现象及应用实例 [钟昆 董加强 著]
2. 数字化转型中高校外语教育创新 [吴丽 著]
3. 中国通信工业协会教育专委会2024年会议论文集 [主编 中国通信工业协会教育专委]
4. 系统规划与管理师真题及模考卷精析（适用机考） [主编 薛大龙]
5. 机械制图习题集 [主编 于景福]
6. 机械制图 [主编 于景福]
7. OPC：多智能体团队搭建与应用指南 [何伟　明鉴　著]
8. OPC：多智能体协同与自动化 [何伟　孟伟坡　著]
9. 统驭工程 [姜汉龙　陈百顺　著]
10. 电子技术（第三版） [主编 江亚群 姜燕]
11. 航空复合材料基础 [主编　杨琴　王磊]
12. 网络工程师案例分析专项特训（适配第6版考纲） [夏杰 编著]
13. IPTV组网技术项目实战 [范国娟 刘兴义]
14. 基于AI的C语言程序设计（微课版） [蒋亚平]
15. 北京冰雪产业发展报告（2024—2025） [邹新娴　刘泽勇　等]
16. 大学体育（职业本科版） [何飞 卢凌涛 苏娟]
17. 数据库技术与应用（SQL Server） [主编 沙有闯 朱小娟]
18. OpenClaw权威指南：从零部署7×24小时AI助理 [何伟　孟伟坡　明鉴]
19. 控制器件（第三版） [主编　鲁兴举]
20. 人工智能与信息素养 [主编 吴华光 房宜汕]
21. 智能多媒体技术 [主编 陈萍 刘灵傲]
22. 云南异龙湖无机碳埋藏的近现代模式研究 [李平 著]
23. 基于多模态的人脸图像生成算法与关键技术 [罗晓东 著]
24. 应用型地方本科高校教师专业发展研究 [吴丽 著]
25. 高维数据特征筛选策略与算法 [陈念 著]
26. 外贸英语从入门到实战：53种实战场景秒变谈判高手 [张乐 廖熠 编著]
27. Python程序设计项目化教程（基于AI） [主编 禹晨 赵金考 王宏斌]
28. 可编程控制器应用项目化教程（三菱FX系列） [主编 姜文雍 李东方]
29. 全球英文电影精选：看电影学英文 [张颖　编译]
30. Python程序设计与网络爬虫 [黄海辉 彭新东]