40多岁，没有任何技术背景，这就是我如何在两周内学会一个前端框架

在过去的两周里，我分享了我在没有任何先验知识、经验或指导的情况下快速学习 HTML、CSS 和 JavaScript 基础知识的个人经历。但是，如果您的目标和我一样，是成为一名全栈 Web 开发人员或能够创建自己的产品的独立开发人员，那么掌握这三个基本技术堆栈是不够的。因此，本周，我将分享完整的初学者指南，以快速学习前端框架的基础知识并创建简单的产品。本帖涉及的所有学习资源都是免费的！

完成学习后，我制作了一个像这样的网络应用程序。请原谅我没有部署自己的项目，而是使用相关教程中的项目示例。这是我自己的存储库。事实上，我已经复制了示例项目中 90% 以上的效果。不部署的原因稍后讨论。可以看到，这是一个比较完整的项目，涉及到前后端通信、前端动画设计、生命周期钩子设计、后端数据结构设计、状态管理、路由管理等很多方面。我什至在这个项目中集成了富文本编辑器和 tailwindcss，使前端看起来非常专业。如果连我都能快速掌握前端框架的基础知识，你为什么不能呢？

按照惯例，先说一下我在前端框架学习过程中走过的弯路。

前端框架这么多，初学者应该选择哪一个呢？

这是初学者，尤其是自学初学者最困惑的问题之一。这是一个高度个性化的问题，涉及你的基本技能、学习路径选择、学习能力、短期和长期目标，甚至你所居住的国家和地区，因此很难给出标准答案。初学者通常缺乏知识和行业经验来评估所有这些因素中的最佳选择。

这是一个至关重要的问题，因为前端框架与构建 Web 应用程序时使用的主要编程语言密切相关。另外，如果您选择不太流行的框架，您可能会很难找到相关的社区资源，甚至在学习课程和与他人合作时感到受到限制。我对此困惑了很长一段时间，甚至尝试过学习Flask和Django，但最终因为各种原因放弃了。

关于这个问题我可以写一篇一万字的文章，但这不是今天帖子的重点。所以这是我的简短回答：如果你正在找工作，最好学习 React 并将其作为你的主要框架。如果你像我一样是一个基础知识很少的初学者，并且想快速学习、快速构建，并在未来独立开发产品，那么你可以选择Vue3。它的学习曲线相对比较平滑，对于初学者来说更容易上手。

初学者只学一个框架就够了吗？

我曾经以为，在我的主要编程语言的生态系统中选择一个前端框架就可以解决所有问题，因为主流框架有非常丰富的生态系统，可以处理开发中的各种场景。然而，当我逐渐学习其他课程并构建产品时，我意识到这个想法很幼稚。

例如，我目前正在学习 Alchemy 大学的 Solidity 训练营。本课程的官方先决条件是具备 JavaScript 基础知识。我认为我可以轻松地完成这门课程，因为我不仅学习了 HTML、CSS、JavaScript，还学习了 Vue3。然而，到了第三周，我突然发现本周项目是用React的前端构建的。我傻眼了。幸运的是，本周的项目很简单，只需要 React 的基础知识。尽管如此，即便如此，我还是花了半天的时间快速学习了React的基础知识，最终顺利完成了一周的项目。因此，作为初学者，永远不要将希望寄托在单一技术堆栈上。快速学习和适应能力是我们的必备技能。

我的前端框架学习策略

简单、实用、目标导向

我并不指望在短短两周内就成为前端框架的专家。尽管 Vue3 比 React 更适合初学者，但它的生态系统非常丰富且内容丰富，包括大量文档，例如 Vue3 自己的、Vite、Vue Router、Pinia 等。如果你想构建一个高质量的前端 UI，你还需要学习像 Element Plus 这样的 UI 库。另外，如果我们的产品有一些特殊功能，我们需要学习一些专门针对该功能的库，例如我集成到我的网络应用程序中的富文本编辑器 wangEditor。

在两周内不可能学会所有这些，所以我的目标是掌握 Vue3 的核心功能，并初步构建一个具有专业外观的前端。

以Vue3文档为中心，逐步增加实践复杂度

自从开始自学编程以来，我查阅了很多文档，我必须承认 Vue3 是最适合初学者的文档之一。文档的优秀写作让我学习前端框架成为可能。因此，我不推荐任何第三方教程，而是强烈建议那些想要学习Vue的人将Vue3自己的文档作为他们的核心学习材料。

仅仅有好的学习材料并不足以掌握一个框架；掌握框架的最好方法是用它来构建项目。但是，尝试构建我在本文开头演示的 Web 应用程序可能不是一个好主意。我在学习过程中其实搭建了两个项目，第一个项目很简单，主要是感受一下框架的使用，了解大致流程和核心部分。第二个项目是第一个项目的扩展，学习如何在框架的生态系统中找到构建真正的 Web 应用程序所需的资源。

学习时间及安排

1. 我花了半天的时间整理了可能的学习资源，主要是一些文档和两个精心挑选的项目教程。文档包括： Vue3文档、 Vite文档、 Vue Router文档、 Axios文档、 Element+文档、 Pinia文档。 Vue3 文档是其中最重要的。

   
   

2. 然后，我花了大约 3 天半的时间阅读了大部分 Vue 文档。重点是基础知识，即使作为初学者，我保证你也能毫无困难地完成这部分。然而，随着到了后面的部分，有些内容逐渐变得不太清晰了。这对于初学者来说很正常，没关系。暂时看不懂的部分，我记下来然后继续。有些部分，比如最佳实践、TypeScript 和高级主题，我决定完全跳过。总之，如果只关注最本质、最基础的部分，3天半的时间就足够了。我学得不是很快，而且我的基础很薄弱，也许你不需要那么多时间。

   
   

3. 在接下来的一天半里，我按照 Traversy Media 的经典免费教程做了一个小项目 - 任务跟踪器。在这里我特别想谈谈Brad的教学风格。他无疑是一位传奇人物，被许多自学者视为编程教父。每次看他的课程我都会学到很多东西。他非常擅长用一个小项目来充分展示一个技术栈中需要学习的各个方面。 **但是作为一个新人，你要注意一件事，没有基础的不要听他的课。 ** 因为Brad的教学风格非常简洁、优雅。如果你没有任何基础，你可能跟不上他的步伐。因此，我特意将这个小项目教程安排在我学习的第二阶段，而不是第一阶段。

   
   

4. 如果你认真看了他的教程，相信你已经找到了用框架搭建前端的感觉，但同时，你的疑问也更多了。我就是这样，迫不及待地快速浏览了vite、vue Router、axios、pinia的文档。这次我只花了一天半的时间。因为我已经大致知道了构建一个vue3项目需要哪些上述技术栈的基础知识，所以我重点关注这些内容。而其他比较复杂但不那么常用的内容，我只是快速浏览了一下。如果你一下子看不懂，就跳过吧。

   
   

5. 到了第二周，我就有足够的信心通过搭建一个相对复杂的项目来巩固第一周学到的基础知识。并根据构建真正的Web应用程序的需求，扩展前面学习的内容。这次我依然选择了一个热门的vue教程——来自Traversy Media的FireBlog。本教程由John Komarnicki解释，让我解释一下为什么我选择本教程。

   
   

• 这个项目的优点是非常完整，有专业的前端用户界面和借助firebase实现的后端api。整个项目涉及前后端通信、前端动画设计、生命周期钩子设计、后端数据结构设计、状态管理、路由管理等多个方面。甚至在搭建过程中阅读文档时了解到了很多自己不懂的内容。如果我们将来想开发Web应用程序，这是一个很好的实践经验机会。

• 它的主要缺点是这是两年前的教程，所以不可避免地升级了一些技术栈。例如教程中使用的vue-cli现在处于维护状态，我在构建时使用了vite。再比如教程中使用的富文本编辑器已经很久没有更新了，我使用了wangEditor，它也是轻量级的，但是最近维护得比较多，构建时与vue3集成得更好。

  
  

6. 本教程的后端使用firebase来构建，虽然并不复杂，但可能无法满足我们自己的实践需求。例如，我理想的后端是使用node.js+express+mongodb+mongoose构建的restful API。因此，我没有按照教程搭建firebase后端，而是临时用json-server搭建了一个虚拟后端来模拟restful API的行为。这也是我没有将项目部署到线上的原因。因为github page和vercel都只能部署静态网页，而json-server的终端只能在本地运行，所以无法部署在它们上面。您可以在学习本教程时根据自己的需求进行选择，也可以像这样构建一个 firebase 后端。

   
   

7. 本教程持续六个半小时。一般情况下，如果每天学习一小时的内容，六天就足够了。随着年龄的增长，我的学习速度变慢了。您也许能够在六天内完成构建。最后一天，我还是像往常一样复习了前面的内容，最重要的是整理了我这两周学习期间做的笔记，做好了备忘单。因为我发现这个动作至关重要。常常，学完一个月后，当我再次打开代码时，有很多部分不理解或不记得。此时，如果您想构建一个新项目，笔记和备忘单通常可以派上用场。

最后一些建议：

1. 以前，我总是痴迷于寻找“完美教程”。但后来我发现其实没有完美的教程。以我们第二周学习的FireBlog教程为例，它有很多不足之处，甚至有些部分不符合我们的要求。但那又怎样呢？它仍然是一个优秀的教程和一个不可多得的实践项目。我们只需对不符合要求的部分进行升级或修改即可。

   
   

2. 学习前端框架和我们上周讲的学习javascript有点类似，不要指望在两周内完成所有事情。它的生态系统中有很多内容，并且在不断升级。更何况，正如我们前面讨论的那样，指望通过学习一个框架来征服所有方面是不现实的，所以这注定是一个持续学习的过程。我们需要做的是享受这一切，而不是将其视为一种负担。

   
   

3. 如果你打算学习React而不是vue，甚至Angular，我上面提到的内容仍然适用。前端框架也是如此，学习的方法和选择学习资源的方向其实都挺相似的。

   
   

#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React