循序渐进Vue.js 3.x前端开发实战

《循序渐进Vue.js 3.x前端开发实战》以一个多年前端“老司机”的视角，循序渐进地介绍流行前端框架Vue.js 3.x全家桶与周边工具在商业项目开发中的应用。全书共15章，第1~6章介绍Vue.js 3的模板、组件、交互处理等基础知识；第7章介绍Vue.js 3框架的响应式编程及组合式API；第8章介绍使用Vue.js 3框架开发前端动画效果；第9章介绍开发大型项目必备的脚手架工具Vue CLI和Vite；第10章介绍基于Vue.js 3的UI组件库Element Plus；第11~13章分别介绍网络请求框架vue-axios、路由管理框架Vue Router、状态管理框架Vuex；第14章和第15章介绍两个项目的开发棗学习笔记网站和电商后台管理系统。同时，还精心设计了实践和练习，录制了45集教学视频，提供了完整源代码。

《循序渐进Vue.js 3.x前端开发实战》通俗易懂，范例丰富，原理与实践并重，适合Vue.js初学者和前端开发人员使用，也可以作为网课、培训机构与大中专院校的教学用书。

张益珲，美国亚利桑那州立大学计算机工程技术硕士，架构师，从业近10年，多年大前端开发经验，曾就职于知名上市公司，主导开发过多款商业级应用程序，对移动跨平台开发、前端开发，以及Vue.js 、React、Flutter、小程序与iOS开发都拥有丰富经验。开源中国特邀技术专家，发表相关技术博文400余篇，访问量超过100万次。出版技术图书《循序渐进Vue.js 3前端开发实战》《微信小程序与云开发从入门到实践》《Swift 5从零到精通iOS开发训练营》等多部。

曹艳琴，武汉大学计算机应用技术专业硕士，从业二十余年，致力于大前端技术架构的课程设计与教学工作，对小程序、前端框架Vue.js、React与H5相关程序设计拥有丰富经验。

1.以当前最新稳定版本Vue.js 3.x为基础，是一本相当通俗易学的实战教程，从原理到实践，娓娓道来，看得懂，学得会，亲和感很好。

2.作者是前端开发专家，有近十年开发经验，确保本书来自一线，所学内容可以马上用于实践，而非纸上谈兵，对于初学者来说，学习技术和求职都适用。

3.作者从回答为什么使用Vue.js这个问题入手，向读者展示了一线公司使用Vue开发商业项目的不传之秘。不仅仅是讲解Vue框架，而是试图展示现代企业项目的开发方法，以及综合运用Vue全家桶和周边工具进行开发的技巧，真正理解一个一线工程师是如何开发项目的，这是与只讲解Vue.js知识点的同类书不同的地方。阅读本书，会让你少走弯路，用最少的时间快速进阶为开发高手。

3.本书在前一版本基础上更新而来，前一版自2022年1月出版后，一年多时间累加印刷8次，新版书接受了很多读者提出的建议，特别在细节上进行了完善，删减了一些过时的知识，补充了更多注释，增加了代码索引，并采用了双色印刷等，总之，新版书更易于读者学习和理解。

4.书中仍色保持了视频教学和各章的动手练习，突出边讲边练的特色，这也是学习编程的最好方法。可以说，这是一本集专业性、实用性、先进性于一体的一本好书，经过读者的检验，深受读者欢迎，相信一定会给你带来意想不到的收获。

前言

本书说明

本书是笔者《循序渐进Vue.js 3前端开发实战》一书的修订升级版，上一版在2022年1月出版后，受到了读者的广泛赞誉，一年多时间连续加印了8次，这期间收到了读者的很多来信，一些初学者使用了本书练习做项目，并求职成功，但也建议本书更新为3.x版本，并希望对一些内容进行更细致的讲解，还有一些院校老师使用本书作为实践课教材，也发来了改进的建议。本书新版正是基于上述建议改进而来。新版书除保持上一版书的知识结构和核心内容外，主要在以下几个方面进行了改进：

（1）修正了描述不当的部分细节，重构了一些难以理解的内容的讲解方式。

（2）对书中代码新增了索引，方便读者在源文件中找到对应的代码片段。

（3）在源代码中补充了大量注释，方便读者学习理解。

（4）对原书中使用的Element Plus、Vue Router等库进行更新，对过时的API进行了清理，并替换为新接口。

（5）根据本书读者的反馈，修正了部分错误。

（6）根据一线教师反馈，对语义双关和描述不清的部分知识点进行了补充。

内容特色

本书共15章。从前端基础讲起，深入浅出地介绍Vue.js框架的功能、用法及部分实现原理。同时，几乎每一章的最后都安排了实践与练习，力求使读者边学边练，快速且扎实地掌握Vue.js框架的各种知识，并可以使用它开发出商业级别的应用程序。

第1章简单介绍了前端开发必备的基础知识，包括HTML、CSS和JavaScript这3种前端开发必备的技能。这些虽然不是本书的重点，但却是学习Vue前必须掌握的基础知识。

第2章介绍Vue模板的基本用法，包括模板插值、条件与循环渲染的相关语法。这是Vue.js框架提供的基础功能，使用这些基础功能能使我们在开发网页应用时事半功倍。

第3章介绍了Vue组件中属性和方法的相关概念，将使用面向对象的思路来进行前端程序开发，本章的最后介绍了一个功能简单的登录注册页面的开发。

第4章介绍前端应用中用户交互的处理方法，一个网页如果不能进行用户交互，那么将如一潭死水，用户交互为应用程序带来灵魂。

第5章和第6章由浅入深地讲解Vue.js中组件的相关应用。组件是Vue.js框架的核心，在实际的应用开发中，更是离不开自定义组件技术。

第7章介绍Vue.js框架的响应性原理，以及Vue.js 3.0版本引入的组合式API的新特性。本章是对读者开发能力的一种提高，引导读者从实现功能到精致逻辑设计的进步。

第8章介绍通过Vue.js框架方便地开发前端动画效果。动画技术在前端开发中非常重要，前端是直接和用户面对面的，功能本身只是前端应用的一部分，更重要的是带来良好的用户体验。

第9章介绍开发大型项目必备的脚手架Vue CLI和Vite的基本用法。

第10章介绍样式美观且扩展性极强的基于Vue.js的UI框架Element Plus；第11章介绍网络请求框架vue-axios；第12章介绍一款非常好用的Vue应用路由管理框架Vue Router；第13章介绍强大的状态管理框架Vuex，使用该框架，开发者可以更好地管理大型Vue项目各个模块间的交互。这几章内容是开发商业应用程序的必备技能。

第14章和第15章将通过两个相对完整的应用项目来全面地对本书所涉及的Vue.js技能进行综合应用，帮助读者学以致用，更加深入地理解所学习的内容。

配书资源

为了方便读者学习本书，本书还提供了源代码、视频教学、PPT课件。扫描下述二维码即可下载源代码和PPT课件，扫码书中各章节的二维码可以直接观看教学视频。

　　　

如果读者在学习和下载本书的过程中遇到问题，可以发送邮件至[email protected]，邮件主题写“循序渐进Vue.js 3.x前端开发实战”。

最后，对于本书的出版，要感谢支持笔者的家人和朋友，还要感谢清华大学出版社的王金柱编辑的勤劳付出。

希望本书可以带给读者预期的收获。

编者

2023年5月

第1章　从前端基础到Vue.js 31

1.1 前端技术演进1

1.2 HTML入门2

1.2.1 准备开发工具3

1.2.2 HTML中的基础标签5

1.3 CSS入门7

1.3.1 CSS选择器入门8

1.3.2 CSS样式入门10

1.4 JavaScript入门13

1.4.1 为什么需要JavaScript13

1.4.2 JavaScript语法简介15

1.5 渐进式开发框架Vue17

1.5.1 第一个Vue应用17

1.5.2 范例演练：实现一个简单的用户登录页面19

1.5.3 Vue 3的新特性21

1.5.4 为什么要使用Vue框架22

1.6 小结与练习23

第2章　Vue模板应用24

2.1 模板基础24

2.1.1 模板插值25

2.1.2 模板指令28

2.2 条件渲染29

2.2.1 使用v-if指令进行条件渲染30

2.2.2 使用v-show指令进行条件渲染32

2.3 循环渲染33

2.3.1 v-for指令的使用方法33

2.3.2 v-for指令的高级用法36

2.4 范例演练：实现待办任务列表应用38

2.4.1 步骤一：使用HTML搭建应用框架结构38

2.4.2 步骤二：实现待办任务列表的逻辑开发39

2.5 小结与练习40

第3章　Vue组件的属性和方法41

3.1 属性与方法基础41

3.1.1 属性基础42

3.1.2 方法基础42

3.2 计算属性和侦听器43

3.2.1 计算属性43

3.2.2 使用计算属性还是函数44

3.2.3 计算属性的赋值45

3.2.4 属性侦听器46

3.3 进行函数限流48

3.3.1 手动实现一个简易的限流函数48

3.3.2 使用Lodash库进行函数限流50

3.4 表单数据的双向绑定50

3.4.1 文本输入框50

3.4.2 多行文本输入区域51

3.4.3 复选框与单选框52

3.4.4 选择列表53

3.4.5 两个常用的修饰符53

3.5 样式绑定54

3.5.1 为HTML标签绑定class属性54

3.5.2 绑定内联样式56

3.6 范例演练：实现一个功能完整的用户注册页面57

3.6.1 步骤一：搭建用户注册页面57

3.6.2 步骤二：实现注册页面的用户交互60

3.7 小结与练习62

第4章　处理用户交互63

4.1 事件的监听与处理63

4.1.1 事件监听示例63

4.1.2 多事件处理65

4.1.3 事件修饰符66

4.2 Vue中的事件类型68

4.2.1 常用事件类型68

4.2.2 按键修饰符70

4.3 范例演练：随鼠标移动的小球72

4.4 范例演练：弹球游戏74

4.5 小结与练习77

第5章　组件基础79

5.1 Vue应用与组件79

5.1.1 Vue应用的数据配置选项79

5.1.2 定义组件81

5.2 组件中数据与事件的传递82

5.2.1 为组件添加外部属性83

5.2.2 处理组件事件84

5.2.3 在组件上使用v-model指令85

5.3 自定义组件的插槽88

5.3.1 组件插槽的基本用法88

5.3.2 多具名插槽的用法90

5.4 动态组件的简单应用91

5.5 范例演练：开发一款小巧的开关按钮组件93

5.6 小结与练习95

第6章　组件进阶97

6.1 组件的生命周期与高级配置97

6.1.1 生命周期方法98

6.1.2 应用的全局配置选项101

6.1.3 组件的注册方式102

6.2 组件props属性的高级用法103

6.2.1 对props属性进行验证103

6.2.2 props的只读性质106

6.2.3 组件数据注入107

6.3 组件Mixin技术110

6.3.1 使用Mixin来定义组件110

6.3.2 Mixin选项的合并112

6.3.3 进行全局Mixin113

6.4 使用自定义指令114

6.4.1 认识自定义指令114

6.4.2 自定义指令的参数115

6.5 组件的Teleport功能116

6.6 小结与练习118

第7章　Vue响应式编程119

7.1 响应式编程的原理与在Vue中的应用119

7.1.1 手动追踪变量的变化119

7.1.2 Vue中的响应式对象122

7.1.3 独立的响应式值Ref的应用124

7.2 响应式的计算与监听126

7.2.1 关于计算变量126

7.2.2 监听响应式变量128

7.3 组合式API的应用130

7.3.1 关于setup方法130

7.3.2 在setup方法中定义生命周期行为132

7.4 范例演练：实现支持搜索和筛选的用户列表133

7.4.1 常规风格的示例工程开发133

7.4.2 使用组合式API重构用户列表页面136

7.5 小结与练习139

第8章　动画140

8.1 使用CSS3创建动画140

8.1.1 transition过渡动画140

8.1.2 keyframes动画142

8.2 使用JavaScript的方式实现动画效果144

8.3 Vue过渡动画145

8.3.1 定义过渡动画145

8.3.2 设置动画过程中的监听回调149

8.3.3 多个组件的过渡动画150

8.3.4 列表过渡动画152

8.4 范例演练：优化用户列表页面154

8.5 小结与练习155

第9章　Vue CLI工具的使用156

9.1 Vue CLI工具入门156

9.1.1 Vue CLI工具的安装156

9.1.2 快速创建项目158

9.2 Vue CLI项目模板工程160

9.2.1 模板工程的目录结构160

9.2.2 运行Vue项目工程164

9.3 在项目中使用依赖165

9.4 工程构建167

9.5 新一代前端构建工具Vite168

9.5.1 Vite与Vue CLI168

9.5.2 体验Vite构建工具169

9.6 小结与练习170

第10章　Element Plus 基于Vue 3的UI组件库171

10.1 Element Plus入门171

10.1.1 Element Plus的安装与使用172

10.1.2 按钮组件174

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 滑块组件197

10.4 选择器组件199

10.4.1 时间选择器199

10.4.2 日期选择器201

10.4.3 颜色选择器202

10.5 提示类组件203

10.5.1 警告组件203

10.5.2 消息提示204

10.5.3 通知组件205

10.6 数据承载相关组件206

10.6.1 表格组件206

10.6.2 导航菜单组件209

10.6.3 标签页组件211

10.6.4 抽屉组件212

10.6.5 布局容器组件213

10.7 实战：教务系统学生表214

10.8 小结与练习218

第11章　基于Vue的网络框架vue-axios的应用219

11.1 使用vue-axios请求天气数据219

11.1.1 使用互联网上免费的数据服务219

11.1.2 使用vue-axios进行数据请求221

11.2 vue-axios实用功能介绍224

11.2.1 通过配置的方式进行数据请求224

11.2.2 请求的配置与响应数据结构225

11.2.3 拦截器的使用226

11.3 范例演练：天气预报应用227

11.3.1 搭建页面框架227

11.3.2 实现天气预报应用的核心逻辑230

11.4 小结与练习231

第12章　Vue路由管理232

12.1 Vue Router的安装与简单使用232

12.1.1 Vue Router的安装233

12.1.2 一个简单的Vue Router的使用示例233

12.2 带参数的动态路由235

12.2.1 路由参数匹配235

12.2.2 路由匹配的语法规则237

12.2.3 路由的嵌套239

12.3 页面导航240

12.3.1 使用路由方法240

12.3.2 导航历史控制242

12.4 关于路由的命名242

12.4.1 使用名称进行路由切换243

12.4.2 路由视图命名243

12.4.3 使用别名244

12.4.4 路由重定向245

12.5 关于路由传参246

12.6 路由导航守卫247

12.6.1 定义全局的导航守卫247

12.6.2 为特定的路由注册导航守卫248

12.7 动态路由250

12.8 小结与练习252

第13章　Vue状态管理253

13.1 认识Vuex框架253

13.1.1 关于状态管理253

13.1.2 安装与体验Vuex255

13.2 Vuex中的一些核心概念258

13.2.1 Vuex中的状态state258

13.2.2 Vuex中的Getter方法259

13.2.3 Vuex中的Mutation261

13.2.4 Vuex中的Action262

13.2.5 Vuex中的Module263

13.3 小结与练习266

第14章　实战项目：开发一个学习笔记网站267

14.1 网站框架的搭建267

14.2 配置专题与文章目录272

14.3 渲染文章笔记内容275

14.4 小结与练习279

第15章　实战项目：电商后台管理系统实战280

15.1 用户登录模块开发280

15.1.1 项目搭建280

15.1.2 用户登录页面开发283

15.2 项目主页搭建286

15.2.1 主页框架搭建286

15.2.2 完善注销功能289

15.3 订单管理模块开发290

15.3.1 使用Mock.js进行模拟数据的生成290

15.3.2 编写工具类与全局样式291

15.3.3 完善订单管理页面292

15.4 商品管理模块的开发298

15.4.1 商品管理列表页的开发298

15.4.2 新增商品之基础配置303

15.4.3 新增商品之价格和库存配置306

15.4.4 新增商品之详情设置309

15.4.5 添加商品分类311

15.5 店长管理模块的开发313

15.5.1 店长列表开发313

15.5.2 店长审批列表与店长订单316

15.6 财务管理与数据统计功能模块开发317

15.6.1 交易明细与财务对账单318

15.6.2 数据统计模块开发319

15.7 小结与练习323