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

图书标准信息

• 作者 杨海民
• 出版社 电子工业出版社
• 出版时间 2022-10
• 版次 1
• ISBN 9787121443299
• 定价 138.00元
• 装帧 其他
• 开本 16开
• 页数 544页
• 字数 806千字

【内容简介】

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

【作者简介】

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

【目录】

第1章  项目启动1

1.1  项目原型1

1.2  项目UI2

1.3  项目开发流程2

本章小结4

第2章  项目构建5

2.1  Node.js5

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.js27

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  组合式API38

4.1.2  teleport组件39

4.1.3  片段41

4.1.4  触发组件选项41

4.1.5  单文件组件组合式API43

4.1.6  变量驱动CSS45

4.1.7  样式穿透规则46

4.1.8  异步组件suspense47

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和reactive61

4.4.2  toRefs62

4.4.3  computed63

4.4.4  watch65

4.4.5  watchEffect67

4.4.6  globalProperties68

4.4.7  getCurrentInstance69

本章小结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  组件通信Props162

6.5.5  计算属性Computed166

6.5.6  导航菜单的优化170

本章小结173

第7章  Vuex状态管理174

7.1  状态管理174

7.1.1  Module175

7.1.2  State176

7.1.3  Getters177

7.1.4  Mutations178

7.1.5  Actions179

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  sessionStorage190

7.4.2  localStorage191

7.4.3  侧栏菜单的刷新交互192

本章小结193

第8章  路由守卫194

8.1  登录逻辑194

8.2  Cookie195

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  校验token202

8.4.3  请求头token204

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  分页Bug413

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