可能是最全最科学的前端学习路线，从入门到专业。

去年，我在现代前端开发必知系列视频中，从多个方面系统地介绍了现代前端有什么。

当时的目标受众是给有一定从业经验的朋友，因此视频内容大体是一个方向性指引，并不是当成路线规划而设计的。

视频发布后，我发现有相当一部分观众是在校学生或者刚入门、想了解前端的朋友。

无论是哪种，你们更希望的是有一个路线指引。

现代前端涉及的范围相当广泛，不同的学习目标和进度会确定不同的学习路线。

我知道很多朋友是不清楚目标的，不过好在前端的入门和进阶路线可以是相对统一的。

于是，我花了将近一个月的时间，从头到尾设计了一套从入门到进阶，再到专业的且我认为是非常自然的学习线路。

这期视频我就带大家过一遍，并谈谈这样设计的理由。

首先，我们入门篇的学习目标是：能使用前端框架开发小型项目。

一个行业共识是，入门从三件套开始（HTML、CSS 和 JavaScript），这里问题不大，打开 MDN 网站就能免费学。

很多教程会去强调 ES 的版本号，比如 ES6、ES7、ES6+，我认为完全没有必要。

现代前端工具链已经能够很好地支持高级语法，很少有人会在写代码的时候在意我写的是 ES6 还是 ES7，你大概率也学不到很老的 ES5，也不会频繁用到高级语法，所以找到一份不太老的文档就可以开始了，没必要纠结于是 ES 几。

接着是 Chrome 浏览器自带的 DevTools，非常建议在早期就用好这个工具，你可以通过它探索许多教程里讲不到的内容。

然后是 Web API，它的内容相当庞大，不过入门阶段我们只需要学习旁边的这四个即可。

Web API 作为 Web 标准的一部分，会出现在 Web 开发的方方面面，不仅仅是网页开发，因此掌握它们是非常有必要的。

接下来我们可以脱离单文件编码方式，搭上前端工程化的直通车：包管理器。

我们会通过包管理器去复用别人已经写好的代码（依赖），npm 包管理器会随 Node.js 一起安装。这是我们第一次接触 Node.js，不过请先不要深入，把它当作一个工具就好，我们会在进阶篇再学习它。

当使用包管理器时，我们会接触到模块（Module）的概念，不同的包可能采用不同的模块化方案，因此这个时候是学习模块化的好时机。

这里我们需要理解并实践 ESM 和 CJS 这两种主流的模块化方案，比如模块的导入导出语法、加载机制和适用环境等等。

接下来可以直接进入 UI 框架的学习，不过也可以考虑学习 TypeScript。

TypeScript 是开发中/大型前端应用的必要语言，许多文档教程中，也会同时提供 JavaScript 和 TypeScript 两种版本。

因此时间充裕的话，建议花点时间去学习。

UI 框架可谓是五花八门，这里我只规划了主流的 React 和 Vue 两种，其他 UI 框架也可按照相似的思路来学习。

你可以看到同样是写用户界面，虽然不同框架会用不同的方式，但是基本上都可以遵循下面这五个步骤，学习时请参考它们的官方文档，没有必要花冤枉钱专门找教程。

熟悉使用 UI 框架后，我们可以选择再学一个 CSS 框架，它可以帮助我们提升 CSS 的书写效率。

接着我们应该学习框架对应的组件库，它可以大幅度提升 UI 界面的开发效率，入门阶段会使用它们即可。

最后是版本控制系统，也就是 Git 本身以及支持 Git 的代码托管平台。当你要发布一个小项目或是进行多人协作，都很难离开版本控制系统。

完成以上内容后，你已经入门前端开发了，不妨做一些小项目练练手。

细心的观众可能会发现，我们在入门篇并没有提到构建工具（Webpack、Vite 等），

是因为框架已经对他们做了高度集成，并不期望开发者深陷其中。

而我们入门阶段的学习目标是能够开发一个简单的项目，因此也没有必要过早介入。

下面我们进入进阶篇的学习，我们的目标是掌握开发生产级应用的通用技能。

生产级应用面向的场景和要解决的问题会更复杂，这避不开对工具链的掌控，而目前前端工具链大部分是基于 Node.js 编写的，因此首先要学的就是 Node.js。

需要达到的程度是：熟悉高频模块（如 fs/path/os/child_process）的使用方法，能够用 Node.js 完成简单 CLI 程序的开发。

随后，我们需要深入框架的底层工具链，比如构建工具的代码转译器、优化器、打包器、开发服务器和插件系统。

更进一步，我们需要能够用 Node.js 对框架进行代码级别的扩展，比如自定义插件开发，自动化脚本的开发等等。

这一步的学习需要花一些时间，并且有些难度，不过它对于你理解前端工程化是很有帮助的。

在经历了工具链的折磨后，我们来到应用框架，可以稍微松口气了。

因为应用框架为我们从底层封装了通用能力，相比入门阶段学习的 UI 框架，它更像一把瑞士军刀。大家在理解了底层工具链之后，应用框架学起来将会非常容易。

接下来就是一些通用的工程实践了，这些实践都是从真实项目开发中总结而来，没有固定的学习顺序，建议你先了解有这么些东西，项目过程中遇到了再去学习也没问题。

现在，你已经掌握了开发生产级应用的基本技能，找到一份满意的工作应该不在话下。

但是，我们的前端旅程才刚刚开始。

如果把入门阶段比作初中，进阶比作高中，那么到了大学就要选择专业方向，而专业方向往往要用到跨学科的知识，前端也是如此。

前端的专业方向我大致分了这几类：中后台开发，移动端开发，桌面应用开发，数据可视化，图形与互动开发，全栈开发，前端基建以及前端智能化。

你只需要根据职业需要，选择一两个方向深入即可。

当然，这里列出的方向可能并不全，欢迎在评论区留言，让我们一起完善它。

中后台路线从最简单的 CRUD 界面开发开始，到微前端架构，再到低代码，编辑器技术，CMS 系统，都是不错的方向。

移动端路线会从 H5、小程序开始，到底层的容器技术，再到 Native 开发。

桌面应用路线从学习桌面应用框架开始，到客户端应用开发，再到和操作系统强相关的内容。

数据可视化路线从可视化框架开始，到可视化应用开发，再到深入理解可视化背后的原理，比如数据处理、图形语法等等。

图形与互动路线从基本的图形框架开始，到图形互动应用开发，再到底层细节的探索，然后深入到更细分的领域。

全栈开发路线从用 Node.js 开发服务端开始，到全栈框架的使用，到服务端渲染技术，再到服务端技术栈。

前端基建方向从资产开发开始，到脚手架和框架自研，再到研发平台的建设，是一个需要精通框架底层细节，并且把工程化玩很深的事情。

前端智能化方向比较新，是结合传统机器学习、端智能研发框架以及自然语言大模型的综合性方向，也是非常值得探索的。

看到这里，我相信你已经对如何学习现代前端，有了一个比较清晰的认知。

前端就像一座冰山，你能看见的只是上面的一角，但是它下面涉及到的领域比你想象的要大得多。因此前端不是一天两天就能速通，也不是人工智能可以完全取代的。

所以不要焦虑，现在路线已经帮你画好了，一步一个脚印总没错，希望你能找到自己感兴趣的方向并为此而努力，加油。

我是小麦，一位热爱分享的前端工程师，期待以后和你分享更多有用的内容。