Vue.js超详细入门与项目实战（微课视频版）

“工欲善其事，必先利其器”，作为一名多年从事Web开发的工作者，对每一次新技术的发布与应用都充满了渴望与期待，渴望它能超越旧俗，引领未来方向； 期待它能承上启下，解决现存疑难。近年来，虽有不少的新技术或框架发布，但都很难在Web开发这块有所建树，直到Vue的诞生。

Vue发布于2014年，在后续的版本升级中，广大的开发者被其渐进式框架、增量式开发、专注视图层、虚拟DOM操作所折服，而恰在那年，也深深吸引了编者的眼光，从此深入其中。

之所以有如此多的人钟爱Vue，与其强大的功能是分不开的。目前是一个大前端时代，许多功能由前端技术实现，并且更注重用户使用体验与开发效率和性能，而Vue恰恰是实现这一趋势的坚实利刃，并且可以在最大程度上满足各类环境下开发Web页面的需求。

虽然Vue功能强大、使用简单，但它毕竟是一门新的前端框架，特别是升级到Vue 3之后，与其他前端框架在功能和语法上存在诸多差异，需要相应的书籍进行技术上的引导与支持。为了让每个爱好Vue的开发者都能快速掌握最新、最全的技术，编者在清华大学出版社的支持下编写了这本书。

本书主要内容

本书共分为两大部分，共19章，其中，第1~6章由李永亮编写，其他章节由陶国荣编写。

第一部分Vue 3基础语法与应用，包括第1~11章。第1章前端框架发展，包括什么是前端技术、为什么要学习前端技术、如何学好前端技术、前后端分离概念和单页应用的不足和优化。第2章Vue脚手架功能，包括脚手架核心功能、安装脚手架过程和常用脚手架指令。第3章Vue数据绑定，包括Vue中数据绑定原理、单向数据绑定、双向数据绑定和数据绑定方法。第4章元素事件绑定，包括事件定义、事件绑定方式和事件传参。第5章元素动画实现，包括过渡动画、自定义动画和第三方动画库和列表动画。第6章组件定义，包括什么是组件、组件使用、组件属性和组件事件。第7章组件传参，包括父组件向子组件传参、子组件向父组件传参、组件之间传参和slot传参。第8章路由实现，包括路由介绍、路由传参和路由其他配置。第9章接口调用，包括接口介绍、全局配置和数据缓存。第10章pinia状态管理，包括pinia 介绍、State、Getters、Actions和其他扩展插件。第11章Vant UI，包括Vant介绍、Vant基础组件、Vant表单组件和Vant业务组件。

第二部分案例实战，包括第12~19章。第12章项目开发前准备，包括功能设计、项目开发和打包与发布。第13章项目路由配置，包括创建路由文件和配置路由对象。第14章商城首页开发，包括轮播和推荐商品、热点商品列表和底部导航条制作。第15章商品分类页开发，包括分类页查询功能、分类左侧导航和分类右侧列表。第16章商城动态页开发，包括动态列表页功能、列表详情页功能和点赞与收藏功能。第17章商品详细页开发，包括大图滚动功能、弹框说明功能、信息切换功能和加入购物车功能。第18章购物车开发，包括购物车列表显示功能、自动计算总价功能、增减购物车商品功能和删除购物车商品功能。第19章个人中心页开发，包括我的订单功能、我的收藏功能、管理收货地址和生成订单功能。

本书特色

本书内容由浅入深，逐步推进，详细、完整地介绍了Vue 3的新功能与新特征，以及它在项目中实践的过程。同时，章节之间有一定的关联，建议读者按章节的编排，逐章阅读。

学以致用，本书从实用的角度出发，以示例为主线，贯穿知识点讲解，从而实现带动与引导读者的阅读兴趣的目的，并且每个示意图都精心编排，扼要说明。

注重实践，本书通过一个完整的商城案例开发的过程，详细地介绍了Vue 3在真实项目开发中的应用步骤，每一步都结合实际开发的需求，实现功能、分析源码。

配套资源

为便于教与学，本书配有微课视频、源代码、教学大纲、教学课件。

（1） 获取微课视频方式： 用手机版微信App扫描本书封底的文泉云盘防盗码，授权后再扫描书中相应的视频二维码，观看教学视频。

（2） 获取源代码和全书网址方式： 用手机版微信App扫描本书封底的文泉云盘防盗码，授权后再扫描下方二维码，即可获取。

源代码

全书网址

（3） 其他配套资源可以扫描本书封底的“书圈”二维码，关注后回复本书书号，即可下载。

读者对象

本书面向Web开发者、全国高等学校师生及广大相关领域的计算机爱好者，无论是从事前端开发还是后台代码编写的人员，都可以使用本书。

致谢

希望这部耗时一年、积累编者数年心得与技术感悟的拙著，能给每位读者带来思路上的启发与技术上的提升。同时，也非常希望能借本书出版时机与国内热衷于前端技术的开发者进行交流。

本书由陶国荣、熊振敏、刘义、李建洲、李静、裴星如、李建勤、陶红英、陈建平、孙文华、孙义、陶林英、闵慎华、孙芳、赵刚共同完成了本书的编写、素材整理及配套资源制作等工作。

由于作者水平和能力有限，本书难免有疏漏之处。恳请各位同仁和广大读者给予批评指正。

编者2024年3月

本书采用理论知识与案例实战相结合的方式，由浅入深地介绍使用Vue 3开发页面的全过程。本书共19章，第1~11章是知识点的介绍，分别介绍前端框架发展、Vue 脚手架功能、Vue数据绑定、元素事件绑定、元素动画实现、组件定义、组件传参、路由实现、接口调用、pinia状态管理和Vant UI的知识； 第12~19章是案例实战，结合一个商城开发的过程，分别介绍项目开发前准备、项目路由配置、商城首页开发、商品分类页开发、商城动态页开发、商品详细页开发、购物车开发、个人中心页开发的内容，书中的每个知识点都有对应的源码分析部分，说明每一行关键代码的实现思路。

本书既适合初学Vue 3的读者自学，也适合各类想自己动手开发Web应用程序的自学者使用。同时，也可作为各类培训学校实例讲解的参考用书。

第1章前端框架发展

1.1什么是前端技术

1.1.1Web技术1.0时代

1.1.2Web技术2.0时代

1.2为什么要学习前端技术

1.2.1代表Web开发方向

1.2.2岗位需求缺口大

1.3如何学好前端技术

1.3.1打牢理论根基

1.3.2掌握前沿技术

1.3.3结合案例实战

1.4前后端分离概念

1.4.1诞生背景

1.4.2诞生原因

1.4.3解决方案

1.4.4重点说明

1.5单页应用的不足和优化

1.5.1单页应用的不足

1.5.2中间层的使用

1.5.3应用结构优化

小结

第2章Vue脚手架功能

2.1脚手架核心功能

2.2安装脚手架过程

2.2.1安装Vue CLI

2.2.2常用Vue CLI指令

2.3使用脚手架创建项目

2.3.1创建第一个简单项目

2.3.2修改组件代码

2.3.3项目发布

小结

第3章Vue数据绑定

3.1Vue中数据绑定原理

3.1.1Vue中的数据链

3.1.2数据绑定视图

3.2单向数据绑定

3.2.1MVC框架演变过程

3.2.2单向绑定

3.3双向数据绑定

3.3.1指令vmodel

3.3.2vmodel与修饰符

3.4数据绑定方法

3.4.1文本插值

3.4.2JavaScript表达式和HTML插值

小结

第4章元素事件绑定

4.1事件定义

4.2事件绑定方式

4.2.1指令von或@

4.2.2常见修饰符

4.3事件传参

4.3.1方法参数

4.3.2事件对象参数

小结

第5章元素动画效果

5.1过渡动画

5.2自定义动画

5.2.1制作自定义动画

5.2.2自定义动画样式

5.3第三方动画库

5.3.1animate.css

5.3.2gsap动画库

5.4列表动画

5.4.1transitiongroup组件基本功能

5.4.2交错过渡动画效果

小结

第6章组件定义

6.1什么是组件

6.1.1单文件组件

6.1.2JavaScript对象

6.2组件使用

6.2.1全局注册

6.2.2局部注册

6.2.3组件命名格式

6.3组件属性

6.3.1属性定义

6.3.2属性验证

6.3.3属性值传递

6.4组件事件

6.4.1事件定义

6.4.2事件验证

6.4.3事件监听和传参

小结

第7章组件传参

7.1父组件向子组件传参

7.1.1父组件向子组件传参说明

7.1.2父组件向子组件传参实例

7.2子组件向父组件传参

7.2.1子组件自定义事件传参

7.2.2访问子组件对象中的数据

7.3组件之间传参

7.3.1全局事件总线

7.3.2组件之间传参

7.4slot传参

7.4.1作用域插槽

7.4.2动态插槽

小结

第8章路由实现

8.1路由介绍

8.1.1基本配置

8.1.2路由树配置

8.2路由传参

8.2.1路由跳转

8.2.2带参数跳转

8.2.3接收跳转参数

8.3路由其他配置

8.3.1重定向配置

8.3.2404配置

8.3.3路由守卫配置

小结

第9章接口调用

9.1接口介绍

9.1.1初识和安装axios模块

9.1.2使用axios模块

9.2全局配置

9.2.1创建axios实例

9.2.2配置对象结构

9.2.3默认配置和响应结构

9.2.4全局配置axios

9.3数据缓存

9.3.1请求数据

9.3.2缓存数据

9.3.3缓存优化

小结

第10章pinia状态管理

10.1pinia介绍

10.1.1安装和配置pinia

10.1.2创建Store

10.2State

10.2.1构建和访问State

10.2.2重置和变更State

10.2.3其他操作方式

10.3Getters

10.3.1构建和访问Getters

10.3.2其他操作方式

10.4Actions

10.4.1构建和执行Actions中方法

10.4.2执行异步请求

10.5其他扩展插件

10.5.1扩充Store

10.5.2数据持久化

小结

第11章Vant UI

11.1Vant介绍

11.1.1Vant的特点

11.1.2Vant安装与配置

11.2Vant基础组件

11.2.1Button组件

11.2.2Image组件

11.2.3Layout组件

11.3Vant表单组件

11.3.1PasswordInput组件

11.3.2Rate组件

11.3.3Signature组件

11.4Vant业务组件

11.4.1Card组件

11.4.2Coupon优惠券

11.4.3SubmitBar提交订单栏

小结

第12章项目开发前准备

12.1功能设计

12.1.1项目背景

12.1.2需求分析

12.1.3功能模块

12.2项目开发

12.2.1创建项目

12.2.2配置静态资源

12.2.3数据源设计

12.3打包与发布

12.3.1开发与打包方法

12.3.2发布时注意事项

小结

第13章项目路由配置

13.1创建路由文件

13.1.1安装路由模块

13.1.2构建路由结构

13.1.3挂载路由文件

13.2配置路由对象

13.2.1按需加载组件

13.2.2路由传参

13.2.3配置错误地址

小结

第14章商城首页开发

14.1轮播和推荐商品

14.1.1页面效果

14.1.2轮播图制作

14.1.3爆款商品推荐

14.2热点商品列表

14.2.1页面效果

14.2.2列表数据源

14.2.3列表制作

14.3底部导航条制作

14.3.1页面效果

14.3.2实现代码

14.3.3调用导航条

小结

第15章商品分类页开发

15.1分类页查询功能

15.1.1页面效果

15.1.2组件代码

15.1.3组件调用

15.2分类左侧导航

15.2.1页面效果

15.2.2组件代码

15.2.3组件调用

15.3分类右侧列表

15.3.1页面效果

15.3.2组件代码

15.3.3组件调用

小结

第16章商城动态页开发

16.1动态列表页功能

16.1.1页面效果

16.1.2列表数据源

16.1.3列表制作

16.2列表详情页功能

16.2.1页面效果

16.2.2组件代码

16.3点赞与收藏功能

16.3.1页面效果

16.3.2组件代码

16.3.3全局状态与方法

小结

第17章商品详细页开发

17.1大图滚动功能

17.1.1页面效果

17.1.2图片数据源

17.1.3组件代码

17.2弹框说明功能

17.2.1页面效果

17.2.2组件代码

17.3信息切换功能

17.3.1页面效果

17.3.2组件代码

17.4加入购物车功能

17.4.1页面效果

17.4.2组件代码

17.4.3全局状态与方法

17.4.4组件调用

小结

第18章购物车开发

18.1购物车列表页功能

18.1.1页面效果

18.1.2组件代码

18.1.3组件调用

18.2自动计算总价功能

18.2.1页面效果

18.2.2组件代码

18.3增减购物车商品功能

18.3.1页面效果

18.3.2组件代码

18.3.3全局状态与方法

18.4删除购物车商品功能

18.4.1页面效果

18.4.2组件代码

18.4.3全局状态与方法

小结

第19章个人中心页开发

19.1我的订单功能

19.1.1页面效果

19.1.2组件代码

19.1.3全局状态和方法

19.2我的收藏功能

19.2.1页面效果

19.2.2组件代码

19.2.3全局状态和方法

19.3管理收货地址

19.3.1页面效果

19.3.2组件代码

19.3.3全局状态与方法

19.4生成订单功能

19.4.1页面效果

19.4.2组件代码

19.4.3全局状态与方法

小结

本书采用理论知识与案例实战相结合的方式，由浅入深地介绍使用Vue 3开发页面的全过程。本书共19章，第1~11章是知识点的介绍，分别介绍前端框架发展、Vue 脚手架功能、Vue数据绑定、元素事件绑定、元素动画实现、组件定义、组件传参、路由实现、接口调用、pinia状态管理和Vant UI的知识； 第12~19章是案例实战，结合一个商城开发的过程，分别介绍项目开发前准备、项目路由配置、商城首页开发、商品分类页开发、商城动态页开发、商品详细页开发、购物车开发、个人中心页开发的内容，书中的每个知识点都有对应的源码分析部分，说明每一行关键代码的实现思路。

本书既适合初学Vue 3的读者自学，也适合各类想自己动手开发Web应用程序的自学者使用。同时，也可作为各类培训学校实例讲解的参考用书。

全书由浅入深，逐步推进，超详细、完整地介绍Vue 3的新功能与新特征以及它在项目中实践的过程。同时，章节之间有一定的关联，建议读者按章节的编排，逐章阅读。 
学以致用，本书从实用的角度出发，以示例为主线，贯穿知识点讲解，从而实现带动与引导读者的阅读兴趣的目的，并且每一个示意图都精心编排，扼要说明。 
注重实践，本书通过一个完整的商城案例开发的过程，详细地介绍Vue 3在真实项目开发中的应用步骤，每一步都结合实际开发的需求，实现功能、分析源码。