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

在互联网飞速发展的信息时代，随着科技的发展和技术的变革，Web开发技术的更新迭代也在加快。从最初的HTML静态页面到混合开发，再到MVC时代；从MVC时代到Ajax的前后端协作开发，再到突进的前后端分离开发，新技术层出不穷。 Vue.js 是前后端分离开发的主流技术之一，它是一套构建用户界面的渐进式框架，以数据驱动视图和组件化的思想构建，采用自底向上、增量开发的设计，其核心库只关注视图层。同时，Vue.js 完全有能力驱动采用单文件组件和Vue.js 生态系统支持的库开发的复杂单页应用。从2013年的实验阶段到2015年的1.0版本，再到2016年的2.0版本和最新的3.2版本（截至本书写作时），时至今日，Vue.js 已成为世界三大主流前端框架之一。Vue.js 在国内也是主流技术之一，有完善的中文文档和中文社区，易学易上手。为了让刚入门前端的爱好者更快掌握Vue.js 3技术，本书将结合企业中常见的管理后台，对Vue.js 3技术进行实战演练。通过管理后台的业务模块，结合Vue.js 技术，讲解企业内部的开发过程，解读项目文件，读者可以熟悉、掌握并快速应用Vue.js技术，实现完全自主搭建管理后台，并将本书中的开发技巧应用到工作中。 本书读者对象 在校或初入职场的对企业内部开发项目不熟悉的Web开发人员。 在Vue.js技术方面零基础，准备学习Vue.js技术的Web开发人员。 有意向提升自身技术水平的Web开发人员。 本书内容 本书共13章，各章简介如下。 第1章“项目启动”介绍新项目启动时和项目有关的内容，如项目原型和项目UI。读者从中能够清楚地了解项目的业务逻辑、具体要开发的功能，以及要呈现给用户的界面效果和交互效果。此外，本章还会讨论项目开发过程的原型评审、测试用例评审、UI评审等事项，这些都是公司内部开发项目的常规流程。 第2章“项目构建”介绍如何通过脚手架工具的命令和可视化两种方式快速构建项目，以及团队协作的代码仓库管理和项目开发过程的分支管理。 第3章“初始化项目”讲解Vue.js项目的运行入口和项目的文件结构分布，并且在开发项目前，通过初始化项目依赖第三方UI包、删除浏览器默认样式等操作提高工作开发效率，更好地还原UI稿件。 第4章“Vue.js 3的变化”主要介绍Vue.js 3的一些新的API特性、Vue.js 2和Vue.js 3生命周期的区别，以及新的声明对象语法。了解本章内容，可以使后续的开发工作更为顺畅。 第5章“登录及注册业务需求”介绍项目中一个模块的业务开发过程，通过该模块的需求一步步了解Element Plus UI组件的使用方式和Vue.js指令的用法，在开发过程中逐步了解前端如何与后端对接数据、以什么方式对接，并了解API接口文档的使用、API接口联调，以及测试工程师对测试用例的理解等。此外，本章还会介绍如何根据UI实现交互动作及项目原型实现业务需求。 第6章“搭建管理后台”介绍管理后台的整体结构及组件，通过拆解各部分组件，组合成管理后台，并介绍如何通过“静态路由”实现菜单的渲染及菜单图标的开发。 第7章“Vuex状态管理”介绍Vuex在Vue.js项目中的具体作用，如何通过Vuex实现项目全局的数据应用，并且通过Vuex实现管理后台菜单的“展开/收起”效果。 第8章“路由守卫”介绍路由守卫在管理后台中的作用，以及在开发路由守卫过程中遇到的各种逻辑和问题，以及解决方式。 第9章“信息管理模块”介绍独立模块，结合第三方UI的开发过程，同时结合项目原型、项目UI及更多的API接口联调，以便读者进一步熟悉业务的整体开发过程。 第10章“组件化”介绍组件二次封装的核心和组件封装的整体过程，以及为什么要二次封装组件，封装的组件能为项目带来什么。 第11章“系统配置”介绍如何通过“角色”桥接“用户”，实现用户的权限分配。通过二次封装的组件，完成对“菜单管理”“角色管理”“用户管理”3个模块的开发，有助于读者体会到传统开发方式和组件开发方式的区别。 第12章“权限管理”介绍如何通过读取用户的权限以“动态路由”的方式渲染管理后台的菜单，并实现对“自定义指令”现实页面元素级的控制。 第13章“项目部署”介绍项目打包的环境变量配置和优化，通过优化使项目体积变小，提高项目加载速度，并简单介绍如何通过部署服务器来访问开发完成的项目。

第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