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中