Vue.js 3.x+Element Plus前端开发实战

Element Plus是一套采用Vue.js 3.x实现的UI组件库，它为开发者、设计师和产品经理提供了配套设计资源，可以帮助网站快速成型。本书详解Vue.js 3.x和Element Plus开发方法，配套源码、PPT课件。

本书分为两篇，共14章。第一篇（第1~7章）介绍Vue.js 3和Element Plus相关的基础知识，其中包含Vue .js 3的基础知识、Vue.js 3生态Vue Router和Vuex的相关知识与应用、Element Plus常用组件的使用方法以及Vue.js 3和Element Plus配合使用的好处和方法，各章节通过简单的示例，使读者可以快速掌握相关知识；第二篇（第8~14章）讲解如何构建一个功能完整的单页面应用——权限管理系统，为读者掌握Element Plus打下坚实的基础。

本书适合Vue.js 3.x+Element Plus前端开发初学者、Web应用开发人员、UI设计师和产品经理学习，也适合作为高等院校相关专业Web前端开发课程的教材。

趣千厘，多年Web前端开发工程师，熟练掌握Web前端主流框架及其生态，如Vue、React、Angular、Element UI、Vant UI等，并有丰富的项目实战开发经验，熟练框架选型及应用。目前深耕Vue框架及其生态，前端开发团队负责人及开发主力。

前 言

随着互联网前端行业的发展，涌现出了很多优秀的前端框架，Vue.js、Angular.js和React.js并称前端主流三大框架。三大框架各有优劣，其中Vue.js（业内简称Vue，本书也用Vue表示Vue.js）以其轻量、易上手、学习成本低，广受新手或需要快速搭建开发环境的开发者的青睐。伴随着前端框架的流行和社区的活跃，也涌现出了大量适合这些框架的插件或依赖，比较常用的插件包含可以快速进行界面美化的UI框架。适合Vue.js的UI框架也很多，比如 Element、Ant Design Vue、Vant等，既有适合桌面端的框架，也有适合移动端的框架，而最适合初学者上手的当属饿了么公司前端团队研发的Element UI组件库。

Element UI组件库提供了丰富的UI组件，如按钮、图标、菜单、表单等可以满足大部分常用业务的需求，让开发者省去大量的样式调整工作，可专注于业务逻辑；同时，Element UI也是Vue社区使用率最高的UI框架，可见它简单和容易上手。因此，Vue与Element搭配开发成为很多Vue框架开发者入门的标准技能。

本书内容

本书分为两篇，共14章。第一篇（第1~7章）介绍Vue 3.x和Element Plus相关的基础入门知识，内容包括搭建 Vue+Element Plus开发环境，Vue 快速入门，Vue Router 路由管理器，Vuex 全局状态管理模式，Vue+Element 实现列表和分页，Element的Form表单和Select组件，Element的Dialog组件、Message组件和MessageBox组件；第二篇（第8~14章）讲解如何构建一个功能完整的单页面应用——权限管理系统，内容包括搭建项目基础框架、初始化页面布局、实现各模块分页表格展示、添加和编辑功能的实现、删除和其他操作的实现、个人中心功能的实现、GitHub部署项目。

配套资源下载

本书示例源码请用微信扫描下面的二维码获取，也可按扫描后的页面提示把下载链接转发到你的邮箱中下载。如果有疑问或建议，请用电子邮件联系[email protected]，邮件主题写“Vue.js 3.x+Element Plus前端开发实战”。

本书读者

? Vue.js前端开发初学者。

? Element Plus前端开发初学者。

? Web应用开发人员。

? UI设计师。

? 产品经理。

? 高校Web前端开发课程的师生。

编 者

2022年8月

第一篇 Vue 3和Element Plus基础知识

第1章 搭建Vue+Element Plus开发环境 3

1.1 简单认识Vue 3

1.2 简单认识Element与Element Plus 5

1.3 Vue+Element组合开发的优势 6

1.4 搭建Vue 3.x开发环境 8

1.4.1 在不安装Vue的情况下引入Vue 9

1.4.2 安装 Vue 的几种方法 10

1.4.3 Vue 框架的内容结构 12

1.4.4 第一个完整版的 Hello Vue 示例 15

1.5 在Vue中引入Element开发环境 17

1.5.1 在不安装 Element 的情况下引入 Element 17

1.5.2 安装Element的几种方法 17

1.5.3 完整引入Element 18

1.5.4 按需引入 Element 18

1.6 安装一款顺手的开发工具 VScode 21

1.6.1 软件安装 21

1.6.2 插件安装 22

1.7 第一个完整版的Vue+Element Plus示例 23

第2章 Vue快速入门 26

2.1 双向数据绑定 26

2.2 插值 28

2.2.1 文本插值 28

2.2.2 HTML插值 30

2.3 常用的指令 31

2.3.1 v-bind 32

2.3.2 v-on 35

2.3.3 v-if / v-else-if / v-else / v-show 36

2.3.4 v-for 36

2.3.5 v-model 38

2.3.6 v-html 38

2.3.7 v-text 38

2.4 组件 39

2.4.1 组件的注册 39

2.4.2 组件的生命周期钩子 40

2.4.3 组件的通信 44

第3章 Vue Router路由管理器 52

3.1 Vue Router的实现原理 52

3.1.1 Hash模式 53

3.1.2 HTML 5模式 53

3.2 Vue Router的使用方式 53

3.2.1 安装引入 53

3.2.2 使用Vue Router 56

3.3 使用路由模块来实现页面跳转的几种方式 59

3.3.1 router-link标签跳转 59

3.3.2 JS脚本跳转 60

3.4 Vue Router的参数传递 61

3.4.1 字符串 61

3.4.2 对象 61

3.5 单页面多路由区域的操作 63

3.6 Vue Router配置子路由 65

3.7 设置404页面 70

第4章 Vuex全局状态管理模式 73

4.1 不使用 Vuex 与使用 Vuex 的对比 74

4.2 安装和使用Vuex 75

4.2.1 直接下载/CDN引入 75

4.2.2 npm/yarn安装 75

4.2.3 Vue CLI安装 76

4.3 state 78

4.3.1 state的定义 78

4.3.2 state的访问 78

4.4 getters 79

4.5 mutations 80

4.5.1 定义mutations 80

4.5.2 提交mutations 81

4.6 actions 81

4.6.1 注册actions 81

4.6.2 分发actions 82

4.7 modules 83

4.8 mapState、mapGetters、mapMutations和mapActions 85

第5章 Vue+Element实现列表和分页 89

5.1 Table组件 89

5.1.1 Table组件的引入方式 89

5.1.2 Table组件的使用 91

5.2 Pagination 组件 109

5.2.1 Pagination组件的引入方式 109

5.2.2 Pagination组件的用法 110

5.3 实战：数据的列表和分页 112

第6章 Element的Form表单和Select组件 117

6.1 Form表单组件 117

6.1.1 Form组件的引入方式 117

6.1.2 Form组件的使用 121

6.2 Select组件 134

6.2.1 Select组件的组成和引入方式 135

6.2.2 Select组件的使用 136

6.3 实战：一个注册和登录页面 146

第7章 Element的Dialog组件、Message组件和MessageBox组件 158

7.1 Dialog组件 158

7.1.1 Dialog组件的引入和结构 158

7.1.2 Dialog组件的使用 160

7.2 MessageBox组件和$alert、$confirm、$prompt 163

7.2.1 MessageBox组件的引入 163

7.2.2 MessageBox的使用 164

7.3 Message组件和$message 169

7.3.1 Message组件的引入 169

7.3.2 Message组件的使用 170

7.4 实战：一个列表的增、删、改、查功能 172

第二篇 Vue+Element权限管理系统项目实战

第8章 搭建项目基础框架 189

8.1 项目的说明和用到的技术 189

8.1.1 项目简介 189

8.1.2 项目功能 190

8.1.3 项目使用的技术 197

8.2 搭建开发环境 197

8.2.1 安装Git 197

8.2.2 安装Node.js 199

8.2.3 安装VScode 199

8.2.4 创建Vue项目 201

8.2.5 手动安装Vue Router 202

8.2.6 手动安装Vuex 204

8.2.7 手动安装Element Plus 206

8.2.8 引入Element Plus图标集 209

8.2.9 安装CSS预处理器Sass 210

第9章 初始化页面布局 212

9.1 原生样式重置 212

9.2 初始化页面布局 214

9.3 头部组件的封装 220

9.3.1 基础结构 220

9.3.2 中英文切换 222

9.3.3 个人信息展示初步实现 226

9.4 登录页面和404页面的实现 231

9.4.1 封装Axios 232

9.4.2 封装Mock.js 242

9.4.3 登录状态管理 249

9.4.4 通用头部遗留功能完善 252

9.4.5 404页面 257

9.5 左侧导航栏封装 258

9.5.1 静态菜单 258

9.5.2 动态菜单 264

第10章 实现各模块分页表格展示 275

10.1 通用分页表格组件的封装 275

10.2 各模块入口页面的实现 285

10.2.1 审计管理 285

10.2.2 系统管理 290

10.2.3 应用管理 298

第11章 添加和编辑功能的实现 308

11.1 系统管理 308

11.1.1 公告管理 308

11.1.2 用户管理 315

11.1.3 提取公共操作方法 320

11.2 应用管理 328

11.2.1 角色管理 328

11.2.2 机构管理 332

11.2.3 用户管理 335

11.2.4 资源管理 342

第12章 删除和其他操作的实现 348

12.1 删除操作 348

12.2 绑定资源操作 350

第13章 个人中心功能的实现 353

13.1 个人中心布局 353

13.2 基本资料 356

13.3 修改密码 358

13.4 系统消息 361

第14章 GitHub部署项目 370

14.1 认识 GitHub 370

14.2 部署项目 378

14.2.1 GitHub Pages部署 379

14.2.2 GitHub Actions部署 382