“妈我不想去上课！”“不行你是老师！”

老李是一名前端老师，一个正经八百的技术老师
90 后，在 2021 年，终于到了叫他老李的时候~

为了不去上课，这位“老家伙” ，把自己的前端大纲和授课秘籍都发给我了。

记得看完点赞收藏哦~

秘籍涉及技术栈

• HTML5
• CSS3
• JavaScript
• ES6
• 数据可视化
• React
• Node.js
• Vue.js

入门第一阶段

HTML5+CSS3 相关领域知识，你需要学习如下内容，标准的前端工程师知识点。

• 自适应布局，BFC（块级格式化上下文）；
• 选择器，盒模型，浮动，背景，定位，Flex；
• 转换，Web 字体，动画；
• 标签语法，排版标签，布局标签，多媒体标签。

这一阶段你要达成如下目标：

1. 熟练的操作 IDE；
2. 掌握 HTML5 中的标签；
3. 掌握 CSS 语法以及字体属性；
4. 掌握盒模型；
5. 掌握浮动语法；
6. 掌握四种定位何其应用场景；
7. 掌握精灵图；
8. 熟练操作 CSS3 中的变形函数，动画，模型；
9. 掌握弹性盒相关属性；
10. 学习响应式布局 。

本阶段还应该学习到，企业级 PC 端项目的开发流程和规范，包括借助蓝湖协同平台进行网页开发。

入门第二阶段

本阶段来到 Javascript 知识部分，重点基础知识如下：

• 流程控制，循环，函数，对象，数组；
• 宿主环境，节点操作，事件流；
• 高阶函数，排序，重绘，回流;
• 预加载，面向对象，原型；
• 柯里化，箭头函数，闭包。

最新的前端大纲需要学习 ES6+ 语法，具备面向对象编程的能力，可以扩展的知识点为 点九图，ECharts，jQuery，其中 jQuery 包含 jQuery 基础、jQuery 进阶、jQuery 高级三个部分内容，ECharts主要用于数据可视化。

这一阶段你要达成的目标：

1. 掌握 JS 基础语法；
2. 掌握函数式编程；
3. 掌握 JS 内置对象 API 的应用场景和使用方式；
4. 掌握 DOM 与 BOM 操作；
5. 掌握事件的触发机制和传播原理；
6. 掌握递归，闭包，回调函数。

入门第三阶段

本阶段为客户端与服务端交互部分知识，重要知识点如下：

• 客户端与服务器，封装 Ajax；
• axios，跨域，防抖节流；
• HTTP；
• Node.js，MySQL数据库，Express；
• WebSocket，Webpack；
• 身份认证，session，JWT，Git，Token 身份认证。

这一阶段你要达成的目标：

1. 熟练操作 GIT 版本管理工具；
2. 熟练掌握 AJAX 技术；
3. 掌握数据交互之第三方库 axios 的使用以及高阶拦截器；
4. 掌握 NodeJS 模块；
5. 掌握 Express 框架、Express 中间件原理、Express 脚手架；
6. 掌握 Cookie、Session、文件上传等原理；
7. 深入理解 Http 协议，前后端交互流程及原理；
8. 掌握 Webpack 打包原理；
9. 掌握 Mysql 数据库存储方式。

入门第四阶段

这一段是重点了，主要学习两款主流框架，即 VUE 和 React。

• Vue基础、Vue进阶，Vue-cli，Vuex，vue-router；
• Element，Vant，MVVM 原理，React；
• JSX，虚拟 DOM，组件通信，数据管理流程；
• 百度地图，utils，AntedPC，fetch。

这一阶段你要达成的目标：

1. 学会 VUE 基本指令的使用；
2. 掌握事件的绑定方法和流程；
3. 掌握事件修饰符、生命周期、过滤器、watch 侦听器；
4. 掌握组件的创建和注册以及组件通信的使用；
5. 掌握脚手架的创建以及使用；
6. 掌握 Vue 常用技术栈，如 vue-cli、vue-router、vuex；
7. 掌握 vuex 状态管理以及辅助性函数的使用；
8. 掌握 React 的概念、特点以及 jsx 的基本使用；
9. 掌握 React 组件的概念以及注册；
10. 掌握 React 的事件处理。

入门第五阶段

本阶段为小程序专门设计，重要知识点如下：

• 微信小程序，小程序发布流程；
• WXS，微信支付，Mobx，uni-app；
• 绘图容器。

这一阶段你要达成的目标：

1. 掌握微信小程序开发；
2. 掌握微信小程序模块化及组件化的操作；
3. 掌握微信小程序原生语法结合 Promsie 进行业务开发的使用；
4. 掌握微信小程序部署发布上线的能力；
5. 掌握 wxml 和 wxss 实现小程序的界面布局；
6. 掌握微信小程序拓展能力，如组件库、computed、骨架屏的使用；
7. 掌握 uni-app 框架基础语法、熟练使用 HBuilderX 开发工具；
8. 掌握 Canvas、svg 绘图容器使用。

入门第六阶段

多端框平台内容，重要知识点如下：

• React-Naitve，Flutter，Dart，PWA，Taro；
• AST，gitflow 工作流；
• Egg，koa；
• redis，MongoDB。

这一阶段你要达成的目标：

1. 掌握 RN 原生 App 界面布局；
2. 掌握 Flutter 开发环境搭建以及常见的布局方式；
3. 理解 Taro 实现跨平台开发的原理机制；
4. 掌握 Dart 语言基础；
5. 理解 Taro 开发小程序与原生小程序的差异；
6. 通过 PWA 技术强化 H5 网页的原生特性；
7. 运用 Egg 完成项目；
8. 掌握 Koa 的中间件编写；
9. 结合 redis 完成项目；
10. 理解 MongoDB 核心概念与使用。

今天是持续写作的第 154 / 200 天。
求点赞、求评论、求收藏。

点赞、收藏本文总数过 1000，下一份技术栈学习大纲，你们评论随意点，熬秃头也出