【章名目录】
第1章　Vue前世今生
第2章　第一个Vue项目实例
第3章　Vue生命周期
第4章　Vue指令
第5章　Vue组件
第6章　计算属性和侦听器
第7章　样式绑定和过渡动画
第8章　混入
第9章　组合式API
第10章　Vue Router
第11章　Pinia—— 一个全新的状态管理库
第12章　Vite——下一代前端构建工具
第13章　Axios—— 一个HTTP网络请求库
第14章　Vue组件库
第15章　Vue 3+Vue Router+Vite+Pinia+Axios+Element Plus项目脚手架实例
第16章　一个基于Vue 3+Vant的HTML5版考拉商城

【详细目录】
第1章　Vue前世今生
1.1　Vue简介　2
1.2　Vue产生的背景　3
1.2.1　jQuery一统天下的时代　3
1.2.2　从jQuery到Vue的思维转变　4
1.3　Vue的学习方法　6
1.3.1　Vue前置知识的准备　6
1.3.2　开发工具介绍　9
1.4　Vue 3的特点　11
1.5　本章小结　11
习题　12

第2章　第一个Vue项目实例
2.1　搭建开发环境　13
2.1.1　安装Node.js　13
2.1.2　安装Vue Devtools　15
2.2　创建Vue 3项目示例　17
2.2.1　创建一个单页面项目　17
2.2.2　运行及构建项目　18
2.3　详解HelloWorld项目　20
2.3.1　整体项目结构　20
2.3.2　src项目源文件目录　20
2.3.3　项目主要文件源代码详解　21
2.4　本章小结　22
习题　22
上机实操　23

第3章　Vue生命周期
3.1　生命周期函数　25
3.1.1　钩子函数详细描述与使用场景　25
3.1.2　Vue 2与Vue 3生命周期钩子函数对比　27
3.2　生命周期代码示例　27
3.3　本章小结　29
习题　29
上机实操　30

第4章　Vue指令
4.1　Vue指令简介　31
4.2　内置指令　32
4.2.1　条件渲染　32
4.2.2　循环渲染　33
4.2.3　数据插入　34
4.2.4　属性绑定　35
4.2.5　事件绑定　36
4.2.6　双向数据绑定　38
4.2.7　插槽　39
4.2.8　性能提升相关指令　40
4.3　自定义指令　42
4.3.1　自定义指令使用场景　42
4.3.2　创建与使用自定义指令　42
4.3.3　生命周期钩子函数　43
4.3.4　自定义指令应用示例　44
4.4　本章小结　46
习题　47
上机实操　47

第5章　Vue组件
5.1　组件简介　48
5.2　注册组件与使用组件　50
5.2.1　注册组件　50
5.2.2　使用组件　51
5.3　Props与组件间通信　53
5.3.1　Props　54
5.3.2　组件间通信　55
5.4　插槽　58
5.4.1　默认插槽　58
5.4.2　具名插槽　59
5.4.3　作用域插槽　59
5.5　组件间切换　61
5.5.1　条件渲染　61
5.5.2　动态组件　62
5.6　内置组件　63
5.6.1　Transition　63
5.6.2　Teleport　63
5.6.3　Suspense　64
5.6.4　Keep-alive　65
5.7　本章小结　66
习题　66
上机实操　67

第6章　计算属性和侦听器
6.1　计算属性　68
6.1.1　计算属性简介　68
6.1.2　计算属性与方法的对比　69
6.1.3　计算属性的用法　70
6.1.4　计算属性的使用示例　73
6.2　侦听器　76
6.2.1　侦听器简介　76
6.2.2　侦听器的用法　77
6.2.3　侦听器的使用示例　80
6.3　本章小结　84
习题　85
上机实操　86

第7章　样式绑定和过渡动画
7.1　样式绑定　87
7.1.1　:class指令　87
7.1.2　:style指令　89
7.1.3　动态绑定Class　90
7.1.4　动态绑定Style　90
7.1.5　动态绑定样式对象　90
7.2　过渡动画　91
7.2.1　基本用法　91
7.2.2　高级用法　93
7.2.3　应用示例　96
7.3　本章小结　99
习题　99
上机实操　99

第8章　混入
8.1　混入简介　100
8.2　混入的定义　100
8.3　混入的使用　101
8.4　混入的完整示例　101
8.5　混入选项的合并规则　102
8.6　混入的使用建议　104
8.7　本章小结　104
习题　104
上机实操　105

第9章　组合式API
9.1　使用组合式API的动机和优势　106
9.1.1　动机　106
9.1.2　优势　108
9.2　组合式API的核心概念　111
9.2.1　setup函数　111
9.2.2　reactive API　113
9.2.3　ref API　115
9.3　组合式API与混入比较　116
9.3.1　两者的区别　116
9.3.2　代码示例　116
9.4　本章小结　117
习题　118
上机实操　119

第10章　Vue Router
10.1　Vue Router入门　121
10.1.1　前端路由的概述　121
10.1.2　Vue Router概述　122
10.1.3　Vue Router安装与配置　123
10.2　静态路由与动态路由　124
10.2.1　静态路由　124
10.2.2　动态路由　126
10.2.3　路由传参　127
10.3　路由守卫　128
10.3.1　路由守卫概述　128
10.3.2　全局前置守卫　129
10.3.3　路由独享守卫　130
10.3.4　组件内的守卫　132
10.4　路由的过渡动画　133
10.4.1　过渡动画概述与分类　134
10.4.2　渐变过渡动画　134
10.4.3　幻灯片过渡动画　135
10.4.4　缩放过渡动画　137
10.4.5　旋转过渡动画　138
10.4.6　自定义过渡动画　140
10.5　本章小结　141
习题　142
上机实操　142

第11章　Pinia—— 一个全新的状态管理库
11.1　认识Pinia　143
11.1.1　状态管理简介　143
11.1.2　选择Pinia的理由　143
11.2　安装与配置　144
11.2.1　安装Pinia　144
11.2.2　创建Pinia实例　144
11.2.3　定义Store　145
11.2.4　使用Store　145
11.2.5　提供Store　145
11.3　状态管理基础　146
11.3.1　创建和注册Store　146
11.3.2　State和Getters　146
11.3.3　$patch　147
11.3.4　Actions　148
11.4　在Vue组件中使用Pinia　150
11.4.1　在组件中获取状态　150
11.4.2　使用$patch和Actions更新状态　151
11.4.3　辅助函数和辅助Hook　151
11.5　高级技巧与实践　153
11.5.1　异步操作与副作用处理　153
11.5.2　跨Store数据共享　154
11.5.3　插件开发和使用　155
11.5.4　单元测试Pinia应用程序　156
11.5.5　完整实践　156
11.6　本章小结　158
习题　159
上机实操　159

第12章　Vite——下一代前端构建工具
12.1　Vite概述　160
12.1.1　Vite的由来和特点　160
12.1.2　Vite与Vue 3结合的优势　160
12.2　环境搭建与项目创建　161
12.2.1　安装与配置Vite　161
12.2.2　Vite项目结构解析　162
12.2.3　Vite配置选项详解　163
12.2.4　Vite项目开发与构建　163
12.3　本章小结　164
习题　165
上机实操　165

第13章　Axios—— 一个HTTP网络请求库
13.1　Axios概述　166
13.1.1　认识Axios与Axios的优势　166
13.1.2　Axios的安装与配置　167
13.1.3　发起请求与处理响应　167
13.2　Vue 3中的Axios实例　170
13.2.1　在Vue组件中使用Axios　170
13.2.2　Axios结合Vue Router的异步加载数据　171
13.2.3　Pinia中的异步数据管理与Axios　171
13.3　Axios公共逻辑与封装　173
13.3.1　创建可复用的Axios封装　173
13.3.2　处理请求的Loading状态　175
13.3.3　统一处理错误提示与日志记录　176
13.3.4　优化Axios封装与配置　177
13.4　安全性与性能优化　178
13.4.1　有关网络请求的安全性　178
13.4.2　性能优化　179
13.5　本章小结　179
习题　179
上机实操　180

第14章　Vue组件库
14.1　Element Plus　181
14.1.1　Element Plus简介　181
14.1.2　Element Plus入门　182
14.1.3　Element Plus常用组件　185
14.1.4　Element Plus布局组件　193
14.1.5　Element Plus高级组件　196
14.1.6　项目实践 —— 一个简单的后台管理系统　200
14.2　Vant　203
14.2.1　Vant简介　203
14.2.2　Vant快速入门　203
14.2.3　Vant基础组件　207
14.2.4　Vant布局组件　211
14.2.5　Vant业务组件　214
14.2.6　项目实践——一个移动端购物车界面　220
14.3　本章小结　223
习题　224
上机实操　224

第15章　Vue 3+Vue Router+Vite+Pinia+Axios+Element Plus项目脚手架实例
15.1　创建新的Vue 3项目　226
15.1.1　使用Vue 3脚手架创建新项目　226
15.1.2　安装项目依赖包　227
15.2　集成Element Plus　228
15.3　集成Axios　229
15.4　多环境配置　232
15.5　项目结构详解　235
15.6　本章小结　236
习题　236
上机实操　236

第16章　一个基于Vue 3+Vant的HTML5版考拉商城
16.1　商城前端架构搭建　237
16.1.1　Vue 3与Vant集成　237
16.1.2　项目结构详解　243
16.2　项目公用文件　244
16.2.1　assets静态资源文件目录　244
16.2.2　common公用目录　246
16.2.3　App.vue根组件　252
16.3　首页　254
16.3.1　头部搜索栏　254
16.3.2　轮播图　256
16.3.3　功能导航模块　257
16.3.4　新品上线模块　258
16.3.5　热门商品模块　260
16.3.6　最新推荐模块　261
16.3.7　效果优化　262
16.3.8　底部导航栏　262
16.3.9　添加路由　264
16.4　登录页面和注册页面　264
16.4.1　添加路由　264
16.4.2　头部导航栏　265
16.4.3　登录页面和注册页面模块　266
16.5 “我的”页面　272
16.5.1　首页登录状态细节　272
16.5.2　添加路由　273
16.5.3 “我的”页面模块　273
16.6　商品列表页面　275
16.6.1　添加路由　276
16.6.2　头部搜索栏　276
16.6.3　Tabs栏　277
16.6.4　商品列表栏　278
16.6.5　页面逻辑代码实现　280
16.7　商品详情页面　282
16.7.1　添加路由　282
16.7.2　商品详情模块　282
16.7.3　底部工具栏　285
16.8　购物车页面　288
16.8.1　添加路由　288
16.8.2　购物车列表模块　289
16.8.3　底部结算模块　293
16.9　地址管理页面　294
16.9.1　地址列表页面　294
16.9.2　编辑地址页面　297
16.10　生成订单页面　300
16.10.1　添加路由　301
16.10.2　订单接口　301
16.10.3　地址栏　301
16.10.4　商品列表模块　303
16.10.5　生成订单模块　305
16.10.6　支付弹窗模块　306
16.11 “我的订单”页面　307
16.11.1　创建页面　307
16.11.2　定义路由　310
16.12　订单详情页面　311
16.12.1　定义路由　311
16.12.2　创建页面　311
16.13　分类页面　315
16.13.1　定义路由　315
16.13.2　区域滚动组件　316
16.13.3　创建页面　317
16.14　本章小结　319
习题　319
上机实操　320