前端学习阶段

我们把学习分为5个阶段

1. 第一阶段

html css

菜鸟教程网学习 html css 别用框架

方法：模仿网站写静态网页

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

js

数据类型，操作符，变量，函数声明，DOM编程，Ajax等等

书籍：

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

DOM编程艺术，案例贯穿，无废话

总结：

github写静态网站部署 不要学框架，不要学框架，不要学框架

2. 第二个阶段

以node作为辅助工具辅助前端工具使用 npm基本指令

webpack+阮一峰es6教程 在webpack官网上学习到开发

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

3. 第三个阶段

学习 vue react angular，推荐vue，门槛低，文档友好

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

库的学习，vue，react的周边库 AntDesgin Element

**建议：**多读官方文档 多读，多想，多练，自己解决最香，因为于你探索的行为作为片段编译到你脑海中记忆更深刻

3.5 第三点五个阶段

回归初始技能，做知识的深度拓展，回顾知识点，巩固所学知识

**建议：**总结出自己的知识库，并主动输出

4. 第四个阶段

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

2. PostCSS和另外两个又有什么区别？PostCSS是通过js转义样式的工具比如px->rem

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

4. webpack和rollup的区别

5. snowpack和vite的区别

6. Vue，React，Angular的区别

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

代码风格：eslint prettier

代码质量：编程体验以及更少的错误，类型校验 TS和flow ts的收益>学习成本 所以推荐~

测试：单元 集成 E2E jest Enzyme puppeteer

APP：PWA，混合式开发RN Weex ，flutter

小程序：trao uni-app

SSR：Next（React）Nuxt（Vue）

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

地址：https://objtube.github.io/front-end-roadmap

国内访问：https://objtube.github.io/front-end-roadmap