大家好，我是xy，写了好几天，终于在今天完成啦！可以堪称是史上最贴心的前端学习路线了，帮助大家少走弯路，急速超车💂 + 💻 = 👴🏽 如果觉得这个超车路线有帮助到你，记得 ⭐️关注⭐️ 我哦，我的公众号：前端开发爱好者。一大波学习资源即将来袭，收藏保存吧🔥🔥🔥

前言

经常有同学会问我，学到什么程度可以找到一份前端工作，或者会问如何入门前端，学习到什么程度可以胜任业务开发以及前端如何进阶等问题。别急！！！下面我们来把前端学习分为几个阶段，帮助你如何从一个小白成为前端大佬。每个阶段会附上每个阶段的学习资源，请大家认真仔细阅读哦 📚。重要提醒：能自学的小伙伴真的不建议大家报班学习！！！

前端入门

工欲善其事，必先利其器。

⭐️ 前端开发必备工具：

• Vscode:95%前端都在用的开发工具
• Chrome:谷歌浏览器，对开发者友好
• FastStone Capture:非常好用的吸色工具
• ......

⭐️ 学习记笔记：

• 前端知识点非常繁杂，需要做笔记。这里推荐大家使用 Markdown 语法来做笔记。也可以根据自己的爱好使用在线版的笔记工具，这里不做过多推荐。
• Markdown:多平台支持、轻量化、易读易写。对后期想要自己写博客的同学有很大的帮助，学习语法地址：http://markdown.p2hp.com/basic-syntax/

⭐️ 前端三件套：

基础三件套:HTML,CSS,JS，建议从实战开始，边学边练，培养兴趣，快速入门。

• HTML,CSS学习：推荐 pink 老师的前端入门教程 https://www.bilibili.com/video/BV14J4114768

  • 🎯 目标：学完以上的课程可以自己尝试去模仿一个网站的页面巩固HTML,CSS基本功

• js基础学习：pink 老师的也不错 https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.8

  • 🎯 目标：学完以上的课程，可以自己动手开发一个商城类型的网站。做一些本地数据的增删改查，尽可能的多运用js,巩固 js 基础。

• HTML5,CSS3学习:这个也是重点，而且初级前端面试好像特别喜欢问这个

  • ⭐️ 语义化标签
  • ⭐️ 浏览器支持
  • ⭐️ 多媒体标签
  • ⭐️ Canvas 画布
  • ⭐️ 本地存储
  • ⭐️ 媒体查询
  • ⭐️ Flex 布局
  • ⭐️ Grid 布局
  • ⭐️ 瀑布流
  • ⭐️ 响应式布局
  • ⭐️ 动画
  • ⭐️ 过渡
  • ⭐️ 2D / 3D 转换

⭐️ ajax 请求

• ajax学习：ajax 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了。学习推荐文档：http://javascript.ruanyifeng.com/bom/ajax.html

  • 🎯 目标：学完 ajax,可以尝试去调用后端接口获取数据，没有接口的同学可以找一些开放的 api 调用，这里百度就可以找到了。

基础进阶

有些同学喜欢看书，但是市面上的书千千万万，这里推荐三本比较适合前期学习想要巩固下基础知识的同学：

• 《JavaScript 高级程序设计》
• 《JavaScript 忍者秘籍》
• 《JavaScript设计模式与开发实践》

📚 想要这三本书电子版的同学可以到我的公众号内回复 js书籍 即可免费无套路获取

⭐️ js高级进阶

• 强烈 ❗ 建议看下这个：https://ke.qq.com/course/231577?taid=1464811481434265(7-12 节讲的递归，预编译,作用域、作用域链精解，立即执行函数，闭包,原型，原型链，call/apply，继承模式，命名空间，对象枚举) 我刚开始学习的时候也是看的这个，讲的很不错！！！

⭐️ ES6新特性❗❗❗

• 这个也是重点中的重点，可以看阮一峰的教程https://es6.ruanyifeng.com/

⭐️ 浏览器

• 前端开发1000%的时间都是在和浏览器打交道,必须要了解它

  • 浏览器 DOM 事件流 / 事件委托
  • ⭐️ 浏览器加载顺序
  • ⭐️ 浏览器渲染过程
  • 浏览器事件循环
  • 浏览器同源策略
  • ❗ 跨域解决方案
  • 浏览器缓存
  • 控制台调试技巧

⭐️ HTTP

• 和后端交互避免不了，也是必学

  • 1xx 信息
  • 2xx 成功
  • 3xx 重定向
  • 4xx 客户端错误
  • 5xx 服务器错误
  • HTTP 1.0
  • ⭐️ HTTP 1.1
  • HTTP 2
  • HTTP 3
  • ❗ HTTP 请求过程
  • 常见 HTTP 协议
  • ⭐️ HTTP 请求类别
  • ⭐️ 常见状态码
  • WebSocket
  • ⭐️ Cookie
  • Session
  • ⭐️ HTTPS

⭐️Git 版本控制

• 这个也是重点，不管到哪个公司都是必会的,常用命令如下，也可以看这篇文章《我在工作中是如何使用 git 的》：https://mp.weixin.qq.com/s/gdqVcrrY3h948UMGlfF3qA

  • git init
  • git clone
  • git status
  • git log
  • git add
  • git diff
  • git commit
  • git reset
  • git branch
  • git checkout
  • git merge
  • git pull
  • git push
  • .....

前端框架学习

为什么要学习框架？？？因为框架可以提高我们的开发效率、简化代码的复杂度。

⭐️ CSS 框架

• ⭐️ Less
• ⭐️ Sass
• ⭐️ Stylus
• ⭐️ Tailwind CSS(推荐学习)

Less,Sass,Stylus 不能算是框架吧，可以归纳为 css 预处理器。三者语法类似，学习一种使用其它基本上结合文档能够运用。

Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架，设计理念是以实用为先，它提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具，响应式风格可以满足不同设备上的开发。

⭐️ javaScript 框架(找工作必备)

这里主要介绍 Vue React 两个框架，这两个是目前使用最多的框架。Angular目前不推荐，使用的公司寥寥无几，还有就是后起之秀Svelte,起码初学者目前不建议学习吧

• ⭐️Vue
• ⭐️React

⭐️ Vue 学习

经常听到有人说Vue全家桶,那我们就来说说这个全家桶都包含了什么吧

先来说说Vue2.x:

• Vue 全家桶

  • Vue (整体架构)
  • Vue Router (路由)
  • Vuex (状态管理)
  • axios (请求库)
  • less/scss (css 预处理器)
  • Element UI (非常流行的 PC 端 UI 框架库)

同时，在初始化项目时候，比较推荐 Vue Cli Serve, 以上只能算是大多数公司比较常用的配置了。

实战教程：Vue2.x 由于已经出来很久了，所以市面上的教程比较多，小白的话可以到 B 站搜索一个基础+实战的视频，这里不做过多的推荐.其实本人更推荐直接看官方文档以及看一些技术文档，上手更快一些

Vue3：可以说是今年比较火热的了，早在去年 Vue 还是 rc 版本的时候就拿来搭建过一个项目，但是由于时间有点久远有点忘记了，但是没事，这里推荐一门针对 Vue3.0 的实战教程《vue3.0+ts仿知乎专栏企业级项目》，需要的关注我的公众号回复【Vue 实战】即可获取哦

⭐️ React 学习

• React 全家桶

  • React (整体架构)
  • react-route (路由)
  • redux (状态管理)
  • axios (请求库)
  • redux-saga (redux 中间件)
  • less/scss (css 预处理器)
  • Ant Design (蚂蚁 UI 框架库，90% react 开发都使用这个)
  • react hook 目前开发主流，必看

  这里再来介绍两个 React 的状态管理库：Dvajs Mobx,为什么要推荐这两个库，用过 redux 的人都知道，完整的一套写下来，要写还多代码，而这两个库就是专门简化它的，目前也是使用比较多的。

❗❗❗重点来了，重磅级实战教程：《React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目》,废话不多说，公众号后台回复【react 实战】即可获取完整教程

• ⭐️ umi (非常推荐)：插件化的企业级前端应用框架，有哪些优点：

  • Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成

  • Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集

  • 同时支持配置式路由和约定式路由

  • ......

  • ⭐️⭐️⭐️⭐️⭐️ 目前本人所在的公司就是使用的这一套框架，非常推荐使用。

  • 学过 react 全家桶的同学，学习 umi 可以说是很轻松，完全看文档就能驾驭得了。

  • 使用hooks开发的同学这里推荐两个非常好用的hooks库：ahooks react-use，想要了解更多推荐看这篇文章《130+ Hooks,解锁React Hooks使用的正确姿势》-https://mp.weixin.qq.com/s/87HPw1vs9smsfgEUGpWF8Q

⭐️ TypeScript 学习

TypeScript是什么？如果你还不知道的话真的就 Out 了，目前 Vue3.0 React 都可以使用 TypeScript 来开发，而且使用度非常高，前端必备。

TypeScript 教程目前也有很多，这里挑选了两个比较好的教程，可以直接到我的公众号主页菜单中就可以获取或者回复【ts】即可获取视频教程

⭐️ 可视化

最近几年可视化真的太火了，有不少公司都是专门做这块，这里推荐几个比较好用的可视化框架：

• 可视化:

  • ⭐️AntV
  • ⭐️echarts (很推荐学习)
  • highcharts
  • D3.js
  • ⭐️threejs (三维可视化)
  • ⭐️cesiums (地理信息可视化)

⭐️ 服务端渲染

• Vue

  • Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg

• React

  • Next.js入门：https://www.bilibili.com/video/BV13441117KK

Vue React 这两个框架任意会一种, js 基础再学的好点,⭐️ 恭喜你 ⭐️ 基本上可以找到一份很不错的工作了。

中级前端进阶

⭐️ 打包构建工具：前端资源打包压缩编译等

• ⭐️webpack(重点)
• Vite(https://vitejs.cn/)
• Rollup

📚 ⭐️webpack官网：https://webpack.docschina.org/

📚 Vite官网：https://vitejs.cn/

📚 Vite入门到精通：公众号回复【Vite】获取视频教程

⭐️ Nodejs: 一种 javascript 的运行环境，能够使得 javascript 脱离浏览器运行

• koa
• express
• egg

📚 Node.js 官方教程：http://nodejs.cn/learn

📚 Node.js 入门：https://cnodejs.org/getstart

📚 ⭐️Node.js+Koa2实战：公众号回复【Node】获取视频教程

⭐️ 包管理：用于安装 Node.js 的扩展、工具等。

• ⭐️npm
• ⭐️yarn
• ⭐️pnpm
• ⭐️npx

⭐️ 性能优化

• 推荐看下这篇：《9大策略和6大指标 》https://mp.weixin.qq.com/s/rlUlqOgN76W1pZggB16STA

⭐️ 数据结构算法

• ⭐️ 时间 / 空间复杂度分析
• 数据结构：数组，字符串，队列，栈，链表，集合，哈希表，二叉树
• 算法：排序，双指针，查找，分治，动态规划，递归，回溯，贪心，位运算，DFS，BFS

📚 ⭐️数据结构算法：公众号回复【数据结构算法】获取视频教程

⭐️ CI/CD

• Jenkins: 自动化构建工具

⭐️ Nginx

• 高性能的HTTP和反向代理web 服务器

⭐️ Linux

• ⭐️ 常用命令

大前端

⭐️ 小程序、多平台开发：

• uniapp
• taro

⭐️ 混合开发 App:

• react-native
• uniapp
• Flutter

⭐️ 桌面应用：

• Electron

微前端

⭐️ qiankun:

• 推荐看《基于qiankun的微前端最佳实践》https://mp.weixin.qq.com/s/onuOB3nl_eM0OHhZL6fpTQ

⭐️ sign-spa

以上就是针对前端入门到进阶再进阶的路线了，其实还有很多，这里就不一一讲解。前端路漫漫，各位骚年，你准备好了吗

求职面试

求职是一个漫长的过程，千万不要为了想要早点上班工作或者为了2-3K薪水的差距而选择了自己不理想的工作。建议结合自身的发展，给自己设定一个长远的目标和计划。

• 📚面试题：

  • ⭐️面经汇总：https://www.nowcoder.com/discuss/205497
  • ⭐️字节大佬总结的面试题：公众号内回复【面试题】

• 📚3200套简历模板：

  • ⭐️简历模板获取：公众号内回复【简历】

推荐技术社区

这里推荐几个自己比较喜欢看的一些社区平台

• 微信公众号
• 掘金
• MDN
• MSDN
• StackOverflow
• InfoQ
• Github
• ...

目前我比较喜欢刷这两个，没事在休息的时候刷一刷，还是能提升自己很多知识的积累的👍👍👍

写在最后

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者关注 ➕ 都是对我最大的支持。