前端学习路线

• html, css和js
• 提升开发环境
• 学习框架
• 提升知识深度与广度
• 软实力
• 享受生活

零. 路线来源

作者：objtube的卢克儿
路线图：https://objtube.github.io/front-end-roadmap/#/
视频：https://www.bilibili.com/video/BV1ZZ4y1H7rU

## 一. html, css和js

首先菜鸟教程上掌握html的常用标签和css的基本属性。要重点掌握如何使用css灵活布局节点。要注意初学者不要过早使用框架，这会导致基础不扎实。然后开始学习js，掌握js的基本语法、数据类型、操作符、变量、函数声明、DOM编程、Ajax等。作者推荐了两本书

《JavaScript高级程序设计》
《JavaScript DOM编程艺术》

试着开发一个静态博客网站，并上传至github。借此来初步了解版本控制工具git的使用方法。总之这一阶段就是打好基础，不要着急学抽象封装好的库和框架。

不要跳步！多看多写！

二. 提升开发环境

首先安装nodejs，安装成功后，包管理工具npm也安装好了。这时候就要去了解npm常用命令以及package.json里面的常见属性。不要着急，先将node当作辅助学习前端的工具使用，了解如何起服务，如何使用nodejs提供的fs包读取本地文件就差不多。

这个阶段更推荐了解的是Webpack。打开Webpack的官网的指南页面，按照官方教程去学习，配合阮一峰老师的es6教程一起使用。官方教程看到“开发”这一章节就可以了，后面比较复杂不太常用到。 根据学到的Webpack知识，可以试着提升一下开发环境，最终使写的网页可以在localhost: 8080被访问，js、css加载正常，并且修改代码后网页会动态刷新。

最后可以在Webpack中引入Sass或Less预处理器，以提升写CSS的效率。

三. 学习框架

基础夯实了之后，可以选则一个框架来深入学习。如react、vue、angular，新手更推荐使用vue，更容易入手，并且官方文档详细，翻译的质量更高。以上三者都是提供工具包来帮助你创建项目工程，无需自己去配置Webpack，省去了很短麻烦。在这一简短，可以短时间的学会很短东西。因为严格来说React、Vue并不是一个框架，而是操作视图UI的lib库，需要配合路由状态管理工具库等一起使用才称得上一个框架。例如，vue有vue-router、vuex，除此之外可能还会引入一些其他的库，比如组件库。像Ant Design、ElementUI等等。

所以在一个项目的开发中，可能需要格外去学习很多的库，这个阶段的建议是：一定要多读官方文档。在开发中遇到的大部分问题，通过阅读文档都能解决。掌握一个框架要多读、多想、多练。

回顾

回顾所学过的知识，查漏补缺。比如网络相关知识，互联网是如何运作的，http、https、DNS的工作原理，浏览器是如何渲染页面的，什么是重绘和重排，http怎么做SEO搜索优化，JS如何做ES6语法，promise的使用，set map的使用。

这个阶段要总结出自己的知识库。被动接受的知识并不能代表真正掌握了知识，需要主动输出，写博客或与大家分享。

四. 提升知识深度与广度

回顾自己的技术栈，在学习的过程中。很多的技术都有替代品，那么他们之间有什么差异？不同的情况下又将如何选择呢？比如Webpack和Rollup.js都是打包工具，但webpack打包时会生成很多冗余的代码，而rollup则不会，所以rollup更适合打包一些lib包。

五. 软实力

抽象思维、视野与影响力。

抽象思维包括对代码的抽象和对业务的抽象。对代码的抽象是将常写的代码封装成工具库，将复杂的代码逻辑抽象简单化，然后提供给团队成员使用。业务的抽象指的是寻找业务场景中的一些共性或一些机器可替代的工作。然后，要拓宽技术和业务的视野。影响力又分为在公司和业内的影响力。

六. 享受生活

多锻炼身体、好好休息、不要熬夜、拥有一个好的向上的心态。垫高显示器，把显示器的中心和视线齐平，保护好颈椎，身体是革命的本钱。最后，还要保护好自己的头发。