到底学前端要学什么，本文探讨了作者的观点，欢迎评论你对前端学习路径以及方法的理解
硬实力 - 下面详细列出了几个阶段 软实力 - 技术架构 - 组件封装 - 复杂逻辑简化方便其他人使用 - 业务架构 - 技术选型 - 工程化 - 疑难问题解决 影响力 - 公司内 - 好的技术影响力可以方便推动业务落地 - 可以跟同事交流技术，分享，进一步提高自己的技术影响力 - 业内 - 写博客 - 贡献开源代码 - 写书 - 做知识付费（找志同道合的人） - 或者收集有用的资源方便他人
0 前言 一些小建议
不管是哪一个阶段，都要动手去做，比如你在掘金看了一百篇文章，那都是别人的，只有自己真正动手做了一遍，才有机会成为自己的
学习的顺序应该是 what how why 的顺序，这个技术点是什么，比如什么是html 如何写html html都包括什么，最后熟练了以后再深入思考，why 为什么使用html 使用其他的不可以吗？
学一个技术最好带着目标学习。比如学完了要做成一个什么什么东西，这样效果会更好
学会自己问自己问题，如果可以给自己解释明白了，说明会了一些，如果不能给自己解释明白，还要继续学习
第一阶段 起步篇
学完的成果是可以使用html语义化搭建页面结构，还原设计稿，再添加css完成布局以及样式的高度还原
- Html
- Css
- Html5
- Css3
- JavaScript 可以看我之前写的js语法的一篇文章 三万字javaScript基础语法总结| 掘金技术征文（都是精华 一定要写一遍，一定要写一遍， 一定要写一遍！不然只看的话没有什么用， 更加系统的学习js的话推荐看红宝书 最新的一版，里面交代的也更清晰，看完这个再看一遍《JavaScript dom编程艺术》了解js如何操作dom的 这两本书看完以后，先不用深入看js了，后面掌握的多了再深入看 《你不知道的js系列》
推荐的资料是mdn 或者菜鸟教程，当然学的过程中还要善用搜索引擎，多看他人优秀的博客或者公众号，比如:前端关宇 跟我一起学前端
第二阶段 体验工程化篇
青铜篇的痛点有每次都要修改完页面以后都要手动刷新浏览器看到最新的效果，可以通过工具来提高生产力
- 学会安装node npm
- 看node文档或者github 搜索node基本模块的介绍的文章， 不要往下学express koa egg mysql mongodb 等，除非你有足够的精力和时间，可以让你了解一门语言前后端都做的感觉。
- 学习webpack，搭建一个简单开发环境，这个环境可以提供：
- import语法的使用
- es6语法的使用 以及转换成es5
- 本地通过webpack-dev-server 起一个服务然后可以自动打开浏览器以及保存自动刷新的效果
- 配置loaders 处理css
- 后续可以再学习如何处理css预处理语言的书写以及配置 比如如何在webpack里面配置less
第三阶段 体验ui框架或者库篇
上面解决了一些工程化的问题，但是js还是操作dom的方式。为了提高开发效率，避免开发手动操作dom,很多ui开发框架都做了抽象和封装，好处是提高开发效率以及规范大家书写代码的方式，缺点是对新手来说，不了解框架实现原理，一味使用框架，容器让基础薄弱。这时候就要自己有意识回头去看第一阶段或者第二阶段遗漏的知识点了，再自己总结，xmind或者md格式的都可以。最后输出成blog或者给同事讲讲，让自己真正掌握。
比较主流的ui库有 库和框架的区别在于库专注解决一部分问题，框架是多个库的组合，我的理解。 具体的用法可以看对应的文档，vue的文档做的很好，react的文档可能是大牛们不稀罕写文档吧，可以看看其他的优秀的作者写的使用以及源码解析系列的文章比如 手动at 卡颂 React技术揭秘
- Vue
- React
- Angular(这个应该是框架) Angular我个人感觉文档写的最好，还有丰富的在线代码示例，对Ts支持友好
对应周边的生态有
- vue系列： vue-router(spa应用的路由) + vuex(状态管理统一解决方案) + ssr方案（nuxt.js）
- React系列： raect-dom + react-router + Redux 或者 mobx
第四阶段 查缺补漏 可能下面有的点对有的对人来说不是需要补充的，可以不必在意
- 网络
- 输入url的时候都发生了什么
- http
- https
- websocket
- rpc通信
- 更多细节需要自己不断完善
- 浏览器
- 浏览器组成
- 浏览器如何渲染页面的
- 浏览器页面调试工具的使用，
- 等等更多知识点
- 数据结构和算法
- 基本的数据结构 js实现一遍 其他语言类似
- 基本的套路或者说算法思想
- 设计模式
- 上面三个阶段了里面有不熟悉的地方，看文档，看他人的对应的解读，自己实战，总结输出
第五阶段 注重深度和广度
- 为什么用这个技术而不用那个技术，优缺点，正所谓知己知彼才可以更好的做技术选型。
- 注重知识深度，上面选定一个框架，看源码，提高自己的工程实践能力。
- 注重知识的广度。
- 沉淀解决方案
- lowCode system 通过配置生成简单的运营页面，查看其他大厂或者github的开源实现， 优点以及缺点，自己实现的时候，能不能实现的更好
- 前端监控方案
- 更多等你探索
第六阶段 上面知识点的综合运用
- 上面都学会了就可以了么?
- 不是的，上面只是招式，更重要的是如何解决问题，以及如何快速解决问题的的 术 ,需要不断磨练，不断总结。我还没到这个阶段，等后面再说说。
第七阶段 更重要的事
- 锻炼身体
- 保护好你的颈椎，显示器和视线持平
- 保护好您的头发
- 积极乐观向上的心态
- 好好休息不要熬夜
- 爱自己爱家人，做一个好人
