2025 年了，我该如何入门前端？

⛄：最近有小伙伴问我有没有推荐的学习路线，所以抽空整理了下，结合了自己的一些经验分享给大家。

最开始学习前端的时候，学完了 Vue 和 React 之后觉得前端也就是这样，好像没什么可学的东西了，一度膨胀感觉自己无敌了。但是后来实习之后认识了很多大佬，也接触了很多新东西，发现前端真的是学不完一点啊 😂。

简单的分级

Tip：以下罗列的技术栈 ⭐ 必学、📚 选学强烈推荐、🌳 选学感兴趣可以学。

对于准备校招的学生来说，前端可以分为以下几个阶段：

练气期

练气/筑基期我们直接去看一些免费的教学视频即可，看其他类型的学习资料学习难度略大。

该阶段你是一个完全的小小小萌新，没有一点点计算机基础知识。

这个阶段的话想入门推荐大家直接无脑冲进 B 站，搜索并观看以下内容视频：

HTML ⭐
JavaScript ⭐
CSS ⭐

包括入门需要了解的一些支线：

代码编辑器：WebStorm / VSCode
浏览器：Chrom / Edge
笔记工具：Typora / 语雀 (Markdown 语法 ⭐)

经典前端三件套，一般看看 B 站播放量和评论还有发布时间，综合一下选一些新发布的播放量高的无脑观看即可。

学完之后推荐大家再进一步去找一个简单的练手项目，直接搜 HTML/CSS 项目即可，可以简单提升下自己的代码熟练度，像是仿小米官网之类的纯 HTML + CSS + JavaScript 原生技术栈实现的项目就可以。

此时你欣慰的看着自己用所学技能做出的第一个网站，全身精力充沛，目光炯炯，面色红润，气足神清室此炼气功成。(bushi)

筑基期

在你简单的了解过网页开发的基础技术后，你了解到了更广阔的世界，你发现了 Node、Vue、React、TypeScript 等等等等，眼花缭乱的名词让你不知从何下手...

首先需要推进的就是我们的主线，需要大家去学习 Node.js ⭐，简单了解一些 Node 的一些 API，可以进行的文件读写，网络请求等基础操作，最最重要的是学习 Node 生态下的前端包管理工具 npm ⭐，学会如何使用之后你就可以进行下一步了。

接下来去看 Vue / React，刚开始推荐大家学习 Vue，相对来说好入门一些，这两个框架都是必学的。Vue 直接学习 Vue3 版本，Reat 学习 React18 版本，跟着视频教程一步步学习，完成一些简单的 Demo 即可。

Tip：以下内容只需要能够基本使用即可，原理暂时不需要了解。

学习完成后我们还需要了解一些 Vue / React 相关的生态库。

Vue ⭐
- 状态管理：pinia ⭐
- 路由管理：vue-router ⭐
- 组件库：element plus ⭐
React ⭐
- 状态管理：redux ⭐、mobx 🌳、zustand 🌳...
  - React 状态管理实在是太多太多了，大家各有各的看法，推荐学 redux，其他的有需要的时候再去熟悉即可（看看文档这些东西上手很快）
- 路由管理：react-router ⭐
- 组件库：ant-design ⭐
工程化/规范化
- Webpack ⭐、Vite ⭐
- Git （学习如何团队开发）⭐
- eslint ⭐、prettier ⭐、lint-staged ⭐、commitlint ⭐、stylelint 📚（一套规范前端代码的工具链）
- typescript ⭐

上面的内容当你知道如何使用后，就可以开始练习自己的第一个项目了。这里我比较推荐大家去做一个后台管理系统模板，这种类型的项目都是纯前端项目，不需要服务端知识的接入。Github 上有很多优秀的开源项目可以学习。

像 Vue 系列的有：

pure-admin/vue-pure-admin 📚：一个尝试全职开源的大佬做的项目，个人非常推荐去学习这个，文档写的很详细，Github 也很活跃，技术栈用的比较新。
PanJiaChen/vue-element-admin 🌳：一个大佬做的 Vue2 的项目，非常火 🔥，不过已经不维护了。
vbenjs/vue-vben-admin 🌳：写的非常炫酷，就是感觉代码封装力度有点过了，代码比较难懂。

其他还有太多太多了，github 上搜 vue admin 这两个关键词能搜到一堆，大家也可以搜搜看去学一些自己比较和眼缘的项目。

React 系列的有：

HalseySpicy/Hooks-Admin 📚：从众多 ReactAdmin 项目中选出来一个还算可以的项目，代码很简洁明了，虽然有点老，但是够用了。
marmelab/react-admin 🌳：老外写的，技术栈和国内主流的有些偏差，感兴趣的可以看看，英文文档也很难读。

有一说一 React Admin 相关的项目比较优质的真的很少，生态跟 Vue 比起来差的太多了 😂，能搜到一些比较新的技术栈但是都没有长期维护的而且 star 都比较少也不太好判断项目质量，大家辨别能力强的可以自己搜索下学一学。

一个后台管理项目模板设计的知识点太多了，而且这些项目里会封装很多很多的组件，能让你了解到一些常见业务场景的解决方案，真的非常适合系统学习的第一个项目。缺点就是没啥视频教程可以看，需要大家自己去看代码摸索，学习成本很高。如果大家学习起来比较吃力可以自己找一些其他的有视频教学的练手项目，有一个大概了解后再来学习这些。我之前也写过一个非常简单的教程，大家可以去博客网站搜我的牛客同名就可以看到。

这个项目完结后大家就正式 “入门” 前端开发了，你已经具备了成为一名切图仔的能力，至此筑基期成！（这个阶段后就可以尝试去找实习了 😀）

Tip：在前端之外你还需要补充一些计算机基础知识也是市场需要的，数据结构与算法（找工作必学）、计算机网络（找工作必学）等需要大家自行选择学习。

金丹期

在筑基后大家选择的路线就有很多了，大家可以多方面提升，打造法宝、寻获灵宠、淬炼仙丹....，在前端的世界里，你需要选择一个方向去深入学习才能保证你的竞争力，大佬可以全都要 🤭。

我这里可以简单列举几个方向供大家学习：

挖掘技术底层，深度学习：
- 像是一个 React 简易实现，Vue 简易实现，包括一些平常你用到的 npm 包，你如果对他们的原理感兴趣，你都可以深入学习。
前端可视化：
- 2d：平时我们会遇到很多可视化图标的展示，这里面会涉及一些数学知识，包括前端的 2d 绘图技术，svg 和 canvas，包括一些封装好的库 Echarts ⭐，antd-g3，渲染引擎 zrender... 要学的知识点可太多了 😭。
- 3d：3d 绘制也就是我们常说的 WebGL 技术，还有一些相关的库 Three.js、Cesium.js、Babylon.js 等等。
性能优化 ⭐：
- 想对 Web 的性能做一些优化的话就需要了解一些 Web 的性能指标概念，了解这些指标是如何收集和上报的，然后再去深入的了解一些改进方案，这个方向也是每位前端工程师必须了解的。
组件库：
- 组件库是前端开发中必不可少的一些库，可以极大的加速我们项目的开发。但想要搭建一个组件库也会涉及很多的知识点，像是组件如何打包构建、样式方案如何设计等。而且一些高阶的组件中涉及的逻辑也很复杂，跟本学不完 😂。
工具库：
- 我们平常开发的过程中会用到各种各样的工具，一些常见的 vue / react hooks，类似 vueuse 这样的工具库，还有 lodash 这样的常用函数库。这些工具也能加速前端的开发，会涉及很多常见的业务场景。
全栈 📚
- 前端怎么学后端？当然是 node 一把梭，有一堆花里胡哨的框架 express、egg、koa，还有被称作小 springboot 的 nest，后端上手起来简直不要太简单！现在又很多公司都在用 node 加一层 BFF 在业务里使用，还是很有必要学习的。
SSG
- 平常我们肯定看过各种各样的前端博客和文档，他们大概率是利用这种 SSG 框架，通过编写各种各样的配置和 md 文件去生成一个静态网页。像是 viteprss、vuepress、rspress、dumi、hexo 等等等等等！我们前端生态真是太好啦 🐕。
SSR
- Vue 和 React 单独写起来不太爽？还是得和后端扯皮，各种对接口。我直接服务端渲染！总的来说就是前后端一起写，像是 Nuxt 和 next，你就学吧 🤓。
跨端
- 移动端：omg，这个更是重量级，开发方案又有很多 😂。像是 react-native，uni-app，还有各个大厂几乎都自研了一套内部的容器化方案，不过原理都大差不差。
- 客户端：还得是我们大前端啊，H5 技术网站、APP、客户端都能写啊！直接用 Electron、Tauri... 不是，这也不止一种开发框架？！？😭 哥们学麻了
小程序
- 额，微信小程序、qq小程序、抖音小程序、飞书小程序... 啥，小程序都有跨小程序框架？！？
音视频处理
- WebRTC 技术，流媒体播放器什么的，音视频技术深入点能学一辈子 😭。
微前端
- single-spa，qiankun，各个大厂也有很多自研的框架...
工程化
- 工程化领域好像很流行 rust 编写，像是 rspack、oxc... 好像用 js 写的全都能用 rust 重构下。。。嘻嘻
底层运行时
- 你以为的只有 node，事实上 node、deno、bun 已经卷出花了...
H5 小游戏
- 小游戏框架和技术也一堆，说累了...