本书是按照《Web前端开发职业技能等级标准2.0版》（高级）编写的配套实践教程，书中涉及的项目代码使用国产的HBuilder X开发工具编译，并且均可在主流浏览器中运行。
本书将中、高职业院校和应用型本科院校的计算机应用、软件技术等相关专业开设的Web前端开发方向的课程体系，与企业Web前端开发岗位能力模型相结合，依据《Web前端开发职业技能等级标准2.0版》（高级）技能要求，形成三位一体的Web前端开发技术知识地图。案例编排以实践能力为导向，以开发企业真实应用为目标，遵循企业软件工程标准和技术开发要求，采用任务驱动的方式，将网页图形绘制、CSS预处理语言、ES9编程、Vue.js、Node.js、网站架构设计、网站性能优化等重要知识单元，充分融入实际案例和应用环境中。本书对《Web前端开发职业技能等级标准2.0版》（高级）要求的重要知识单元都进行了详细的描述，通过案例教学，使读者能够很好地掌握Web前端开发的相关技术。
本书针对不同知识单元设计了多个技术专题，使学员通过重点训练，掌握每个知识单元的核心内容。本书适合作为高级Web前端开发职业技能等级证书考核实践教学的参考用书，也可以作为Web前端开发工作者的学习指导用书。

第1章 实践概述
1.1 实践目标
1.2 实践知识地图
1.3 实施安排
第2章 开发环境：HBuilder X开发工具
2.1 实验目标
2.2 实验任务
2.3 设计思路
2.4 实验实施（跟我做）
2.4.1 步骤一：下载并安装HBuilder X
2.4.2 步骤二：HBuilder X主界面
2.4.3 步骤三：创建项目
2.4.4 步骤四：编辑HTML文件
2.4.5 步骤五：运行
第3章 网页图形绘制：图片水印
3.1 实验目标
3.2 实验任务
3.3 设计思路
3.4 实验实施（跟我做）
3.4.1 步骤一：创建项目和文件
3.4.2 步骤二：准备Canvas环境
3.4.3 步骤三：取/存图片
3.4.4 步骤四：绘制水印
第4章 网页图形绘制：贪吃蛇
4.1 实验目标
4.2 实验任务
4.3 设计思路
4.4 实验实施（跟我做）
4.4.1 步骤一：创建项目和文件
4.4.2 步骤二：制作页面
4.4.3 步骤三：初始化数据
4.4.4 步骤四：创建“蛇”对象
4.4.5 步骤五：生成食物方块
4.4.6 步骤六：绘制蛇
4.4.7 步骤七：游戏开始和键盘事件
第5章 网页图形绘制：登录页面
5.1 实验目标
5.2 实验任务
5.3 设计思路
5.4 实验实施（跟我做）
5.4.1 步骤一：通过JS生成图片验证码
5.4.2 步骤二：在登录页面中应用图片验证码
5.4.3 步骤三：图片验证码
第6章 网页图形绘制：Logo绘制
6.1 实验目标
6.2 实验任务
6.3 设计思路
6.4 实验实施（跟我做）
6.4.1 步骤一：创建项目和文件
6.4.2 步骤二：SVG文件的结构
6.4.3 步骤三：创建Logo图形
6.4.4 步骤四：在HTML页面引入SVG文件
第7章 CSS预处理语言：页面导航栏
7.1 实验目标
7.2 实验任务
7.3 设计思路
7.4 实验实施（跟我做）
7.4.1 步骤一：创建项目和文件
7.4.2 步骤二：引入Less文件
7.4.3 步骤三：搭建导航结构
7.4.4 步骤四：设置公共变量
7.4.5 步骤五：使用嵌套规则设置导航样式
第8章 ES9编程：图形计算器
8.1 实验目标
8.2 实验任务
8.3 设计思路
8.4 实验实施（跟我做）
8.4.1 步骤一：创建项目和文件
8.4.2 步骤二：制作HTML页面
8.4.3 步骤三：制作CSS样式
8.4.4 步骤四：定义图形数据
8.4.5 步骤五：选择计算图形
8.4.6 步骤六：显示图形界面
8.4.7 步骤七：计算结果
第9章 ES9编程：抽
9.1 实验目标
9.2 实验任务
9.3 设计思路
9.4 实验实施（跟我做）
9.4.1 步骤一：创建项目和文件
9.4.2 步骤二：制作HTML页面
9.4.3 步骤三：编写CSS样式
9.4.4 步骤四：页面JS交互逻辑
第10章 Vue.js：学习日历
10.1 实验目标
10.2 实验任务
10.3 设计思路
10.4 实验实施（跟我做）
10.4.1 步骤一：创建项目和文件
10.4.2 步骤二：创建Vue实例
10.4.3 步骤三：渲染学习日历页面
10.4.4 步骤四：创建对话框组件dialogContent
10.4.5 步骤五：编辑课程表（父子组件通信）
第11章 Vue.js：记事本
11.1 实验目标
11.2 实验任务
11.3 设计思路
11.4 实验实施（跟我做）
11.4.1 步骤一：创建项目和文件
11.4.2 步骤二：配置Vue路由规则
11.4.3 步骤三：编辑登录页组件
11.4.4 步骤四：编辑记事本列表页组件
11.4.5 步骤五：创建新增记事本信息组件
第12章 Vue.js：贴吧
12.1 实验目标
12.2 实验任务
12.3 设计思路
12.4 实验实施（跟我做）
12.4.1 步骤一：创建项目和文件
12.4.2 步骤二：安装和配置路由规则
12.4.3 步骤三：安装和配置Element UI
12.4.4 步骤四：创建贴吧首页
12.4.5 步骤五：创建帖子列表页面
12.4.6 步骤六：创建帖子详情页面
第13章 Vue.js：社区团购网
13.1 实验目标
13.2 实验任务
13.3 设计思路
13.4 实验实施（跟我做）
13.4.1 步骤一：创建项目和文件
13.4.2 步骤二：安装和配置路由规则
13.4.3 步骤三：安装Vuex并配置Store
13.4.4 步骤四：创建页头组件
13.4.5 步骤五：引入页头组件
13.4.6 步骤六：准备商品数据和分类数据
13.4.7 步骤七：创建社区团购网首页
13.4.8 步骤八：创建购物车页面
第14章 Vue.js：购物车
14.1 实验目标
14.2 实验任务
14.3 设计思路
14.4 实验实施（跟我做）
14.4.1 步骤一：实现页面布局与基础样式
14.4.2 步骤二：使用CSS美化页面样式
14.4.3 步骤三：绑定数据并设置基础逻辑
14.4.4 步骤四：实现商品选择与全选功能的
14.4.5 步骤五：“删除”按钮
第15章 Vue.js：备忘录
15.1 实验目标
15.2 实验任务