Vue.js 3.0企业级管理后台开发实战：基于Element Plus

本书系统全面、由浅入深介绍了管理后台开发的各方面知识、经验和技巧，包括企业内部真实的项目开发方式、项目原型、API接口文档、API接口联调、团队协作开发的Git代码管理等，并附有400余个代码清单，这些实例代码与Git分支是一一对应的。除此之外，本书还结合Element Plus介绍了组件化的二次封装、公共方法封装等，可以使项目开发工作高效保质、事半功倍。管理后台是企业应用最多的项目之一，读者在学习本书后可以全面地了解管理后台的整体结构，实现完全自主搭建管理后台。本书既适合Web前端开发者学习使用，又适合零编程经验、有兴趣从事Web前端工作，以及想深入了解管理后台内容的读者阅读，同时也可作为高等院校计算机相关专业的师生用书和培训学校的教材。

杨海民，从事Web前端开发多年，常年研究并使用Vue.js相关技术，负责多个大型项目，包括SAAS项目的整体架框搭建、核心模块设计、业务组件、制定开发规范和标准、性能优化、用户体验开发等，同时负责项目开发进度管控、业务模块分配、团队技术指导等。多次参与公司项目评审，提出可行性及建议性方案，并多次组织团队分享技术经验，提升业务逻辑思维能力。

● 400余个与项目分支对应的代码清单，全景还原企业内部项目开发过程。

● 详解管理系统各业务模块及项目文件，使读者快速掌握并应用Vue.js。

● 真实的服务端API接口及文档，可用于前后端接口联调。

● 结合Element Plus介绍组件化封装等方法，使项目开发工作事半功倍。

● 全面介绍企业管理后台的整体结构，读者可实现完全自主搭建管理后台。

● 提供本书学习思维导图，以及项目UI稿件、原型图和源码等。

第1章 项目启动 1
1．1 项目原型 1
1．2 项目UI 2
1．3 项目开发流程 2
本章小结 4
第2章 项目构建 5
2．1 Node．js 5
2．2 开发工具 6
2．3 脚手架安装 6
2．4 项目创建 8
2．4．1 命令构建项目 8
2．4．2 可视化构建项目 9
2．5 项目仓库 11
2．5．1 申请仓库 11
2．5．2 推送项目 12
2．6 项目分支 14
2．6．1 分支命名 14
2．6．2 分支管理 16
2．6．3 分支创建 18
本章小结 18
第3章 初始化项目 19
3．1 启动项目 19
3．2 项目结构 19
3．3 文件结构 22
3．4 项目入口 22
3．5 路由 23
3．5．1 路由模式 23
3．5．2 路由定义 24
3．6 项目初始化配置 26
3．6．1 配置vue．config．js 27
3．6．2 配置Sass文件 27
3．6．3 重置浏览器默认样式 29
3．6．4 Element Plus 组件库 29
3．6．5 依赖包指令的区别 34
3．6．6 分支合并 35
本章小结 36
第4章 Vue．js 3的变化 37
4．1 新特性 37
4．1．1 组合式API 38
4．1．2 teleport组件 39
4．1．3 片段 41
4．1．4 触发组件选项 41
4．1．5 单文件组件组合式API 43
4．1．6 变量驱动CSS 45
4．1．7 样式穿透规则 46
4．1．8 异步组件suspense 47
4．2 生命周期 51
4．2．1 Vue．js 2生命周期 52
4．2．2 Vue．js 3生命周期 53
4．2．3 KeepAlive生命周期 56
4．3 生命周期的执行顺序 56
4．3．1 单个组件 57
4．3．2 父子组件 58
4．3．3 keep-alive组件 59
4．4 新语法 60
4．4．1 ref和reactive 61
4．4．2 toRefs 62
4．4．3 computed 63
4．4．4 watch 65
4．4．5 watchEffect 67
4．4．6 globalProperties 68
4．4．7 getCurrentInstance 69
本章小结 69
第5章 登录及注册业务需求 70
5．1 路由重定向 70
5．2 制作登录页面 71
5．2．1 scoped局部样式 71
5．2．2 el-form 表单组件 72
5．2．3 el-row和el-col组件 74
5．2．4 el-button组件 75
5．3 Vue．js指令与页面交互 77
5．3．1 v-for指令 77
5．3．2 v-bind指令 78
5．3．3 v-on指令 80
5．3．4 v-show和v-if指令 81
5．3．5 v-model指令 84
5．4 开发登录页面业务逻辑 86
5．4．1 测试用例 86
5．4．2 el-form表单校验 87
5．4．3 el-form自定义校验规则 89
5．4．4 工具库的封装 92
5．5 Axios拦截器 94
5．5．1 实例上下文 94
5．5．2 接口文档 97
5．5．3 Axios应用 99
5．5．4 Axios拦截器封装 101
5．5．5 接口联调 104
5．5．6 接口跨域配置 106
5．5．7 环境变量 109
5．6 开发验证码业务逻辑 112
5．6．1 交互体验 114
5．6．2 表单提交按钮文本交互 114
5．6．3 获取验证码提示交互 114
5．6．4 获取验证码接口联调 116
5．6．5 验证码倒计时交互 119
5．7 拦截器业务处理 122
5．7．1 响应拦截 123
5．7．2 Promise对象 127
5．7．3 注册接口联调 129
5．7．4 密码加密 134
5．7．5 登录接口联调 135
本章小结 136
第6章 搭建管理后台 137
6．1 搭建框架 137
6．2 后台首页 139
6．3 局部组件 140
6．4 导航菜单 140
6．4．1 侧栏菜单 141
6．4．2 el-menu菜单组件 141
6．4．3 一级菜单 144
6．4．4 子级菜单 147
6．4．5 视图渲染 152
6．5 图标 153
6．5．1 Icon图标 153
6．5．2 Iconfont平台 155
6．5．3 SvgIcon全局组件 156
6．5．4 组件通信Props 162
6．5．5 计算属性Computed 166
6．5．6 导航菜单的优化 170
本章小结 173
第7章 Vuex状态管理 174
7．1 状态管理 174
7．1．1 Module 175
7．1．2 State 176
7．1．3 Getters 177
7．1．4 Mutations 178
7．1．5 Actions 179
7．2 后台头部静态制作 181
7．2．1 Sass语法 181
7．2．2 菜单按钮 183
7．2．3 账号信息 184
7．3 侧栏菜单的展开/收起 185
7．3．1 菜单交互 186
7．3．2 菜单优化 188
7．4 HTML5本地存储 189
7．4．1 sessionStorage 190
7．4．2 localStorage 191
7．4．3 侧栏菜单的刷新交互 192
本章小结 193
第8章 路由守卫 194
8．1 登录逻辑 194
8．2 Cookie 195
8．3 Actions异步 197
8．3．1 异步登录 198
8．3．2 目录别名 199
8．4 路由守卫 200
8．4．1 to、from、next 参数 201
8．4．2 校验token 202
8．4．3 请求头token 204
8．4．4 数据源 205
8．4．5 退出接口 206
本章小结 211
第9章 信息管理模块 212
9．1 框架微调 212
9．2 列表页布局 213
9．2．1 新增按钮 214
9．2．2 搜索表单 215
9．2．3 制作列表 217
9．2．4 制作分页 218
9．3 分类页面 221
9．3．1 按钮和线 221
9．3．2 树形菜单 222
9．3．3 分类表单 227
9．4 表单页面 228
9．4．1 路由跳转 228
9．4．2 信息管理详情页 229
9．4．3 细节样式 234
9．5 分类接口联调 236
9．5．1 JSON对象 237
9．5．2 交互配置 238
9．5．3 添加父级分类接口联调 247
9．5．4 分类列表接口联调 249
9．5．5 添加子级分类接口联调 250
9．5．6 编辑分类接口联调 256
9．5．7 删除分类接口联调 259
9．6 表单数据 265
9．6．1 级联选择器 265
9．6．2 分类渲染 266
9．6．3 服务器上传文件 270
9．6．4 添加信息接口联调 272
9．7 信息列表页 278
9．7．1 列表接口联调 278
9．7．2 分页数据请求 282
9．7．3 发布状态接口联调 283
9．7．4 删除接口联调 285
9．7．5 封装全局方法 287
9．7．6 筛选条件搜索 293
9．8 信息编辑 297
9．8．1 路由传参 297
9．8．2 获取详情接口联调 301
9．8．3 编辑信息接口联调 303
本章小结 305
第10章 组件化 306
10．1 封装列表组件 306
10．1．1 组件基础 306
10．1．2 渲染表头 308
10．1．3 配置元素 309
10．1．4 请求列表数据 313
10．1．5 回调子组件 318
10．1．6 el-pagination组件 321
10．1．7 el-switch组件 325
10．1．8 文本格式化 331
10．1．9 el-table组件属性 332
10．2 插槽 334
10．2．1 默认插槽 334
10．2．2 具名插槽 335
10．2．3 作用域插槽 336
10．2．4 操作按钮插槽 337
10．2．5 集成删除按钮 338
10．3 封装表单组件 343
10．3．1 类别组件 346
10．3．2 上传组件 351
10．3．3 富文本组件 353
10．3．4 日期时间组件 356
10．3．5 常规组件 360
10．3．6 表单按钮 365
10．3．7 绑定字段 368
10．3．8 校验规则 371
10．3．9 数据初始化 377
10．3．10 提交表单 381
10．3．11 联动交互 383
10．3．12 等分布局 389
10．3．13 动态组件 390
10．4 封装搜索组件 396
10．4．1 集成列表 396
10．4．2 Provide/Inject通信 397
10．4．3 配置元素 398
10．4．4 配置参数 400
10．4．5 关键字组件 401
10．4．6 数据集合 405
10．4．7 配置搜索按钮 406
10．4．8 搜索联调 407
10．4．9 重置联调 411
10．4．10 分页Bug 413
10．4．11 配置按钮 417
10．4．12 等分布局 418
本章小结 420
第11章 系统配置 421
11．1 菜单管理 422
11．1．1 配置菜单列表 423
11．1．2 配置菜单搜索项 424
11．1．3 配置菜单列表接口 425
11．1．4 配置菜单表单 426
11．1．5 添加菜单 431
11．1．6 添加菜单页面功能 437
11．1．7 编辑菜单 440
11．1．8 添加子级菜单 448
11．1．9 菜单列表 449
11．2 角色管理 456
11．2．1 配置角色列表 456
11．2．2 配置角色搜索项 457
11．2．3 配置角色列表接口 458
11．2．4 Dialog对话框组件抽离 459
11．2．5 配置角色表单 462
11．2．6 添加角色 467
11．2．7 编辑角色 470
11．2．8 角色列表 476
11．3 用户管理 477
11．3．1 配置用户列表 477
11．3．2 配置用户搜索项 478
11．3．3 配置用户列表接口 479
11．3．4 配置用户表单 480
11．3．5 添加用户 490
11．3．6 编辑用户 491
11．3．7 用户列表 496
本章小结 500
第12章 权限管理 501
12．1 动态路由 501
12．1．1 添加菜单 501
12．1．2 添加角色用户 502
12．1．3 路由拦截next参数 504
12．1．4 路由权限接口 506
12．1．5 生成路由组件 507
12．1．6 addRoute动态添加路由 511
12．1．7 动态路由的跳转 514
12．2 元素级权限 516
12．2．1 注册自定义指令 517
12．2．2 应用自定义指令 519
12．2．3 元素级权限逻辑 519
12．2．4 权限编码整合 522
本章小结 523
第13章 项目部署 524
13．1 项目打包 524
13．1．1 项目环境 524
13．1．2 白屏现象 526
13．1．3 项目体积分析 526
13．1．4 CDN加速外部资源 527
13．1．5 过滤图标转换 528
13．1．6 图片压缩 529
13．2 Nginx配置 530
13．2．1 文件部署 530
13．2．2 域名指向 531
本章小结 532