现代前端 Web 开发路线图

我写这篇文章是为了那些刚开始接触前端开发的人。如果你是编程新手，最好先学习一门低级编程语言，以便更深入地理解算法和计算机。不过，在这篇文章中，我将为前端新手提供一份路线图。当然，这不是唯一的方法，但我想以问卷调查的形式与大家分享我所知道的方法。那么，让我们开始吧！

我应该从 React、Vue 还是 Angular 开始？

一个都不能。我知道 React、Vue、Angular 和 TikTok 目前非常流行，但如果你想精通其中任何一个，你都需要掌握 JavaScript。这些框架是建立在 JavaScript 之上的，而不是 JavaScript 建立在 JavaScript 之上。你应该从学习前端开始，而不是学习框架，而且请不要使用 TikTok。

我应该从哪里开始学习前端？

从基础开始。在前端 Web 开发中，你会在相同的环境中使用不同的技术。为了达到最佳效果，你最好彻底学习每一项技术。你应该首先学习HTML。然后学习CSS进行样式设置，之后再提升你的JavaScript技能。当你能够熟练掌握 HTML、CSS 和 JavaScript 的混合编程时，无论你使用哪种框架，你都将拥有构建复杂界面的基础知识，就像忍者一样。

<h1>Hello world!</h1>，我准备好了吗？

嗯，有点儿。HTML 相对简单，但你应该了解输入、表单、列表、表格和元标签之类的东西。多尝试，不要因为它们看起来简单就跳过它们。正如我之前所说，在前端开发中你会同时使用几种技术。你永远不知道在随机的挑战性情况下，哪一种能帮你节省时间。

这个 CSS boi 很棘手。

是的。让我们记住这个传说：

当你刚开始编写 CSS 时，它总是有自己的想法。不要被它吓倒。随着你练习的增多，你会发现使用它很有趣（IE 开发人员可能会不这么认为）。记住：CSS 是用户看到的，并且时不时地也是他们体验到的。好好学习它吧。

我将给出一些对你研究和学习至关重要的关键词：

• 视口
• EM 和 REM 单位
• 响应式设计
• 弹性盒子
• CSS 网格，FR 单元
• CSS 变量

提示：使用caniuse.com确定您现在可以开始使用的 CSS 或 HTML 功能。并非所有浏览器都支持所有功能或 API。

那么 Bootstrap 怎么样？

管他呢。过早使用 Bootstrap 会让你变得懒惰，在这个领域也缺乏竞争力。一旦你彻底学会了 CSS，你就可以创建自己的样式结构了。

我想深入研究 JavaScript。

当然。但不要钻研太深。学习 JavaScript 的最好方法就是学习 JavaScript。不是 JQuery，不是 React，不是 Vue，不是……好吧，你懂的。JavaScript 是老朋友了，自诞生以来已经走过了漫长的道路。确保你的学习资料涵盖最新的内容。要掌握现代 JavaScript，学习ES6特性并搜索ECMAScript 的含义。

提示：从var移至const和let。

提示：不要忘记查看async/await。

等等...JQuery 怎么样？

也别想了。过早使用 JQuery 会让你变得懒惰，在这个领域失去竞争力。一旦你彻底学习了 JavaScript，你就再也不需要 JQuery 了。没错，这些话都是从上面复制过来的，因为我以前用过 JQuery，后来变得懒惰了。现在明白了吗？

提示：今年是哪一年？！新项目别用 JQuery。

在进入框架之前我还应该了解其他什么吗？

是的，亲爱的读者。以下是清单：

• CSS预处理器
• 新公共管理
• 巴别塔
• Webpack

你可以学习像SASS这样的 CSS 预处理器，赋予 CSS 超能力。你也可以搜索列表中的其他内容，了解当今框架的工作原理。尝试用它们创建一个Webpack 项目，以加深理解。

大问题：我应该选择哪一个；React、Vue 还是 Angular？

React。与你的想法相反，这个答案其实很客观。我之所以只用一个词来回答你，纯粹是因为 React 更常用。更重要的是，除非你开始学习其中一种，否则在两者之间做出选择会让你身心俱疲。

当然，你可以选择 Vue 来尝试不同的方法，或者选择 Angular，原因只有天知道（好吧，这只是我的个人观点）。但重点是，没有人会阻止你学习所有这些。只是不要在它们之间做出选择，浪费你的时间和精力。

另外，刚开始学习的时候，要注意状态管理。根据你使用的框架，学习Redux、Context API、Vuex或其他核心状态管理工具。

提示： 接下来，Nuxt和Gatsby是消除客户端渲染和SPA弊端的绝佳工具。如果你不明白我的意思，没关系。记住这些工具，并做好功课。

下一步是什么？

作为前端开发者，你应该学习更多关于UI和UX 的知识。你处于一个非常关键的位置，用户通过你与应用进行交互。丰富的 UX 知识将帮助你更好地创建用户喜爱的界面。此外，你还需要学习更多关于颜色、字体和负空间的知识。

一定要研究测试和TypeScript。除此之外，我真的不知道。一旦你体验过构建可以与人交互的东西的感觉，相信我，你就会知道下一步该做什么。

提示：研究一下Jest之类的工具来进行测试。

哥们，什么？！要学的东西太多了！

不要操之过急，慢慢来。不要从一个地方跳到另一个地方，要坚持自己的方向。扎实的核心技术基础是关键。学好基础知识，才能学得更多。不要让自己背负“学所有东西”的负担。你做不到，也绝对不需要。

这是什么路线图？你提到的大部分内容你都没解释？

或许不是最好的，但关键就在于此。比我经验丰富、知识渊博的人太多了。搜索Egghead.io、搜索 YouTube、搜索 Twitter。找到他们，向他们学习。养成用谷歌搜索一切的习惯。在你选择的职业中，你应该不断探索和学习。我写这篇文章只是想为新人指明方向，给他们一个起点。

我希望这篇文章对您有所帮助，您也可以在 Twitter 上关注我以获取未来的内容：

twitter.com/oznbll