VUE 3企业级应用开发实战(微课版)

2025-10-2 89 10/2

VUE 3企业级应用开发实战(微课版)

作者:孙芳 梁大业 张晶

页数:320

出版社:人民邮电出版社

出版日期:2024

ISBN:9787115631688

高清校对版pdf(带目录)

前往页尾底部查看PDF电子书

内容简介

Vue是一款用于构建用户界面的渐进式框架,现已成为Web前端开发领域三大主流框架之一。2020年9月,Vue 3正式发布,目前其在国内Web前端开发(尤其是手机App的HTML5页面开发)领域已被广泛应用。
本书共16章,内容分为四部分,即Vue概述、Vue基础、Vue生态和Vue实战,从基础知识到实战项目,全面系统地介绍Vue技术,且涵盖目前新一代企业级状态管理库Pinia和下一代前端构建工具Vite。本书内容由浅入深,实例丰富实用,实战部分通过一个通用的Vue 3项目脚手架实例和一个基于Vue 3 + Vant的项目实例(易学、易用、易上手)来帮助读者将所学知识更好地应用到实际开发工作中,快速培养独立完成基于Vue 3的企业级应用开发与迭代能力。
本书可作为Web前端开发相关课程的教材,也可供广大信息技术类专业的学习者参考使用,还可作为Web前端开发相关领域培训机构的教材。

作者简介

孙芳:
辽宁师范大学副教授,毕业于大连理工大学计算机系,CCF计算机应用专业委员会委员,辽宁省大连市西岗区智慧联盟特聘专家;常年从事高校计算机专业课程的一线教学工作,并具有多年海外跨国公司IT工作经验,主要从事软件工程、Web开发、智能信息处理、多媒体信息安全等方面的研究;主持并参与多项课题,主编出版多部高校优秀教材。
梁大业:
腾讯前端架构师,腾讯前端通道会长,腾讯技术委员会委员,腾讯安全委员会委员;专注于Web前端领域,主要负责前端架构搭建技术选型,并且拥有多年前端开发实战经验;参与编写Web开发相关领域图书多部。

本书特色

1. Web前端开发工程师团队精心打磨新品力作。

2. 精选综合实例,剖析工程代码;紧跟前沿技术,配套丰富资源。

3. 知识架构合理,示例项目丰富,综合实例升华,接轨企业应用。

4. 配套PPT、教学大纲、教案、源代码、习题答案及各种参考文件等教辅资源。

目录

【章名目录】

第 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

PDF更新中
- THE END -

非特殊说明,本博所有文章均为博主原创。