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

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

第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