肝了一周，我做了一个免费&开源的编程自学网站

前端学习路线图首页

本文视频版

你好，我是大圣，自由职业以后很多同学咨询我学编程路上的困惑，大部分都是方法不得要领，于是我就整理一下自己的知识体系，并且做成可以接受PR的思维导图，帮助你梳理正确的学习路线，减少编程路上的迷茫，先介绍这个图谱的特点和使用方法把,

路线图特色

文档是基于Vuepress2构建，路线图并不是静态，图使用Fabric.js绘制，就可以通过pr的方式随时丰富路线的内容，通过Github Actions自动部署, 大家可以在首页右上角访问Github地址，或者访问每个页面下方的修改链接，随时通过PR的方式共建这个知识图谱

编程是一个非常有趣的技能，但是很多同学学习不得要领的原因如下

一个是你在入门阶段过于注重细节，编程和骑自行车一样是一个技能，我们如果刚开始学骑车的时候就买一本厚厚的《骑车权威指南》在家啃，哪怕你再有毅力，看完书也是不会骑车的，我们首先要做的就是拿到自行车后，掌握什么是车把和脚蹬子之后，先上去骑几圈，肯定会摔跤，这就是骑自行车入门最好的方式，编程亦是如此，入门阶段需要尽快实战演练，在练习中学习

入门实战

前端的世界里HTML就是我们的骨骼，承载着网页的显示内容，CSS修饰HTML的样式，让页面变得美观，是学习前端首先要掌握的技能，我们这一阶段的目的， 就是掌握常见布局的方式，最终能仿写一个网站首页的布局就算合格

HTML+CSS

相比于html和css，Javascript才能算得上是一个编程语言，Javascript让页面能够动起来，包括页面的动效，和后端的数据请求，操作浏览器等等，Javascript是我们行走江湖的武器，一定要好好修炼

Javascript

实战

有了HTML + CSS + Javascript基础之后，常见的页面布局和交互我们就可以实现了，这就是学完武功招式的实战环节，从开发高效的开发环境，到了解实际开发中的开发工具，最后到具体的需求实现，甚至和产品经理吵架都是需要学习的

会做项目后，我们就是一个光荣的前端工程师了，在出去找工作之前，基本的面试技能也是需要学习和掌握的

面试

第二个就是你入门之后，可能会被老板pua不停的做重复工作，成为了API工程师，导致很多年没有成长，尤其是很多同学还不是科班出身，没有经历过系统的计算机知识科班训练，我们这个时候需要学习需要知道大厂的解决方案，并且恶补计算机的科班知识，，如果以后写一个程序员修仙小说的话，算法数据结构、操作系统这些基础知识就是内力， 大厂的解决方案就是天级功法，这些都是升级必备的，我们需要学Typescript，单元测试，组件库等都是因为这个

实战进阶

Vue or React

Typescript

Typescript给Javascript带来了类型系统，带来了更智能的提示和丝滑的开发体验，Javascript中变量可以赋值任意类型的值，这在大型系统中会增加代码的维护难度，Typescript有点像三体人，每个变量的类型，每个函数的参数结构都对外清晰可见，是构建大型项目和框架的必备技术

Node.js

Node.js的诞生让前端有了入侵后端的能力，也是前端开始繁荣的标志，现在前端之所以工资这么高，可以折腾自动化工具，开发Web后端，搞基建都基于Node带来的后端能力，现在前端已经离不开Node了，npm，vite，webpack,babel都基于Node，其他程序员对Node褒贬不一，但是不耽误我们好好学习Node去提高工资

没有Node之前的前端，就像是工地上负责装修的，后端盖好高楼大厦后，我们负责内部的硬装软装，提高用户体验，Node就像装修队学会了开后端的挖掘机，除了运送装修物料的速度变快了，我们前端装修队也可以用挖机去盖小楼了，虽然高楼大厦还是需要后端搞，但是四五层小楼和别墅（创业公司）的场景，前端自己就从盖楼到装修包圆了 这也是前端这几年工资高的原因

Node并不难，语法都是Javascript，难点在于我们没有后端思维以及不懂操作系统，Node执行在操作系统里，文件系统，网络协议，数据库等概念纯前端了解的不多， 业务需求也从实现布局变成自动化，文件读写，数据库读写等等，我们一起转变思维，好好拥抱Node把

工程化

我们从开始写第一行代码开始，到项目上线后的全部过程，都可以理解是工程化的范畴，工程化的目的就是能高效的开发代码，只要是能提高开发效率和项目质量都是好兄弟，从分类上来说，工程体系分成这几个步骤

首先是项目初始化, 每个项目都有大量的配置，babel，ts，eslint，jest，还有内部的各种规范，每个项目都配一遍实在是没有逼格，搞几个不同的模板，团队搞个命令行比如叫giao, 我们执行giao init的时候就会选择技术栈，并且去对应的地址把模板下来就行，开箱即用，拎包入住，vue-cli，umi都是非常优秀的脚手架

然后是实际的代码开发和联调, 这一步主要是开发服务和联调，比如dev-server可以本地演示代码，hmr热更新可以写完代码自动更新页面，不需要刷新，数据mock和代理proxy可以帮助我们调试后端接口

开发的过程中，为了提高代码的可维护性，需要做测试和安全 、团队规范的监测, 单元测试，安全都在这一步检查，最后就是构建,webpack rollup都是优秀的构建器，sass less都是不错的css构建器

然后是发布上线, 静态资源打包到nginx，node服务用pm2，为了上线服务器的环境一致，我们需要docker，在复杂的应用可能需要用k8s，上线之后需要监控线上应用状态，确保服务的稳定，alinode还有自己定制的监控系统都是必须的

有了工程化体系，前端农民工就相当于有了挖掘机，高效工作必备

项目架构

很多同学面试的时候都会被问到：你做过什么项目？看起来很简单的一个问题，却难住了无数面试者，因为面试官想听到的并不是你的项目流水账，而是你项目中的亮点。这个过程其实和相亲很像，你心仪的女生问你有什么爱好，你会绞尽脑汁想突出自己的优点和亮点。然而，如果你想很好地回答项目中的亮点这个问题，需要日常工作中做出很多额外的修炼。

比较幸运的是，前端这个领域，大公司小公司用到的解决方案有类似之处，都是用Vue/React，前端的大厂门槛不像后端那么高

性能优化

算法和数据结构

法和数据结构是程序世界的基本规则，前端日常工作中其实用不到算法，算法属于程序员世界的内力，从最功利的角度来说，你就算是为了过大厂的面试，也需要学习算法和数据结构的知识，而且算法还会帮助我们更好的写代码，帮助我们应对更复杂的场景

前端这几年的发展和框架的更迭，很多架构上的变化本质都是算法和数据结构的变化，React Fiber核心的逻辑就是为了解决树形结构Diff可能导致卡顿的问题，把树改造成了链表，类似的场景还有很多，而且你阅读Vue，React等框架源码的时候，也会有很多算法的实现逻辑

我们从工程实现的角度来学习算法，这部分知识是很难过时的，一本算法第四版就是你最好的算法教材，Leetcode刷题200道就是学算法最好的量化指标

网络协议

网络协议就是计算机之前聊天唠嗑的工具，就像我们人聊天也需要双方都学过普通话一样，网络协议是分层的，我们访问一个浏览器页面，DNS协议负责找到这个域名的门牌号地址，IP协议负责根据门牌号找到机器，TCP负责数据的完整和有序，HTTP就是前端应用层的协议，负责缓存等等

就是新手容易被眼花缭乱的新技术迷住，很多同学问我需不需要学Rust之类的问题，我统一的回复就是月薪低于40K先好好学Vue，React，算法这些内容，我把新手不需要追的热点技术整理在一起，以后工资高了再追

第四个就是自己学习是孤独的，很难坚持下去，我们提供了Gthub Discussions讨论社区，你可以在里面提问，找队友，记录自己的学习，也留下属于你的心路历程

软技能

第五个就是你已经掌握了大厂的技能，完全不愁工作，但是会被技术绑架自己，总觉得要和技术死磕到底，要知道骑车这件事入门很简单，但是想骑到奥运会，也是天赋和努力并存才可以，我们作为有技术特长的人，只要在努力建设这个国家就是好样的，职业生涯规划也是多样化的，我们这个时候需要注意软技能的训练啊，谈判、沟通、演讲、运营、产品、销售都是我们值得学习的技能

所谓软技能是相比于代码这个硬技能，现实远比代码要复杂的多，我们要掌握哪些代码之外的生存技能, 没有任何一个煤矿工人靠挖煤多又快当上了煤老板。

首先不要把代码当做程序员唯一需要学习的能力，有的技能只需要学一周，但是经过训练和没经过训练都是天壤之别，骑自行车这个技能不学你永远不会掌握，但是学习他连一周都不到

首先在程序员的行当里我们要保持持续学习的能力，学习这个能力本身就需要训练, 技能入门想成为高手，刻意练习是+费曼学习法是最好的学习方式, 读书、沟通等都是一个独立学习的技能

其次除了技术我们要学会在职场里混水摸鱼 or 与狼共舞，如何更快的使用工作，如何和领导沟通，如何跨部门沟通，如何在职场找一个导师指点自己，跳槽的时候如何跟HR谈钱，除了上班如何远程工作和自由职业等，都是必备的职场技能

技术管理也是程序员很好的一个职业生涯的路线，如何从技术转型管理也是一个非常好的话题，我们要从代码的视角里跳出来，去尝试带领整个团队获取胜利，就像亮剑里的李云龙，无论枪法还是刀法都不是独立团最好的，但是可以带领整个独立团嗷嗷叫的取胜，这就是我们需要学习的技能，学习如何规划、如何沟通、如何复盘等等

最后工作毕竟是为了生活，我们不要为了工作上的成长，忽略了生活的美好，尤其不要忽略和家人的链接

除了技术上的架构师道路，可以转技术管理，还可以去接单，去搞IT教育，去做开源都是很好的路线，职业生涯不一定只有增长，虽然现在国内互联网环境还存在35岁危机，大家不停的寻求晋升来摆脱焦虑，但我相信有一天国内也可以写一辈子代码，写代码产生用户价值本身就是一个伟大的事情

这个图谱每个系列也会分成好几部分，入门部分的目标就是能做出实际的产品，进阶的目标就是研究大厂解决方案，扩展视野，通用技能是所有程序员都需要掌握的技能，软技能，算法数据结构等，有些知识点我也会推荐质量比较高的专栏，我自己也会出一些付费的小课帮助你提高学习的效率，我后面的主要任务就是不断的在B站录制视频和写教程，让这个网站逐渐完善, 这也是我梳理自己技术体系的产出了

编程之路很有趣，愿大家都能找到自己的学习路线，实现可持续的职业成长

最后来个长图 ，欢迎star