正版 Vue.js 3.0企业级管理后台开发实战:基于Element Plus 杨海

第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

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

Vue.js 3.0是前端开发的必备技能，系统全面地掌握它十分必要。市面上系统完整的相关学习资料还比较少，本书介绍了项目开发的完整流程，相当于精心组织了一次实战训练，能够帮助从业者系统地掌握Vue.js 3.0！

深圳市创点数科技术有限公司技术总监 郑波

学习Vue.js其实很简单，第一要知道怎么用，第二要实际用起来。本书内容从基础的使用方法开始，到管理后台项目的实战开发，最后将项目打包部署起来。由浅入深，层层递进，使读者“一站式”掌握Vue.js项目开发流程。

开源富文本编辑器wangEditor 作者 王福朋

如今，企业对Vue.js技术的要求越来越高。本书介绍了 Vue.js基础语法、组件原理、架构设计，带你以企业级代码质量的开发标准完成管理后台的开发及部署上线。前端开发人员如果学会并掌握了本书中的全部内容，不仅可以全面提升技术水平，而且能为简历加分。

北京字节跳动网络技术有限公司资深前端工程师 米亚流年

这本书很务实，干货满满，通过介绍一些技术问题和实践，向我们展示了企业开发项目的完整流程，特别适合前端技术小白阅读学习。

腾讯（深圳）科技有限公司设计师 李江

本书以项目开发为切入点，从项目原型开始，直到项目发布和运行，全面介绍了企业级管理后台开发的完整过程，实操性强！本书既适合初学者入门，也适合软件从业者学习参考。

广州市商贸职业学校讲师 郭志坚

本书实例丰富、实践路线完整、通俗易懂。对于读者来说，不管是入门起步，还是进阶提升，本书都是不二之选。

某云工业软件公司信息化产品技术负责人 谢清森

Vue.js 3.0是前端开发的技能，系统地掌握它十分必要。市面上系统完整的相关学习资料还比较少，本书介绍了项目开发的完整流程，相当于精心组织了一次实战训练，能够帮助从业者系统地掌握Vue.js 3.0！ 深圳市创点数科技术有限公司技监 郑波 学习Vue.js其实很简单，要知道怎么用，要实际用起来。本书内容从基础的使用方法开始，到管理后台项目的实战开发，后将项目部署起来。由浅入深，层层递进，使读者“一站式”掌握Vue.js项目开发流程。 开源富文本编辑器wangEditor 作者 王福朋 如今，企业对Vue.js技术的要求越来越高。本书介绍了 Vue.js基础语法、组件原理、架构设计，带你以企业级代码质量的开发标准完成管理后台的开发及部署上线。前端开发人员如果学会并掌握了本书中的内容，不仅可以提升技术水平，而且能为简历加分。 北京字节跳动网络技术有限公司前端工程师 米亚流年 这本书很务实，干货满满，通过介绍一些技术问题和实践，向我们展示了企业开发项目的完整流程，适合前端技术小白阅读学习。 腾讯（深圳）科技有限公司设计师 李江 本书以项目开发为切入点，从项目原型开始，直到项目发布和运行，介绍了企业级管理后台开发的完整过程，实操强！本书既适合初学者入门，也适合软件从业者学习参考。 广州市商贸职业学校讲师 郭志坚 本书实例丰富、实践路线完整、通俗易懂。对于读者来说，不管是入门起步，还是进阶提升，本书都是。 某云工业软件公司信息化产品技术负责人 谢清森

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

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

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

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

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

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