Web前端工程师应该掌握哪些技能及知识点？

HTML

HTML 是网页开发的基础，从最简单的网页开发基础入手，使用常见的标签制作网页内容，包含了以下技术点：

CSS

在 HTML 结构的基础上，通过浮动、定位、Flex 精细控制网页布局，通过背景、圆角、阴影、渐变等美装饰美化网页内容，结合转换、过渡、动画高级特性增强用户体验，能够编写大型综合性网页。

选择器 | 规则声明 | 盒模型 | 文档流 | 浮动 | 字体 | 背景 | 伪类 | 3大特征 | 圆角 | 限影 | 过渡 | 透明 | 伪元素 | 定位 | Web 字体

电商网页制作

基于设计稿编写网页，确保网页布局的高还原度，综合运用 HTML、CSS 的基础知识，归纳使用技巧，提升综合实战水平，借助蓝湖协同平台，体验真实团队开发流程。

移动端布局

深入理解屏幕相关知识，了解 PC 屏幕与移动屏幕本质上的差异，结合视口、媒体查询、rem 等基础知识整合出稳定高效的移动屏幕适配方案。

响应式布局

基于媒体查询开发跨终端的网页，通过 Bootstrap 体会框架封装的高效性及组件化的复用性等实战化特征。

Bootstrap | 响应断点 | 栅格化 | 组件

2D&3D 转换与动画

基于 CSS 的 2D 与 3D 转换特性制作动效网页

2D 转换 | 3D 转换 | 动画 animation | 立方体制作

团队实战

基于设计稿编写网页，确保网页布局的高还原度，针对移动设备的特征应用差异化的技术解决方案，归纳开发技巧，提升综合实战水平，借助蓝湖协同平台，体验真实团队开发流程。

JavaScript 基础语法

了解语言的基本概念，熟识语法规则，培养语言基础逻辑能力，建立良好的编程思维，具有一定的语言驾驭能力。

变量 | 数据类型 | 运算符 | 类型转称 | 函数 | 对象 | 流程控制 | 数组 | Math | 内置函数

WebAPI

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

宿主环境 | 节点查找 | 节点操作 | 节点关系 | 事件 | 事件流 | 事件委托 | 间歇函数 | 高阶函数 | 伪数组 | 执行环境 | 自执行函数 | 命名空间 | 排序 | 延时函数 | 正则 | 表单 | 自定义属性 | 重绘 | 回流 | 预加载 | 懒加载 | 生命周期

JavaScript 高级 / ES6+

深入理解 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性，注重抽象思维的培养，具备面向对象编程的的能力。

jQuery

借助 jQuery 提升开发的效率，同时借鉴和学习 jQuery 的封装实现思想，巩固面向对象的相关知识，加深对面象对象的理解。

选择器 | 节点方法 | 动画 | 动画队列 | 事件 | 事件委托 | 链式操作 | 插件 | 插件机制

数据可视化 ECharts 实战

综合 JavaScript、HTML、CSS 所学的知识，针对企业现实开发需求，基于 ECharts 数据可视化插件归纳数据可视化领域解决方案，提升知识综合运用水平。

Flex / 媒体查询 / 点九图 / ECharts / jQuery

Ajax

系统的学习网页数据交互的 Ajax 技术，建立前后端交互的知识体系，为学生夯实网络编程的基础，为后期高级课程的学习做好铺垫。

Git

借助 Git 对项目进行版本控制，掌握实际开发中那些必知必会的 Git 操作。

Node 基础

全面系统讲解 Node.js 中最核心的、必知必会的概念，能够基于模块化的开发思想优化项目代码，编写出高效、健壮的代码，同时培养出 Node.js 的编程思维。

npm

掌握 npm 的使用，能够在实际开发中利用 npm 上的资源提高自己的开发效率，根据项目需求下载并安装合适的包。同时也能够根据遵守规范的包结构开发出属于自己的包并发布到 npm。

MySQL

了解后端数据库的基本使用，能够使用常见的 SQL 语句操作数据库，并且能够使用 MySQL 模块在项目中操作 MySQL 数据库，为实现从前端程序员进阶到全栈程序员做准备。

数据库的基本概念 | 安装并配置 MySQL | MySQL Workbench | SQL 语句 | mysql 模块

Express

掌握如何使用 Express 结合 MySQL 编写后端 API 接口项目，为学生构建完整的前后端知识体系，培养出懂后端的前端程序员，提升学生的职场竞争力，迈出从前端程序员进阶到全栈程序员关键的一步。

大事件项目

基于 jQuery + Ajax + 模板引擎 + Git 等技术，完成综合性的后台管理项目开发，巩固前面课程所学的技术点，积累项目开发经验，提升综合解决问题的能力。

webpack

掌握 ES6 模块化的基本使用，熟悉异步编程的高级用法。同时建立前端工程化的开发思想，为工程化项目中脚手架的使用做基础铺垫。

Vue 基础

掌握 Vue3.x 中常用指令及 API 的使用，使用 Vue 语法对常见页面进行开发，了解组件化的开发思想，掌握路由的使用，熟悉组件之间实现数据共享的方式，知道 ElementUI 的基本使用，掌握组件封装的原理，熟悉脚手架工具的使用，了解数据驱动视图的思想。

头条移动端项目

运用 Vue 的基本语法开发移动端网站，熟悉组件封装的技巧，掌握 Vant 的使用，了解项目业务的开发思路，了解节流和防抖的应用场景。

HR-saas中台管理项目(vue)

深度使用 Vue 相关的技术，包括 Vue.js（MVVM 框架）、Vuex（状态共享）、Vue-Router（路由表）、Vue-CLI（Vue 脚手架）、ElementUI（VueUI 框架）开发人力资源管理平台，对人力资源各种常见的业务使用以上技术进行实现。展示常见的路由权限拦截、Token 角色认证、动态路由解析、重置、权限点设置、审批流程、PDF 打印、Excel 导入导出、跨域反向代理等业务，掌握 Vue 开发复杂 PC 管理项目的使用，掌握 Vuex 在 Vue 项目的深度应用。

小兔鲜儿电商管理前台项目

基于 vue3.0 的组合 AP I方式与选项 API 的方式开发的一个综合品类的电商前台系统。实现了一套完整的电商业务流程，从首页，类目，搜索，品牌，商品详情，购物车，结算，支付，个人中心，订单管理，收货地址管理，评价中心，和其他个人信息管理业务。

核心技术：vue3.0 框架，vue-cli 项目脚手架，vue-router 路由，vuex 状态管理，vuex-persistedstate 状态持久化，less 预处理器，style-resoures-loader 样式资源加载器，normalize.css 样式库，@vueuse/core 组合API工具库，power set 算法库，dayjs 日期库，vue-infinite-loading 滚动加载，vee-validate 表单校验，mockjs 本地数据模拟，http://http://soket.io即时通讯。封装 UI 组件库：carousel 组件，more 组件，bread 组件，skeleton 组件，checkbox 组件，radio 组件，select 组件，dialog 组件，message 组件，confirm 组件，pagination 组件，steps 组件，timeline 组件，tabs 组件，loading 组件，city 组件，v-lazy 指令。核心业务：数据懒加载，图片懒加载，骨架屏效果，无限列表，sku 规格选择，云端购物车 & 本地购物车，微信支付 & 支付宝支付，商品类目，订单管理。

Vue 原理

理解 MVVM 模式的实现原理，了解 defineProperty 的使用，了解 Proxy 的使用，掌握组件封装的原理。

小程序基础

了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。

uni-app

理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。

小程序电商项目

基于真实需求综合运用小程序开发的相关知识，突出小程序 API 的真实应用场景，强化和巩固小程序开发的相关知识，提升综合解决问题的能力。

React 基础

掌握 React 的基本语法，掌握 JSX 的常用语法，掌握 create-react-app 的使用，掌握路由的使用，掌握 React 中组件化开发的能力，了解高阶组件的基本使用，熟悉组件通信的常用方法。

Redux

掌握 Redux 的数据管理流程，掌握 Redux 中各组成部分的作用，掌握 React-Redux 的基本使用，了解展示组件和容器组件的区别，了解单向数据流的概念，掌握 React 中 dev-tools 的使用。

租房移动端项目

掌握 Reac 技术栈进行移动端网站的能力，了解百度地图 SDK 的基本使用，掌握 antd 的基本使用，了解项目中常见业务的开发思路，了解组件化开发思想，了解 CSS in JS 思想。

TypeScript 基础

理解类型系统理解并能使用泛型了解类型的推断过程了解类型的高级用法，能理解代码

TypeScript 高阶语法

理解类型系统理解并能使用泛型了解类型的推断过程了解类型的高级用法，能理解代码

Hooks

理解 Effect Hooks 和 State Hooks 设计思想理解 Hooks 应用场景掌握使用 Hooks 封装一些组件

useState | useEffect | useContext | 自定义 Hooks

函数式编程

掌握 JavaScript 函数式编程范式，为阅读前沿框架源码，学习框架设计思想做储备，例如：React、RxJS、cycleJS、lodashJS、underscoreJS 等。

纯函数 | 柯里化 | 函数组合 | Point Free | 声明式与命令式

Redux 中间件

理解业内比较主流的 2 种数据管理设计思想掌握如何运用合适的数据管理工具在项目能通过查看源码对项目做一些性能优化

React-Redux | redux-thunk | redux-saga

小兔鲜儿后台管理项目

掌握基于 React 组件化技术解决方案掌握结合 Redux 状态管理掌握用户权限解决方案掌握 AI 智能推荐方案掌握秒杀 / 拼团 / 砍价方案掌握物流追踪方案掌握数据导出方案掌握第三方支付方案掌握即时通讯方案掌握短信服务方案掌握流媒体方案掌握单点登录方案掌握服务提醒方案

React Native 交友项目

掌握 RN 原生 APP 界面布局掌握第三方 RN 组件的集成和改造掌握第三方 Android 原生组件的集成和使用掌握高德定位自动获取终端经纬度掌握腾讯逆地址掌握 JWT 交互模式掌握 Mobx 管理数据掌握自定义 SVG 绘制掌握 RN 模态窗口的实现掌握图文混排布局掌握 RN 本地相册访问掌握 RN 本地相机调用掌握高德地图实现定位功能掌握 RN 多图片上传

Flutter 小兔鲜儿项目

掌握 Flutter 开发环境搭建掌握 Dart 语言基础掌握 Flutter 常见的布局方式理解组件的概念及分类掌握基础组件、容器类组件、可滚动组件、功能性组件的应用

小兔鲜儿原生小程序精讲

理解 Taro 实现跨平台开发的原理机制理解单 JSX 组件与原生小程序组件的对应关系理解 Taro 开发小程序与原生小程序的差异掌握原生小程序消息推送方案掌握原生小程序多线程方案掌握原生小程序云开发等高级方案

PWA

了解 PWA 能够实现通过 PWA 技术强化 H5 网页的原生特性了解当前 PWA 技术的浏览器兼容情况

webpack 核心

学会 webpack 的配置理解 webpack 的作用与原理上手项目的打包过程配置拥有工程化的前端思维掌握前端工程化的常见工具及工作原理了解 webpack 性能优化了解 webpack 中的 tapable 了解 AST 的应用深入学习 webpack 原理，手写 webpack

脚手架工具

掌握 vue-cli 及相关配置掌握 vue-cli 初始化单页及多页项目掌握使用 create-react-app 搭建项目了解 create-react-app 的原理掌握 angular-cli 搭建项目了解 angular-cli 的原理掌握一个基础 cli 的功能实现

vue-cli | create-react-app | angular-cli | CLI 原理

git flow 全流程

掌握提交相关：git rebase/git commit/git reflog/git log 掌握子模块: submodule/subtree 掌握分支管理：git fetch/git checkout/git merge 掌握重置及回退：git reset/git checkout/git rm 掌握多人协同 git 工作流掌握 git 常见的分支管理命令