前端开发学习路线图，完整学习教程+工具+框架

回看近年的前端发展，不管是之前的散装前端时代，还是后来插件化、模块化的演进，亦或是现如今如火如荼的前端工程化迭代，发展速度实在是太快了，各种框架层出不穷，这些难免会让我们这些学习者眼花缭乱，满腹疑团。

而且每个公司所用的东西也各不相同，所以想给出一张学习前端路径是非常困难的。

但最近两年，前端技术和三大框架地位趋于稳定，作为前端培训届的扛把子，我们整理了这份前端开发学习路径。

这里讲解的是面向新手的学习路径，如果你有基础，可以利用这个路径图查缺补漏。废话不多说，直接开始。

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

第一阶段

想成为一名前端开发人员，第一步就是网页布局和效果实现。也就是我们常说的切图仔，这时候你需要学习HTML+CSS。

此部分的学习目的是把UI设计师给你的设计稿用HTML+CSS还原成网页。这部分的难点是有大量的标签需要你记忆。但是不要紧，刚开始你只要了解这种标签的形式，以后在工作中用的多了就熟练了。做个比喻就是你只要记住心法，以后实战多了，招式自然精通了。

再简单点，就是你不需要记住所有的标签，你只要知道都能实现什么，然后不会就去百度或者查文档。

HTML+CSS学完后，你就可以做出任何漂亮的网页了，只是可能交互效果还实现不了。这时候你就要学习JavaScript了。这是比较难的一部分，因为这部分学的好与坏，直接关系到你后边的学习进度。

但是如果你是初学者，学这部分也不要太执着，非要达到精通的程度，才往下学习。你可以先大体过一遍所有语法，然后直接进入下一个阶段学习。因为以后学习阶段，还会不断的使用这些JS语法。

第二阶段

学习Vue框架，因为前边这些内容虽然可以做出任何WEB界面了，但还不能让你找到一份心仪的工作。所以你需要学一个流行框架。这里首推的就是Vue.js，因为在国内，这是使用最多的框架，而且上手要比React容易一些，所以建议先学习Vue.js。

学完这个后，你会知道什么是数据驱动开发，什么是SPA应用，也能轻松的实现前后端分离和服务端渲染。

第三阶段

当你掌握以上两个阶段，你会发现你还要学习很多相关的前端技能，比如Node.js、TypeScript、Webpack、小程序开发、React.js、ReactNative、Flutter框架、Liunx运维、自动化测试。

如何学和重要的知识点，在路径图中都有详细的介绍，我这里就不过多废话了。

如果你要走完学习路线图的5个阶段，那学习时间会拉的很长，所以建议你在学习的过程中边学边练，即使参加了工作之后，也要根据情况继续精进。