史上最全前端学习路线一条龙【内含入门到进阶到高级精选资源无套路获取】

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

前言

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

前端入门

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

⭐️ 前端开发必备工具：

⭐️ 学习记笔记：

⭐️ 前端三件套：

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

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

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

⭐️ ajax 请求

基础进阶

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

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

⭐️ js高级进阶

⭐️ ES6新特性❗❗❗

⭐️ 浏览器

⭐️ HTTP

⭐️Git 版本控制

前端框架学习

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

⭐️ CSS 框架

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

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

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

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

⭐️ Vue 学习

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

先来说说Vue2.x:

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

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

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

⭐️ React 学习

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

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

⭐️ TypeScript 学习

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

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

⭐️ 可视化

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

⭐️ 服务端渲染

React

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

中级前端进阶

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

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

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

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

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

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

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

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

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

⭐️ 性能优化

⭐️ 数据结构算法

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

⭐️ CI/CD

⭐️ Nginx

⭐️ Linux

大前端

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

⭐️ 混合开发 App:

⭐️ 桌面应用：

微前端

⭐️ qiankun:

⭐️ sign-spa

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

求职面试

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

📚3200套简历模板：

推荐技术社区

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

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

写在最后

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

欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

关注公众号后，在首页：