怒肝半个月，前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路分享！！！

佬。一大波自学天然资源即将袭来，珍藏保存吧

序言
经常有校友会问我，教给甚么某种程度能找到一份后端工作，或者会问怎样高阶后端，自教给甚么某种程度能独当一面业务合作开发以及后端怎样高阶等问题。喽！！！下面我们来把后端自学分为几个期，协助你怎样从两个阿宝成为后端元老。每一期会附有每一期的自学天然资源，请我们深入细致阅读哦。

后端高阶

工欲善其事，工欲善其事。

⭐️ 后端合作开发必不可少辅助工具：

Vscode:95%后端都在用的合作开发工具Chrome:Google应用程序，对合作开发人员亲善FastStone Capture:十分称心的吸色辅助工具……

⭐️ 自学记讲义：

后端习题十分繁复，需要做讲义。这儿所推荐我们采用 Markdown 句法来做讲义。也能根据他们的嗜好采用新浪网版的讲义辅助工具，这儿不做过多所推荐。Markdown:多平台全力支持、高性能、易读易写。对后期想要他们写网志的老师有很大的协助。

⭐️ 后端彩晶：

此基础彩晶:HTML,CSS,JS，建议从两栖作战开始，整本练，培养兴趣，快速高阶。

HTML,CSS自学：最终目标：修完专业课程能他们试著去仿效两个中文网站的网页稳固HTML,CSS底子js此基础自学最终目标：修完专业课程，能他们动手合作开发两个京东类型的中文网站。做一些邻近地区统计数据的校订改查，尽量的多运用js,稳固 js 此基础。HTML5,CSS3自学:那个也是重点，而且最高级后端复试好像特别喜欢问那个⭐️ 句法化条码⭐️ 应用程序全力支持⭐️ 影音标签⭐️ Canvas 画笔⭐️ 邻近地区储存⭐️ 媒体查阅⭐️ Flex 产业布局⭐️ Grid 产业布局⭐️ 峡谷流⭐️ 积极响应式产业布局⭐️ 动画电影⭐️ 过渡⭐️ 2D / 3D 转换

⭐️ ajax 允诺

ajax自学：ajax 通过原生植物的XMLHttpRequest对象发出 HTTP 允诺，得到服务器返回的统计数据后，再进行处理。现在，服务器返回的都是 JSON 文件格式的统计数据，XML 文件格式已经落伍了。最终目标：修完 aj

此基础高阶

有些老师喜欢看书，但是市面上的书千千万万，这儿所推荐三本比较适合前期自学想要稳固下此基础知识的老师：

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

⭐️ js高级高阶

⭐️ ES6新特性❗❗❗

那个也是重点中的重点

⭐️ 应用程序

后端合作开发1000%的时间都是在和应用程序打交道,必须要了解它应用程序 DOM 事件流 / 事件委托⭐️ 应用程序加载顺序⭐️ 应用程序渲染过程应用程序事件循环应用程序同源策略❗ 跨域解决方案应用程序缓存控制台调试技巧

⭐️ HTTP

和后端交互避免不了，也是必学1xx 信息2xx 成功3xx 重定向4xx 客户端错误5xx 服务器错误HTTP 1.0⭐️ HTTP 1.1HTTP 2HTTP 3❗ HTTP 允诺过程常见 HTTP 协议⭐️ HTTP 允诺类别⭐️ 常见状态码WebSocket⭐️ CookieSession⭐️ HTTPS

⭐️Git 版本控制

那个也是重点，不管到哪个公司都是必会的,常用命令如下：git clonegit statusgit loggit addgit diffgit commitgit resetgit branchgit checkoutgit mergegit pullgit 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 版本的时候就拿来

⭐️ React 自学

React 全家桶

这儿再来介绍两个 React 的状态管理库：Dvajs Mobx,为甚么要所推荐这两个库，用过 redux 的人都知道，完整的一套写下来，要写还多代码，而这两个库就是专门简化它的，目前也是采用比较多的。React (整体架构)react-route (路由)redux (状态管理)axios (允诺库)redux-saga (redux 中间件)less/scss (css 预处理器)Ant Design (蚂蚁 UI 框架库，90% react 合作开发都采用那个)react hook 目前合作开发主流，必看

❗❗❗重点来了，重磅级两栖作战教程：《React17+React Hoo

⭐️ umi (十分所推荐)：插件化的企业级后端应用框架，有哪些优点：Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成Umi 内置了路由、构建、部署、测试等，仅需两个依赖即可上手合作开发。并且还提供针对 React 的集成插件集同时全力支持配置式路由和约定式路由……⭐️⭐️⭐️⭐️⭐️ 目前本人所在的公司就是采用的这一套框架，十分所推荐采用。学过 react 全家桶的老师，自学 umi 能说是很轻松，完全看文档就能驾驭得了。采用hooks合作开发的老师这儿所推荐两个十分称心的h

⭐️ TypeScript 自学

TypeScript是甚么？如果你还不知道的话真的就 Out 了，目前 Vue3.0 React 都能采用 TypeScript 来合作开发，而且采用度十分高，后端必不可少。

教程

⭐️ 可视化

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

可视化:⭐️AntV⭐️echarts (很所推荐自学)highchartsD3.js⭐️threejs (三维可视化)⭐️cesiums (地理信息可视化)

⭐️ 服务端渲染

VueReact

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

中级后端高阶

⭐️ 打包构建辅助工具：后端天然资源打包压缩编译等

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

⭐️webpack官网：https://webpack.docschina.org/ Vite官网：https://vitejs.cn/

⭐️ Nodejs: 一种 javascript 的运行环境，能够使得 javascript 脱离应用程序运行

koaexpressegg

Node.js 官方教程：http://nodejs.cn/learn Node.js 高阶：https://cnodejs.org/getstart

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

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

⭐️ 性能优化

所推荐看下这篇：<a href=”https://mp.weixin.qq.com/s?__biz=MzUzNTk3MjE2Ng==&mid=2247485819&idx=1&sn=9efc3d4ddcf57f2562242dc07a0fc097&scene=21#wechat_redirect”>《9大策略和6大指标》https://mp.weixin.qq.com/s/rlUlqOgN76W1pZggB16STA

⭐️ 统计数据结构算法

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

⭐️ CI/CD

Jenkins: 自动化构建辅助工具

⭐️ Nginx

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

⭐️ Linux

⭐️ 常用命令

大后端

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

⭐️ 混合合作开发 App:

react-nativeuniappFlutter