第1篇  基础知识

第1章  初识Vue.js 2

1.1  Vue简介 2

1.1.1  Vue的诞生与发展 2

1.1.2  Vue版本的区别 4

1.1.3  前端框架的选择 4

1.2  从零开始搭建Vue开发环境 5

1.2.1  安装Node.js和NPM 5

1.2.2  安装Git 7

1.2.3  安装Vue CLI 7

1.2.4  安装Visual Studio Code 8

1.2.5  安装Vue辅助编码插件 10

1.3  第一个Vue程序 11

1.3.1  Hello Vue实例解析 11

1.3.2  Vue的目录结构 12

1.3.3  使用Vue CLI创建项目 13

1.3.4  使用Vite创建项目 15

1.3.5  使用CDN创建项目 16

1.3.6  如何高效地学习Vue 17

1.4  丰富的界面体验：探索Vue UI库 18

1.4.1  构建精美的界面：Element-Plus库简介 18

1.4.2  借助Ant Design Vue进行快速开发 19

1.4.3  打造轻巧的应用：认识Vant 3组件库 19

1.4.4  跨平台开发利器：uni-app框架简介 19

1.5  小结 21

第2章  TypeScript基础知识 22

2.1  TypeScript简介 23

2.1.1  动态语言与静态语言 23

2.1.2  搭建开发环境 23

2.2  基础数据类型 26

2.2.1  布尔类型 26

2.2.2  数字类型 26

2.2.3  字符串类型 27

2.2.4  数组类型与元祖类型 27

2.2.5  枚举类型 27

2.2.6  any类型 28

2.2.7  void类型 28

2.2.8  null与undefined类型 29

2.2.9  never类型 29

2.3  函数 29

2.3.1  函数的使用 29

2.3.2  构造函数 30

2.3.3  可选参数 30

2.3.4  默认参数 31

2.3.5  箭头函数 31

2.4  类 32

2.4.1  属性与方法 32

2.4.2  类的继承 33

2.4.3  类的实现接口 33

2.4.4  权限修饰符 34

2.5  泛型 36

2.5.1  泛型示例 36

2.5.2  泛型接口 37

2.5.3  泛型类 37

2.5.4  泛型约束 38

2.6  交叉类型与联合类型 39

2.6.1  交叉类型 39

2.6.2  联合类型 40

2.7  小结 40

第3章  Vue的基本指令 41

3.1  Mustache语法 41

3.2  常用指令 42

3.2.1  v-if指令 42

3.2.2  v-show指令 43

3.2.3  v-for指令 44

3.2.4  v-text指令 45

3.2.5  v-pre指令 45

3.2.6  v-cloak指令 46

3.2.7  v-html指令 46

3.2.8  v-once指令 47

3.2.9  v-on指令 48

3.2.10  v-bind指令 49

3.3  v-model详解 50

3.3.1  v-model的基本用法 50

3.3.2  v-model修饰符 52

3.4  小结 54

第4章  CSS样式绑定 55

4.1  Class属性绑定 55

4.1.1  绑定对象 55

4.1.2  绑定计算属性 56

4.1.3  绑定数组 57

4.2  Style属性绑定 59

4.2.1  绑定对象 59

4.2.2  绑定数组 60

4.2.3  自动前缀与样式多值 61

4.3  CSS预处理器 61

4.3.1  使用Sass 61

4.3.2  嵌套写法 62

4.3.3  定义变量 63

4.3.4  模块系统 64

4.3.5  混合指令 64

4.3.6  样式继承 65

4.4  综合案例：计算器的实现 66

4.5  小结 69

第5章  数据响应式基础 70

5.1  数据响应式的实现 70

5.1.1  Vue 2中的数据响应式 71

5.1.2  Vue 3中的数据响应式 71

5.1.3  Proxy和Object.defineProperty的区别 72

5.2  声明方法 73

5.2.1  Dom更新时机 74

5.2.2  深层响应 75

5.3  计算属性 76

5.3.1  computed的基本用法 76

5.3.2  computed与methods的区别 78

5.3.3  computed的读写 79

5.4  侦听器watch 81

5.4.1  watch的基本用法 82

5.4.2  深层侦听器 83

5.4.3  即时回调的侦听器 86

5.4.4  computed和watch的区别 87

5.5  综合案例：购物车的实现 88

5.6  小结 92

第6章  组件化开发 93

6.1  组件的构成 93

6.1.1  Vue中的组件 93

6.1.2  组件化思想 95

6.2  组件的基本用法 95

6.2.1  定义一个组件 96

6.2.2  使用组件 98

6.2.3  全局组件 99

6.2.4  局部组件 100

6.3  Vue的生命周期 101

6.3.1  生命周期的基本用法 101

6.3.2  父子组件的生命周期 106

6.4  组件的通信方式 108

6.4.1  使用props和emit函数实现父子组件通信 108

6.4.2  使用Mitt实现组件间的事件通信 110

6.4.3  使用Provide和Inject函数实现跨级通信 112

6.5  综合练习：待办列表 114

6.5.1  待办项组件的开发 114

6.5.2  制作待办列表页 116

6.5.3  添加列表项组件的开发 118

6.6  小结 121

第2篇  进阶提升

第7章  HTTP网络请求 124

7.1  Axios网络请求库 124

7.1.1  发送第一条网络请求 125

7.1.2  使用测试接口调试网络请求 126

7.2  HTTP基础知识 128

7.2.1  常见的请求类型与用途 128

7.2.2  解读HTTP状态码的含义 130

7.2.3  设置请求头 131

7.2.4  一次完整的网络请求过程 133

7.3  HTTP与安全的HTTPS 133

7.3.1  HTTPS简介 133

7.3.2  HTTPS的工作原理 134

7.3.3  申请HTTPS证书 134

7.3.4  HTTPS未全面普及的原因 135

7.4  跨域问题及其解决方案 136

7.4.1  跨域请求的成因与相关问题 136

7.4.2  使用JSONP实现跨域数据请求 137

7.4.3  借助反向代理解决跨域问题 138

7.5  综合案例：封装Axios 139

7.6  小结 141

第8章  使用Vue Router构建单页应用 142

8.1  路由的基本用法 142

8.1.1  使用RouterLink创建导航链接 144

8.1.2  使用RouterView渲染路由页面 146

8.1.3  动态路由 146

8.1.4  嵌套路由 148

8.1.5  路由懒加载 149

8.2  路由的跳转与传参 150

8.2.1  路由的跳转 150

8.2.2  路由的传参 151

8.3  路由守卫 155

8.3.1  前置守卫：导航前的权限检查 155

8.3.2  解析守卫：导航中的数据解析 156

8.3.3  后置守卫：导航后的逻辑处理 157

8.4  实战练习：路由权限控制 158

8.4.1  搭建项目 158

8.4.2  制作用户页 159

8.4.3  制作登录页 162

8.4.4  路由权限 164

8.5  小结 166

第9章  Vuex状态管理与应用调优 167

9.1  Vuex的基本用法 167

9.2  Vuex的核心概念 170

9.2.1  State：共享状态数据 170

9.2.2  Getter：计算派生状态 170

9.2.3  Mutation：同步修改状态 171

9.2.4  Action：分发与处理异步任务 171

9.2.5  Module：模块化组织状态 171

9.3  Vuex的使用技巧 172

9.3.1  状态持久化 172

9.3.2  使用浏览器插件调试Vuex 174

9.4  使用NVM管理NPM的版本 176

9.4.1  NVM的安装方法 176

9.4.2  NVM的常用指令 177

9.5  实战练习：使用Vuex处理登录信息 178

9.5.1  搭建项目 178

9.5.2  制作登录弹窗 179

9.5.3  处理登录状态 182

9.6  小结 185

第10章  项目构建利器——Webpack 186

10.1  认识Webpack 186

10.2  Webpack的主要概念 187

10.2.1  入口：构建起点与模块依赖 187

10.2.2  输出：构建结果的路径与命名 188

10.2.3  loader加载器：处理各类资源转换 188

10.2.4  插件：优化构建流程与结果 188

10.2.5  模式：指定构建环境与优化策略 188

10.2.6  浏览器的兼容性与运行环境要求 189

10.3  Webpack的使用技巧 189

10.3.1  代码拆分 189

10.3.2  懒加载 190

10.3.3  缓存 191

10.3.4  Tree Shaking：消除无用代码 191

10.3.5  Module Federation：跨项目资源共享 191

10.4  配置babel-loader 192

10.4.1  安装与使用babel-loader 192

10.4.2  自定义loader 194

10.4.3  注意事项 195

10.5  使用Webpack配置Vue项目 196

10.5.1  初始化项目 196

10.5.2  配置loader和plugin 197

10.5.3  设置环境变量和模式 198

10.5.4  实现代码拆分和懒加载 198

10.5.5  使用vue.config.js管理Webpack 199

10.6  小结 199

第11章  搭建后台模拟环境 201

11.1  前后端分离 201

11.2  Postman的安装与使用 202

11.2.1  Postman的安装 202

11.2.2  Postman的使用 204

11.3  json-server的安装与使用 204

11.3.1  json-server的安装与配置 205

11.3.2  json-server的基本用法 207

11.4  实战练习：使用json-server实现增、删、改、查操作 209

11.4.1  建立与配置项目 209

11.4.2  查询与删除数据 210

11.4.3  新增与编辑数据 214

11.5  小结 217

第3篇  项目实战

第12章  商城后台管理系统——项目设计与框架搭建 220

12.1  项目设计 220

12.2  项目起步 222

12.2.1  框架选型 223

12.2.2  创建项目 225

12.2.3  自动化导入组件 228

12.2.4  封装网络请求 228

12.3  路由构建 229

12.3.1  组件的建立 229

12.3.2  路由的配置 231

12.4  系统设置 235

12.5  用户管理 237

12.5.1  用户登录 237

12.5.2  用户注册 239

12.5.3  权限管理 240

12.6  小结 244

第13章  商城后台管理系统——功能模块的实现 245

13.1  资产盘点 245

13.1.1  资产概况 245

13.1.2  数据分析 250

13.2  商品管理 253

13.2.1  商品查询 253

13.2.2  商品添加 255

13.2.3  商品编辑 257

13.3  订单管理 260

13.4  库存管理 262

13.4.1  库存查询 262

13.4.2  库存编辑 264

13.5  消息管理 266

13.5.1  消息分类管理 266

13.5.2  意见反馈管理 268

13.6  小结 274