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 的状态管理库：DvajsMobx,为什么要推荐这两个库，用过 redux 的人都知道，完整的一套写下来，要写还多代码，而这两个库就是专门简化它的，目前也是使用比较多的。
  

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

❗❗❗重点来了，重磅级实战教程：《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：公众号回复【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
• ...

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