前端学习的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.第四个阶段
回顾技术栈：
考虑不同可替代技术之间的差异，了解其不同的应用场景
-
在选择css预处理器的时候，为什么会选择Sass，而不是使用Less？
-
PostCSS和另外两个又有什么区别？
-
css的新方案有了解吗？什么是styled componet css modules
-
webpack和rollup的区别
-
snowpack和vite的区别
-
Vue，React，Angular的区别
-
用函数式编程的redux还是用响应式编程的mobx
统一团队代码格式化风格：ESLint Prettier
保证代码质量：TypeScript Flow
学习测试框架、编写测试用例：单元 、集成 、E2E测试 Jest Enzyme Puppeteer
了解多端开发解决方案：Taro（基于React）、Uni-app（基于Vue）
总结：
提升知识的深度和广度,不要停留在技术表面
5.第五个阶段
提升软实力：
培养抽象思维： 代码抽象 业务抽象
拓宽视野： 业务解决方案的视野
提升影响力，拓展人脉：公司内部 业内 影响力，参与开源项目
6.第六个阶段
最最重要的阶段：
享受你的生活，多锻炼身体，不要熬夜，劳逸结合
垫高你的显示器，保护好你的颈椎
最后
保护好你的头发✌
附前端学习路线图，制作者依然是UP主：objtube的卢克儿
他的网页版路线图真的很不错！
这里是 咸鱼不垫底
不定时更新自己的学习经历，以及分享自己学到的知识！