前端学习的5个阶段以及学习路线

前端学习的5个阶段

本文总结于B站UP主：objtube的卢克儿 的前端学习路线分享视频
av号：av371155356
视频地址：【干货】前端学习路线分享！写了个网站帮助你学习前端！
声明：本总结是我个人想方便留着看才记录的。

1. 第一阶段

html css

菜鸟教程网学习 html css 基础知识， 不要使用 bootstrap 等UI框架

方法：模仿已有网站写静态网页，如使用CSS做出淘宝网首页

编辑器推荐：VsCode 建议初学者可以关闭代码提示

js

基础语法：数据类型，操作符，变量，函数声明，DOM编程，Ajax等等

书籍：

JavaScript高级程序设计，api基础介绍的全

DOM编程艺术，案例贯穿，无废话，书上所有代码都要敲一遍

总结：

写一个静态个人博客网站并部署在github上，掌握git的基本语法与操作

在该阶段 不要学框架，不要学框架，不要学框架

不要学	要学的
jQurey，Vue，React，Angular	DOM编程
Bootstrap，Ant Design，Element UI	CSS
TypeScript	JavaScript

不要跳步，不要跳步，不要跳步

（自己跳步导致基础不佳）

2. 第二个阶段

提升开发环境：

把Node作为辅助工具辅助前端工具使用 学习npm基本指令

学会安装全局module包和本地module包

建议现阶段不要深入学习Node

Webpack+阮一峰ES6教程一同食用

（ES6重点看一下Module章节）

在Webpack官网上学习到开发这一章节

目的是能够以容器的形式访问前端项目，热更新，css预处理

可以引入 Sass 和 Less ，帮助你更加灵活的编写CSS

3.第三个阶段

拥抱框架：

这个阶段就可以体验到框架的便利了 太香了

目前主流前端框架有 Vue、React、Angular

推荐初学者学习Vue 语法简单 文档详细

接着可以学习React 大厂都在用

它们可以用对应的 vue-cli crate-react-app ng-cli 的脚手架来创建工程省去webpack的配置

围绕框架学习：

对于Vue，你要学习Vue Vue-router Vuex

对于React，你要学习React React-dom React-router Redux

同时还可能会接触到 Ant Design，Element UI 等组件库

建议：

多阅读官方文档，多阅读官方文档，多阅读官方文档

3.5 第三点五个阶段

回归基础知识，进行查漏补缺

建议：

总结出自己的知识库，并主动输出

如，写博客或者与他人讲解自己所学知识

4.第四个阶段

回顾技术栈：

考虑不同可替代技术之间的差异，了解其不同的应用场景

1. 在选择css预处理器的时候，为什么会选择Sass，而不是使用Less？

2. PostCSS和另外两个又有什么区别？

3. css的新方案有了解吗？什么是styled componet css modules

4. webpack和rollup的区别

5. snowpack和vite的区别

6. Vue，React，Angular的区别

7. 用函数式编程的redux还是用响应式编程的mobx

统一团队代码格式化风格：ESLint Prettier

保证代码质量：TypeScript Flow

学习测试框架、编写测试用例：单元 、集成 、E2E测试 Jest Enzyme Puppeteer

了解多端开发解决方案：Taro（基于React）、Uni-app（基于Vue）

总结：

提升知识的深度和广度,不要停留在技术表面

5.第五个阶段

提升软实力：

培养抽象思维： 代码抽象 业务抽象

拓宽视野： 业务解决方案的视野

提升影响力，拓展人脉：公司内部 业内 影响力，参与开源项目

6.第六个阶段

最最重要的阶段：

享受你的生活，多锻炼身体，不要熬夜，劳逸结合

垫高你的显示器，保护好你的颈椎

最后

保护好你的头发✌

附前端学习路线图，制作者依然是UP主：objtube的卢克儿

他的网页版路线图真的很不错！

传送门

---

这里是 咸鱼不垫底
不定时更新自己的学习经历，以及分享自己学到的知识！