面向职业院校和应用型本科院校开展1+X证书制度试点工作是落实《国家职业教育改革实施方案》的重要内容之一，为了便于X证书标准融入院校学历教育，工业和信息化部教育与考试中心组织编写了《Web前端开发（高级）》教材。本教材以《Web前端开发职业技能等级标准》（高级）为编写依据，分上、下两册，包括前端高效开发框架技术与应用、移动Web设计与开发、性能优化与自动化技术三篇，分别对应《Web前端开发职业技能等级标准》（高级）涉及的三门核心课程：“前端高效开发框架技术与应用”“移动Web设计与开发”“性能优化与自动化技术”。本教材以模块化的结构组织各篇及其章节，以任务驱动的方式安排教材内容，选取移动Web典型应用作为教学案例。本教材可用于1+X证书制度试点工作中的Web前端开发职业技能等级证书教学和培训，也可以作为期望从事Web前端开发职业的应届毕业生和社会在职人员的自学参考用书。

谭志彬，北京大学无线电电子学系硕士毕业，曾在高科技企业从事办公自动化系统的开发应用，是国家计算机和通信专业技术资格考试标准的主要起草或审定者，主持开发过考务管理系统、上机考试系统、阅卷系统。

第一篇 前端高效开发框架
技术与应用
第1章 Vue基础 2
1.1 Vue 框架概述 3
1.1.1 MVX模式简介 3
1.1.2 Vue框架简介 4
1.1.3 Vue.js的安装与使用 6
1.2 Vue基础语法 8
1.2.1 实例对象 8
1.2.2 生命周期 10
1.2.3 模板语法 14
1.2.4 计算属性 19
1.2.5 methods方法 21
1.3 Vue渲染 21
1.3.1 列表渲染 21
1.3.2 条件渲染 28
1.4 Vue事件与表单 32
1.4.1 事件处理 32
1.4.2 事件对象 36
1.4.3 事件委派 38
1.4.4 表单处理 39
1.5 Vue基础应用 43
1.6 本章小结 46
第2章 Vue组件 47
2.1 Vue 组件概述 48
2.1.1 组件简介 48
2.1.2 组件对象剖析 50
2.1.3 Vue组件的data属性 52
2.1.4 props传递数据 55
2.2 事件通信 59
2.2.1 父子组件事件通信 59
2.2.2 非父子组件事件通信 62
2.2.3 插槽 65
2.3 组件类型 73
2.3.1 自定义组件v-model
双向绑定 73
2.3.2 动态组件 75
2.3.3 递归组件 77
2.4 Vue组件应用 79
2.4.1 分页组件 79
2.4.2 购物车组件 80
2.5 本章小结 83
第3章 Vue工程化工具 84
3.1 搭建Node.js环境 85
3.1.1 Node.js简介 85
3.1.2 Node.js的下载与安装 85
3.1.3 npm的安装与使用 86
3.1.4 yarn的安装与使用 91
3.2 Vue CLI概述 92
3.2.1 Vue CLI简介 92
3.2.2 Vue CLI的使用 93
3.3 Vue CLI项目的配置 94
3.4 JavaScript模块 98
3.4.1 CommonJS模块 100
3.4.2 ES6模块 101
3.5 vue-devtools调试工具 104
3.5.1 vue-devtools的下载
与安装 104
3.5.2 vue-devtools的使用 104
3.6 本章小结 104
第4章 Express服务器开发 106
4.1 Express概述 107
4.1.1 创建Express应用程序 107
4.1.2 Express路由 109
4.1.3 pug视图模板 114
4.2 请求与上传文件 116
4.2.1 GET请求和POST请求 116
4.2.2 上传文件 118
4.3 Session概述 121
4.3.1 Session简介 121
4.3.2 Session的使用 121
4.4 构建RESTful API 122
4.5 Nodemon概述 125
4.6 本章小结 126
第5章 axios网络交互 128
5.1 axios的基本使用 129
5.1.1 axios简介 129
5.1.2 axios的使用 129
5.2 发送请求 130
5.2.1 发送GET请求 130
5.2.2 发送POST请求 131
5.3 axios跨域问题 132
5.4 axios网络交互应用 134
5.5 本章小结 136
第6章 Vue路由 138
6.1 SPA和vue-router 139
6.1.1 SPA 139
6.1.2 vue-router 139
6.2 路由的使用 141
6.2.1 定义路由 141
6.2.2 动态路由 142
6.2.3 路由参数 142
6.2.4 在路由组件中使用AJAX 143
6.3 路由导航 144
6.3.1 路由导航守卫 144
6.3.2 编程式路由导航 145
6.3.3 全局路由导航守卫 146
6.4 嵌套路由和命名路由视图 147
6.4.1 嵌套路由 147
6.4.2 命名路由视图 149
6.5 Vue路由应用 150
6.5.1 用户登录与校验 150
6.5.2 注销功能及存在的问题 152
6.6 本章小结 154
第7章 Vuex状态管理 156
7.1 Vuex状态管理概述 157
7.1.1 Vue组件共享数据的方式 157
7.1.2 Vuex的安装与使用 158
7.2 Vuex.Store对象的接口 159
7.2.1 State 160
7.2.2 Getters 162
7.2.3 Mutations 163
7.2.4 Actions 165
7.3 Vuex多模块 167
7.4 Vuex插件 168
7.5 重新组织Vuex目录结构 168
7.6 本章小结 169
第8章 Vue UI 170
8.1 Vue UI概述 171
8.1.1 Vue UI简介 171
8.1.2 Element的安装与使用 171
8.2 Element UI组件库 173
8.3 第三方扩展库Express 174
8.3.1 集成Express和Vue 174
8.3.2 配置Express和Vue 174
8.4 本章小结 177