2020 大前端学习路线完全指南

15 min readNov 25, 2020

众所周知，大前端统一了所有的前端，特点在于一次开发，同时适用于所有平台。大前端是 Web 统一的时代，利用 Web 不仅能开发出网站，更可以开发手机端 Web 应用和移动端应用程序。然而，对于尚在技术门外的小伙伴，网络上鲜有介绍学习路线的指导性资料。本文正是为了弥补这一不足而生的。

通过阅读本文的内容，你将有以下收获：

为什么要学习大前端；
上手大前端，都需要做哪些准备；
大前端的初、中、高级阶段概述；
进击初级 Web 前端工程师之路；
进击中级 Web 前端工程师之路；
进击高级 Web 前端工程师之路。

开启大前端之门在此，你准备好了吗？

前言

一个问题

寒暄过后，我们进入正题。本次的内容，我们来聊一聊大前端的学习路线。

相信对本篇文章感兴趣的读者都或多或少地对大前端感兴趣，那么在开始学习之前，我们要解决一个问题：

我适合做大前端开发吗？

我适合做大前端开发吗

时至今日，大前端开发技术已经历经了多年的发展。它所支持的平台除了传统意义上的 Web 外，还包括了移动端、OTT，甚至是一些新的物联网设备。这也是其名为“大前端”的原因 — — 它是所有前端的统称。

我们都知道，当今社会是个“看脸”的社会，大前端开发技术与此息息相关。大前端的特点在于一次开发，多端适用。弥补了传统开发过程中，由于各个平台使用的技术栈不同，造成了开发成本的高昂的问题。

可以说，大前端时代是 Web 统一的时代。

说到这，大家可能心里已经有数了：“原来大前端就是和用户打交道啊。” — — 没错，就是这样。

或许你已经觉得自己做好了准备要开始入门了，但是以下几个问题仍然需要你考虑：

前端虽说好上手，薪资水平很诱人，但是知识很散，略显杂乱（这也是这篇文章诞生的原因）；
前端大多和 UI 打交道，某些 UI 实现起来很复杂；
虽说“一次开发，多端适用”，但偶尔还会使用到平台自己的技术栈；
某些情况下，会有很严重的性能问题；
……

但是，如果你：

喜欢和人打交道；
想让自己的产品会说话，希望产品是有“生命力”的；
对漂亮的 UI 以及各式各样的动画效果很感兴趣；
希望看到别人在使用自己的产品，从而感到很自豪；
有足够的耐心，并且能很细致地处理问题，甚至有点吹毛求疵；
……

那就来前端吧，它适合你！

我要做哪些准备

学习前端开发，除了需要准备好你自己外，还需要准备好一台性能较好的电脑，如果涉及的移动端，还需要准备一部手机或平板电脑设备。这些东西将帮助我们学习并开发出优秀的前端产品，因此在选择上，也是有很多讲究的。俗话说：“工欲善其事必先利其器”，也是这个道理。

电脑：推荐使用苹果的 Macbook Pro 13 或 iMac 系列，除了计算性能很强大外，还因为它们有一块颜色非常准的屏幕，这对于前端开发者而言还是很重要的。而且，只有 Mac 才能编译 iOS App。所以 Mac 系列是本人特别推荐给大家的。
测试用的手机、平板设备、浏览器等等：这部分根据具体的产品来确定，基本上会选择一台性能较好的和一台性能较差的。在性能较差的设备上运行我们的程序可以帮助我们更快地发现性能问题。

如果你只是学习前端开发技术，或者想节约一点学习成本，那么测试设备暂时可以用电脑上的虚拟设备来模拟测试机。

前端技术学习三部曲

搞定前端技术栈，我给你个妙招：我把前端技术学习的过程分为了三大部分，用清晰明确的“三步走战略”来攻克前端技术栈。相信我，当你练就了全部武艺之后，月薪过万不是梦。

先来看看一线城市的广州：

北京

在来看看新一线天津

读者可自行去招聘网站检索，目前前端开发人才在职场很吃香！你还等什么？

进击前端初级基础

打基础，我们不能有一丝一毫的妥协。万丈高楼平地起，地基打不好，楼就盖不高。

对于前端而言，**基础就是 HTML、CSS、JavaScript 和 jQuery 四大金刚 **。

好了，我知道你可能看到这，就会感叹：“初级居然要学四门，我还是放弃吧……”

别急，对付这四大金刚，我又有妙招。

HTML 和 CSS

对于 HTML 和 CSS，枯燥的讲述会令初学者感到无聊甚至厌烦

我这里给你推荐一套学习资料,下图

HTML+CSS总共分为八个季度，这套视频完全面向 0 基础的同学

学习目的：

此阶段带领大家进入web前端开发世界，了解web前端的特性及其基本语法规则。

可以让大家可以独立搭建出静态网站能力。

1:掌握HTML基础语法

HTML超文本标记语言【结构层】是web前端入门知识点，让你认知互联网实现原理、以及企业内常见布局方式，即使你没有接触过其他语言，也会轻松的转行到web前端开发。

2:掌握CSS层叠样式

掌握了HTML基础语法以后，你会发现我们网站外观不是很美观，那接下来我们会通过学习CSS层叠样式【样式层】，让我们网站更加美观、美化。

3:真是企业级项目驱动知识点

如果HTML与CSS这部分基础知识掌握了，那我我们就可以利用这些技术去搭建属于我们的静态网站，会体验到真是企业中开发流程与经验。可以让大家具有实际企业操作能力。

关于 HTML 和 CSS，我们要学到什么地步，要怎么学呢？

在开始阶段，熟悉好布局方法，做一个简单的电商网页的基本结构出来，无需考虑特效，也不需要考虑用户交互。
比如，我们可以仿照百度或者谷歌首页，做出来一个搜索引擎首页。当然只是布局和样式，具体的交互和特效不用实现，这是一个比较简单的练习。相对复杂一点的，比如门户网站（新浪、网易等）首页的实现。
当你可以独立徒手完成一个复杂的网页时，这部分内容就掌握的差不多了。推荐用文本编辑器，比如 Notepad++、Sublime 等进行练习。

JavaScript

接下来是 JavaScript，JavaScript总共分为八天，学完基础足以

学习目的:

JavaScript脚本语言简称【JS】，是web前端中最重要一部分知识点，第二阶段主要让学员掌握JS脚本语言核心语法，可以让学员实现人与网站进行交互效果。阶段二涉及到很多bat级别的面试题，也可以让学员轻松解决就业面试中常见面试题。

关于 JavaScript，怎样加强练习和巩固呢？

其实很简单，只要跟着视频中的示例，自己实践一遍即可。这里需要特别注意的是：有很多同学在跟练时，采用对着书中代码敲代码的方式。这其实是效率非常低的学习方法。我个人的建议是：对于视频中的示例，先看懂，理解透。然后学完本节或本章后，自己独立动手尝试实现那些示例。

jQuery

最后就是 jQuery 了

学习目的：

让学员掌握jQuery框架，需要学员理解jQuery框架核心理念【写的少、做的多】。此框架可以辅助学员在企业内部快速搭建动态网站，此技术是前端工程师必备技能。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

学习 jQuery，目的就是能快速的完成网页的特效。但要记住，这套视频只是 jQuery 的入门。我们依旧留4天时间来消化它。好了，到此，前端入门知识就算结束了，这不到三个月的时间或许你会觉得有些无聊枯燥。但我要告诉你的是，这已经是通往前端大神的快捷之路了。还是那句话，对于基础知识的把握，我们不能有一丝一毫的懈怠。不过也有个好消息，这种无聊、枯燥的感觉或许已经结束了！

好了，到此我们总结一下初级阶段的内容：

学习内容：HTML、CSS、JavaScript、jQuery；
学习方法：理论学习（视频、理解）+ 动手实践（一个静态网站）；
学习时间：两周（HTML、CSS）+ 八天（JavaScript）+ 四天（jQuery）。

进击前端中级技能

其实在完成初级阶段的学习后，我们就可以做出点东西了。完成一个电商网站的布局，有特效的开发要求应该没有问题。但是，移动设备的流行席卷全球。我们的产品不能只面向传统的 PC 用户，更多地，应该偏向移动端。这就要 HTML5+CSS3 的组合来应对了，它可以帮我们完成多端的自适应，也就是我们常听到的 “响应式布局”。

所以，前端技术学习的第二阶段会更加有趣，因为在这个阶段里，我们可以真的做出点完整的东西了！

中级阶段我们攻克两大技术点：HTML5 和 CSS3、Node.js。

首先我们来看 HTML5 和 CSS3。

CSS3 为响应式设计奠定了基础。由于我们在之前有了基础，所以这部分学习起来并不费力。这部分我个人推荐大家借助免费的视频教程，实现快速通关。免费视频教程，包含整个 HTML5+CSS3 的内容，如下图所示：

这部分** 一周时间足矣**了。

说到 Node.js，它的意义就很大了。Node 让 js 成为服务器语言，可以完成 IO，网络通信，数据库操作等。可以说，掌握了 Node.js，你就可以变身为全栈工程师了！

学习目的：

主要的目的是可以让学员掌握当下流行node平台开发。此部分课程也是为框架部分课程准备，node平台可以进行服务器端开发，但是在工作当中node平台在前端开发中扮演角色为脚手架功能。次部分课程也涉及版本管理器git知识点。

这部分我们给一周的时间。

下面来到动手实践环节！

完成了这两大部分的学习，你就可以自己做点什么东西出来了！首先一个就是 — — WebApp。

WebApp 实际上就是用户通过浏览器打开的网站。比如我们常见的电商网站，功能性网站，管理网站等等。比如下图所示的自适应布局的网站视图示例：

如果你没有移动端原生开发的经验，开发 WebApp 则是练习的首选。我们完全可以根据市场现有的 WebApp，仿照它来实现近似的 WebApp。

那么，怎样快速地判断某个网站是 WebApp 呢？很简单，使用 Chrome 浏览器的调试控制台即可，唤起控制台的快捷键是 F12。仔细对照下面两张图（使用 Apple 官方网站为例）：

显而易见地，通常我们使用电脑访问 Apple 官网时，会是上图的模样。

此时，我们点击 Toggle device toolbar 按钮。

然后，整个网站就会变成下图中的模样：

没错！这其实就是模拟用户使用移动设备访问网站时的情况。很明显，这是一个响应式布局的网站该有的模样，它是一个 WebApp。

又因为这些网站上的图片等素材我们都可以轻松获取，因此，理论上我们可以自己实现和 Apple 官网完全一样的 WebApp 网站。

再有一个就是 — — 小程序。

目前，各大主流的 App 都上线了⼩程序能⼒的⽀持，各种砍价，抢票，电商，游戏都有运用。各前端团队也都有了专⻔的⼩程序开发团队，以适应更快的⼩程序开发需求。同时 App 中很多关键的功能都被⼩程序所替代，原生 App 正在被小程序慢慢地蚕食着。所以小程序可以说是前端工程师高薪就业的加分技能，换句话说就是成熟开发必备了。

微信官方提供了用于开发微信小程序的完整文档和控制台，读者可以自己尝试做一个小应用或小游戏，没准还能成为爆款小程序呢！

最后就是 — — Hybrid-App，也就是和原声代码结合的混合开发模式。

所谓“混合开发”，顾名思义，就是能直接产出下载到终端的 APP 的，在体验感上可以说已经具备传统 APP 的大部分功能了。这种开发门槛较低，也就是前端开发就可以完成。

下图就是一个移动端混合开发的架构图，可以看到它是可以跨平台运行的。

Hybrid-App 适合有原生开发基础的同学练习。目前，既会原生开发，又会前端 JavaScript 的人才在职场很难得。

好了，到此我们总结一下中级阶段的内容：

学习内容：HTML5、CSS3、Node.js；
学习方法：理论学习（视频教程、理解）+ 动手实践（WebApp、微信小程序或 Hybrid-App）；
学习时间：一周（HTML5、CSS3）+ 一周（Node.js）+ 两周练习，总计一个月。

这部分的学习，动手比理论学习更重要。

进击前端高级提升

来到最后一个阶段，我们开始接触前端框架。

这部分内容很多很杂，但是由于我们已经掌握了这些框架所使用的的语言，因此，在难度上并不会成为我们的障碍。换句话说，前面我们学到的是基础，框架可以让我们的生产力更高效。它们之间的关系就好像 JavaScript 和 jQuery 的关系，虽然看上去听上去很高大上，但实际上还是 JavaScript。

但是，前端框架出现的意义却很重大。它们是改变前端地位的重要标志。最重要的表现，就是前后端分离。

在前后端分离之前，很多后端开发都是又当爹又当妈的，效果不好效率也不高。现在的前端项目，比以前是更加复杂化、多样化了。项目复杂了，问题也多了。

而框架的出现，搞定了很多很繁琐的难题，比如：解决重复引用外部 JS、组件化开发、减少开发周期等等。独立的组件具有了结构（HTML），表现（CSS）和行为（JS）完整的功能，很大程度的节省了代码量，提高了代码的复用性。特别是团队合作的时候，可以很好的提高使用效率。如果你觉得 jQuery 可以减少开发的时间成本了，那其实框架可以比库更快。

下面列举三大前端框架：