共计 7236 个字符，预计需要花费 19 分钟才能阅读完成。
目录
写在前面
推荐图书
推荐理由
写在最后
写在前面
好书推荐！前端开发者的福利来喽，《循序渐进 Vue.js 3.x 前端开发实践》，你值得拥有。
推荐图书
《循序渐进 Vue.js 3.x 前端开发实践》
推荐理由
《循序渐进 Vue.js 3.x 前端开发实践》是一部极具实用性的前端开发书籍，适合从零基础到进阶的开发者阅读。全书以清晰的结构和循序渐进的讲解方式，详细阐述了 Vue.js 3.x 的核心概念与应用场景。通过理论与实际项目相结合，读者能够不仅掌握框架的基本原理，还能在实践中学习如何搭建一个完整的前端应用。书中的代码示例丰富，注释详细，帮助读者更好地理解复杂的概念。无论是组件化开发、响应式数据绑定，还是 Vue Router 与 Vuex 等高级特性，作者都用简洁易懂的语言进行讲解。此外，本书还涵盖了现代前端开发中常用的工具和技巧，如 Webpack 配置和 ES6 语法，让读者能够紧跟技术潮流。对于希望深入掌握 Vue.js 3.x 并提升前端开发能力的开发者来说，这是一本不可多得的学习资源。
内容简介
《循序渐进 Vue.js 3.x 前端开发实践》由一位拥有丰富前端开发经验的架构师撰写，旨在通过详尽的理论知识讲解和丰富的实践练习，帮助初学者深入掌握 Vue.js 框架，并能够独立开发商业级别的 Web 应用程序。本书分为 14 章，内容涵盖 Vue.js 的基本概念、模板语法、组件使用、用户交互处理、动画效果实现、脚手架工具 Vite 的使用，以及如何利用 UI 框架 Element Plus、网络请求框架 Axios、路由管理框架 Vue Router 和状态管理框架 Pinia 等工具来构建商业级应用。最终章节通过一个完整的电商后台管理系统，对所学的知识进行综合运用，加深读者对 Vue.js 开发流程和技巧的理解，提高项目开发能力。
《循序渐进 Vue.js 3.x 前端开发实践》采用官方推荐的组合式 API 代码组织方式，所有涉及的工具都使用新版本，每章均配备了动手练习和上机演练指导。此外，为了适应不同层次的读者，《循序渐进 Vue.js 3.x 前端开发实践》提供了完整的代码导读手册和视频教学资源，使学习更加便捷高效。
《循序渐进 Vue.js 3.x 前端开发实践》适合 Vue.js 前端开发新手和有一定经验的开发者使用，也很适合作为大中专院校相关课程的教学用书。
作者简介
张益珲，拥有美国亚利桑那州立大学计算机工程技术硕士学位证书，他以一名架构师的身份，在近 10 年的软件行业从业生涯中积累了丰富的经验。他擅长大前端开发，曾在多家知名上市公司担任要职，主导开发了多款成功的商业级应用程序。他的专长包括移动跨平台开发、前端开发，以及 Vue.js、React、Flutter、小程序和 iOS 开发等领域。
张益珲作为开源中国社区的特邀技术专家，积极分享自己的专业知识，已发表相关技术博文 400 余篇，总访问量超过 100 万次。他还致力于知识传播，出版了多部图书，包括《微信小程序与云开发从入门到实践》和《Swift 5 从零到精通 iOS 开发训练营》等。
目录
第 1 章 走进 Vue 3 的新世界 1
1.1 前端技术演进 1
1.2 Vue 框架的前世今生 2
1.2.1 准备开发工具 2
1.2.2 Vue 的发展历史 4
1.2.3 Vue 3.x 的新特性 5
1.3 Vue 框架初体验 6
1.3.1 第一个 Vue 工程 7
1.3.2 动手练习：实现一个简单的用户登录页面 10
1.3.3 为什么使用 Vue 框架 12
1.4 小结与上机演练 12
第 2 章 Vue 模板与应用 15
2.1 模板基础 15
2.1.1 模板插值 16
2.1.2 模板指令 18
2.2 条件渲染 20
2.2.1 使用 v -if 指令进行条件渲染 20
2.2.2 使用 v -show 指令进行条件渲染 23
2.3 循环渲染 24
2.3.1 v-for 指令的使用方法 24
2.3.2 v-for 指令的高级用法 26
2.4 动手练习：实现待办任务列表应用 28
2.4.1 步骤一：使用 HTML 搭建应用框架结构 28
2.4.2 步骤二：实现待办任务列表的逻辑开发 29
2.5 小结与上机演练 30
第 3 章 Vue 组件的属性和方法 33
3.1 属性与方法基础 33
3.1.1 属性基础 34
3.1.2 方法基础 34
3.2 计算属性和侦听器 35
3.2.1 计算属性 35
3.2.2 使用计算属性还是函数 36
3.2.3 计算属性的赋值 37
3.2.4 属性侦听器 38
3.3 进行函数限流 40
3.3.1 手动实现一个简易的限流函数 40
3.3.2 使用 Lodash 库进行函数限流防抖 42
3.4 表单数据的双向绑定 42
3.4.1 文本输入框 43
3.4.2 多行文本输入区域 43
3.4.3 复选框与单选框 44
3.4.4 选择列表 45
3.4.5 3 个常用的修饰符 46
3.5 样式绑定 47
3.5.1 为 HTML 标签绑定 Class 属性 47
3.5.2 绑定内联样式 49
3.6 动手练习：实现一个功能完整的用户注册页面 49
3.6.1 步骤一：搭建用户注册页面 49
3.6.2 步骤二：实现注册页面的用户交互 53
3.7 小结与上机演练 55
第 4 章 处理用户交互 58
4.1 事件的监听与处理 58
4.1.1 事件监听示例 58
4.1.2 多函数处理事件 60
4.1.3 事件修饰符 60
4.2 Vue 中的事件类型 63
4.2.1 常用的事件类型 63
4.2.2 按键修饰符 65
4.3 动手练习：编写一个随鼠标移动的小球 66
4.4 动手练习：编写一个弹球游戏 68
4.5 小结与上机演练 72
第 5 章 组件基础 75
5.1 关于 Vue 应用与组件 75
5.1.1 Vue 应用的创建 75
5.1.2 定义组件 77
5.2 组件中数据与事件的传递 78
5.2.1 为组件添加外部属性 79
5.2.2 处理组件事件 80
5.2.3 在自定义组件上使用 v -model 指令 82
5.3 自定义组件的插槽 85
5.3.1 组件插槽的基本用法 85
5.3.2 多具名插槽的用法 86
5.4 动态组件的简单应用 88
5.5 动手练习：编写一款小巧的开关按钮组件 90
5.6 小结与上机演练 92
第 6 章 组件进阶 95
6.1 组件的生命周期与高级配置 95
6.1.1 生命周期方法 95
6.1.2 应用的全局配置选项 99
6.1.3 组件的注册方式 100
6.2 组件 props 属性的高级用法 101
6.2.1 对 props 属性进行验证 101
6.2.2 props 的只读性质 104
6.2.3 组件数据注入 105
6.3 组件 Mixin 技术 108
6.3.1 使用 Mixin 来定义组件 108
6.3.2 Mixin 选项的合并 110
6.3.3 进行全局 Mixin 111
6.4 使用自定义指令 112
6.4.1 认识自定义指令 112
6.4.2 自定义指令的参数 113
6.5 组件的 Teleport 功能 114
6.6 小结与上机演练 116
第 7 章 Vue 响应式编程 120
7.1 响应式编程原理与在 Vue 中的应用 120
7.1.1 手动追踪变量的变化 120
7.1.2 Vue 中的响应式对象 123
7.1.3 独立的响应式值 Ref 的应用 124
7.2 组合式 API 与选项式 API 126
7.2.1 关于 setup 方法 127
7.2.2 在 setup 方法中定义生命周期行为 128
7.3 动手练习：实现支持搜索和筛选的用户列表 129
7.3.1 常规风格的示例工程开发 129
7.3.2 使用组合式 API 重构用户列表页面 133
7.4 小结与上机演练 135
第 8 章 动画 138
8.1 使用 CSS3 创建动画 138
8.1.1 transition 过渡动画 138
8.1.2 keyframes 动画 140
8.2 使用 JavaScript 方式实现动画效果 142
8.3 Vue 过渡动画 143
8.3.1 定义过渡动画 143
8.3.2 设置动画过程中的监听回调 147
8.3.3 多个组件的过渡动画 148
8.3.4 列表过渡动画 150
8.4 动手练习：优化用户列表页面 151
8.5 小结与上机演练 153
第 9 章 Vue 脚手架 Vite 工具的使用 156
9.1 Vite 工具入门 156
9.1.1 使用 Vite 工具 156
9.1.2 Vite 工程结构解析 158
9.2 运行 Vite 项目 160
9.2.1 模板工程的结构 160
9.2.2 运行 Vite 项目工程 163
9.3 使用依赖与工程构建 164
9.4 Vite 与 Vue CLI 165
9.4.1 Vite 与 Vue CLI 165
9.4.2 体验 Vue CLI 构建工具 165
9.5 小结与上机演练 169
第 10 章 基于 Vue 3 的 UI 组件库 Element Plus 171
10.1 Element Plus 入门 171
10.1.1 Element Plus 的安装与使用 171
10.1.2 按钮组件 175
10.1.3 标签组件 177
10.1.4 空态图与加载占位图组件 179
10.1.5 图片与头像组件 183
10.2 表单类组件 184
10.2.1 单选框与多选框 184
10.2.2 标准输入框组件 186
10.2.3 带推荐列表的输入框组件 188
10.2.4 数字输入框 190
10.2.5 选择列表 191
10.2.6 多级列表组件 194
10.3 开关与滑块组件 196
10.3.1 开关组件 196
10.3.2 滑块组件 198
10.4 选择器组件 200
10.4.1 时间选择器 200
10.4.2 日期选择器 202
10.4.3 颜色选择器 203
10.5 提示类组件 204
10.5.1 警告组件 205
10.5.2 消息提示 206
10.5.3 通知组件 208
10.6 数据承载相关组件 209
10.6.1 表格组件 209
10.6.2 导航菜单组件 212
10.6.3 标签页组件 214
10.6.4 抽屉组件 215
10.6.5 布局容器组件 216
10.7 动手练习：教务系统学生表 217
10.8 小结与上机演练 221
第 11 章 基于 Vue 的网络框架 Axios 的应用 224
11.1 使用 vue-axios 请求天气数据 224
11.1.1 使用互联网上免费的数据服务 224
11.1.2 使用 vue-axios 进行数据请求 227
11.2 Axios 实用功能介绍 230
11.2.1 通过配置的方式进行数据请求 230
11.2.2 请求的配置与响应数据结构 231
11.2.3 拦截器的使用 232
11.3 动手练习：天气预报应用 233
11.4 小结与上机演练 237
第 12 章 Vue 路由管理 239
12.1 Vue Router 的安装与简单使用 239
12.1.1 Vue Router 的安装 240
12.1.2 一个简单的 Vue Router 的使用示例 240
12.2 带参数的动态路由 242
12.2.1 路由参数匹配 242
12.2.2 路由匹配的语法规则 244
12.2.3 路由的嵌套 245
12.3 页面导航 247
12.3.1 使用路由方法 247
12.3.2 导航历史控制 248
12.4 关于路由的命名 249
12.4.1 使用名称进行路由切换 249
12.4.2 路由视图命名 249
12.4.3 使用别名 251
12.4.4 路由重定向 252
12.5 关于路由传参 252
12.6 路由导航守卫 254
12.6.1 定义全局的导航守卫 254
12.6.2 为特定的路由注册导航守卫 255
12.7 动态路由 256
12.8 动手练习：实现一个多页面单页应用程序 258
12.9 小结与上机演练 260
第 13 章 Vue 状态管理 264
13.1 了解 Pinia 框架的精髓 264
13.1.1 理解状态管理 265
13.1.2 安装与体验 Pinia 266
13.2 Pinia 中的一些核心概念 269
13.2.1 Pinia 中的 Store 269
13.2.2 Pinia 中的 State 270
13.2.3 Pinia 中的 Getters 271
13.2.4 Pinia 中的 Actions 272
13.3 Pinia 插件 273
13.3.1 插件使用示例 273
13.3.2 使用插件扩展 Store 274
13.4 动手练习：创建一个简单的图书管理系统 275
13.5 小结与上机演练 278
第 14 章 商业项目：电商后台管理系统实战 281
14.1 用户登录模块开发 281
14.1.1 项目搭建 281
14.1.2 用户登录页面开发 284
14.2 电商后台管理系统主页搭建 287
14.2.1 主页框架搭建 287
14.2.2 完善注销功能 290
14.3 订单管理模块的开发 291
14.3.1 使用 Mock.js 进行模拟数据的生成 291
14.3.2 编写工具类与全局样式 292
14.3.3 完善订单管理页面 293
14.4 商品管理模块的开发 299
14.4.1 商品管理列表页的开发 299
14.4.2 新建商品之基础配置 305
14.4.3 新建商品之价格和库存配置 308
14.4.4 新建商品之详情设置 310
14.4.5 添加商品分类 312
14.5 店长管理模块的开发 314
14.5.1 店长列表开发 314
14.5.2 店长审批列表与店长订单 317
14.6 财务管理与数据统计功能模块开发 318
14.6.1 交易明细与财务对账单 318
14.6.2 数据统计模块开发 319
14.7 小结与上机演练 324
前言 / 序言
在当今的 Web 开发领域，Vue.js 已经成为不可或缺的一部分，它以轻量级、高性能和易上手著称。对于前端开发者而言，掌握 Vue.js 不仅是提升技能的需要，更是职业发展的要求。本书正是为了满足这样的需求而编写的。
本书以一个拥有近十年前端开发经验的一线“老司机”的视角，以帮助读者掌握企业级开发技能为主旨，既详细介绍了 Vue.js 的基本概念和应用，又深入探讨了其背后的原理和最佳实践，力求能使读者边学边练，快速且扎实地掌握 Vue.js 框架的方方面面，并且真正可以使用它开发出商业级别的应用程序。
本书内容
在章节安排上，本书共分为 14 章。各章内容安排如下：
第 1 章是针对 Vue 初学者的入门章节，简单介绍了前端开发必备的基础知识，对 Vue 框架做了概括性的介绍。同时，针对 Vue.js 3 的新特性进行了总结，有 Vue 开发经验的读者可以对比学习。
第 2 章介绍 Vue 模板的基本用法，包括模板插值、条件与循环渲染的相关语法。这是 Vue.js 框架提供的基础功能，使用这些功能能使我们在开发网页应用时事半功倍。
第 3 章介绍了 Vue 组件中属性和方法的相关概念，如何使用面向对象的思路来进行前端程序开发，并通过一个功能简单的登录注册页面来对读者的掌握情况进行检验。
第 4 章介绍前端应用中用户交互的处理方法，包括基础的网页用户交互的处理以及如何在 Vue.js 框架中更加高效地处理用户交互事件。
第 5 章和第 6 章两章由浅入深地介绍 Vue.js 中相关组件的应用。组件是 Vue.js 框架的核心，有了组件，我们才有了开发大型互联网应用的基础，组件使得项目的结构更加便于管理，工程的可维护与可扩展性大大提高，并且组件本身的复用性也使开发者可以大量使用第三方模块或将自己开发的模块作为组件供各种项目使用，极大地提高了开发效率。
第 7 章介绍 Vue.js 框架的响应性原理，本章是对读者开发能力的一种拔高，引导读者从实现功能到精致逻辑设计方向上进步。
第 8 章介绍通过 Vue.js 框架开发前端动画效果。动画技术在前端开发中也非常重要，前端是直接和用户面对面的，功能本身只是前端应用的一部分，更重要的是带来了良好的用户体验。
第 9 章介绍开发大型项目必备的脚手架 Vite 的基本用法，管理项目和编译打包项目都需要使用到此脚手架工具。
第 10 章介绍样式美观且扩展性极强的基于 Vue.js 的 UI 框架 Element Plus。
第 11 章介绍网络请求框架 Axios。
第 12 章介绍一款非常好用的 Vue 应用路由管理框架 Vue Router。
第 13 章介绍强大的状态管理框架 Pinia，使用该框架可以更好地管理大型 Vue 项目各个模块间的交互。
第 14 章通过一个相对完整的电商后台管理系统来全面地对本书涉及的 Vue.js 技术进行综合应用，帮助读者学以致用，从而更加深入地理解所学习的内容。
本书特色
本书所有工具均使用当前新版本编写，确保读者能够学到 Vue.js 框架在前端开发中的最新应用。
从零基础开始讲起，原理与实践并重，很适合初学者上手，其中提供的商业级项目，有一定前端经验的读者也能从中受益。
整合多种 Vue.js 3 工具框架和周边来进行商业项目开发，力图使读者真正掌握一线开发技能，从而快速进入职场，完成实际开发任务。
强调动手实践，既提供章节动手练习，还为各章设计了自主上机练习，所有上机练习题均提供步骤指南，跟着步骤操作即可轻松掌握。
本书涉及的代码都提供了完整的注释和编号，方便读者调用和对照学习。
本书提供了丰富的配书资源，包括教学视频、源代码、代码导读手册和 PPT 教学课件。
历经 3 次版本更新，内容与时俱进，例如，新版本采用官方推荐的组合式 API 代码组织方式，采用了新的状态管理框架 Pinia，重点使用了新的脚手架工具 Vite 等，并且吸取了众多读者和高校老师的经验，无论是自学还是教学都能获得极佳的体验。
读者对象
本书适合所有想使用 Vue.js 开发商业级应用的新手，以及有一定开发经验的前端开发者。
本书循序渐进的体系结构和边讲边练的教学方式，也很适合作为大中专学院校相关专业的教学用书
配书资源
为了让读者能够更好地理解和实践所学的知识，本书提供了丰富的配书资源，包括教学视频、源代码、代码导读手册和 PPT 教学课件。这些资源可帮助读者更直观地理解 Vue.js 的概念和应用，同时通过动手实践加深记忆。
扫码下述二维码可免费下载（教学视频请扫描书中的二维码观看）：
重要说明
本书是《循序渐进 Vue.js 3 前端开发实战》的升级版本，本书在上一版本书的基础上，更新了所使用的 Vue 版本和状态管理框架 Pinia，并且全书的讲解均采用官方更加推荐的组合式 API 的代码组织方式，重构了一些难以理解的内容的讲解方式，并对源代码做了完整的注释与整理，补充了大量的实践与练习，特别是为每一章新增了上机演练，希望能够帮助读者更高效地学习与快速应用。
致 谢
对于本书的出版，感谢支持笔者的家人和朋友，他们在生活与工作中对笔者无微不至的照顾，让笔者有更多的时间进行写作。
感谢清华大学出版社各位编辑的勤劳付出，他们认真负责的工作，使本书更臻完美。
感谢读者选购本书，由衷地希望本书可以带给你预期的收获。
最后，尽管笔者尽心竭力，由于水平所限，难免存在疏漏，恳请各位读者不吝指教。
写在最后
我是一只有趣的兔子，感谢你的喜欢！
原文地址: 前端开发者有福啦，循序渐进 Vue.js 3.x 前端开发实践已上线
