(转载)前端速通指南
原文地址
写在前面
本文源于跟牛客某美团✌交流时提到的一个内容，看完后只能说自愧不如，能在这么早的时候就有一个对未来与现状的清晰的认知，已经至少打败同校 95% 的学生了。为此我决定转载这篇文章，不能让这么好的东西就埋没于 GitHub。
笔者认为本人最核心的点在于：
-
学习资源 学习能力 学习兴趣最后是努力（有效时间） 学习资源：网络大把，找不到就别来沾边（暴论
能力：看个人吧，这个是主观+客观因素各有影响
兴趣：也是看个人，GitHub国人里10有8是sb二刺螈
努力与成果：比起我吹嘘花了多久，我的效率更高才是更重要的，成果才是最好的物质客观证明。Talk is cheap, show me the code!
-
提高能力 > 提高知识量 知识是学不完的，尤其是前端，曾经有一张梗图描述了前端生态，几十种框架，涵盖UI渲染，SSR，后端，编译器，质量检查工具等。笔者本人在大二的时候曾经有一段时间出现过技术崇拜现象，认为一个项目用了常用的技术就是个模板项目，直到看到项目内对数据流清晰的规划，合理的架构，以及设计模式的合理运用，我才意识到这又是另一方面的能力，不是提升技术量就够的。尤其是计算机，知识更新迭代的很快，昨天加的一个群里有个搞 riscv 的老哥开完会就吐槽说又有新的更优硬件架构，又要重新学。现在 vue 和 react 是热门，谁知道未来又有什么顶级框架干掉他们呢？
本文已得到作者授权转载喵，灌注本人 (Github)[https://github.com/huanxiaomang] 喵
正文
来看本文的可能有3类群体：
1是还未想好具体发展方向，前端作为计算机基础知识来学的，后期可能转为JAVA方向，2是明确了就业前端，打算大学通过前端方面的项目经验和奖项丰富自己简历的，3是对前端或全栈等领域进行深入研究的，本文更侧重2类，有必要区分方向的地方会特别标注。
本文章为纯技术流路线，请根据自己实际情况自行取舍！
软件工程做什么
从就业方向来说，有web开发（前端）服务器后端开发 大数据等等。总之就是：开发。
也就是用各种编程语言写各种代码来开发服务器 网站 小程序 桌面应用 安卓/ios应用。
相关职位：
前端：拼视图 调接口 和用户交互
技术栈有
ReactVue后端：功能实现 数据处理和存储（数据库）通过接口把数据返回给前端
技术栈有
Java（Spring）GoC++美工：UI/UX设计美观交互性强动画流畅的界面，做出产品的“原型”交给前端用代码实现
原型工具有
Axure墨刀等产品：负责设计产品功能迭代 用户竞品分析等等。
实际的职位还可能再细分，除了这些还有测试 运维等等。这里只列举主要职务。
前端热门技术栈和对应方向
- WebGL 涉及
threejsshadercanvas图形学等等 webgl在线3d游戏介绍 DataVecharts数据可视化大屏- 微信小程序/
uniapp各类移动端应用 小程序游戏 electron开发桌面应用程序 如飞书 新版QQ界面 VSCode- 前端工程化底层 架构师 涉及底层源码 自动化
精通一门技术需要的条件
个人认为，分别是：学习资源 学习能力 学习兴趣最后是努力（有效时间）
-
学习资源有学习环境 有没有带你的或者互相促进的人 还有看什么样的学习资料。
如果只看得到一群只会念ppt的老师，那么他的水平可能都做不出毕设。
如果只看得到b站某马某硅谷的基础课和毕设速成，那么他可能很难找到工作，还要抱怨“前端已死”。
学习资源要自己找、一直找，自己脑中的知识网络是逐渐更新的，不要说我现在啥也不会把这个基础教程看了就行了，这是一种逃避，只在舒适圈待着，那学到什么时候也很难摸到更高端的东西。
不过每个人所在的环境都很难改变，一般的学校环境很难赶上好的学校，家庭环境也是，宿舍环境，学校环境也是，这是事实，就是没办法。（你以为我要劝你提升自己？）我之所以把它放到头一位，是因为它还能直接影响下面三点的好坏，而且也是最难改变的，像人与人的差距一样。
-
学习能力有天赋、能力。天赋和能力有人已经赢在起跑线上，好在我们后期还可以提高能力，也不用和他们参与同一个赛道。
区分好能力和知识量：
拿网上泛滥的长达几十小时的基础前端课来说，如果从头看到尾甚至还去背那些属性，只能说提高了知识量，但能力没有显著提高。能力是在反复利用自己的知识量和经验解决各种问题里提升的，不是看完了基础看完了vue源码看完了
nestjsthreejs就有的。 -
如果对自己学习的技术有学习兴趣，那么学习过程中会非常丰富多彩：你会被大佬的作品所触动，也更乐意动脑实现自己想要的东西，你的兴趣会促使你一直学下去。
-
努力不必多说，充分利用学习资源，有合理的学习方法和不断提高的学习能力，还有兴趣驱使，再把有效时间堆起来，技术一定会飞快提升。可惜没有前三个因素加持的努力其实暗淡无光且浪费生命，所以我把它放在了最后一个（悲）
最近真的发现，我带的几个能学到什么水平基本刚开始就能看出来，人和人上手一项技术的速度真的是不一样的，而这就取决于上面的前三条，而不是后续的努力。光努力只会在当前技术能力的阶层比别人知识量更多一些，起不到决定性的提高。
所以相比提高学习时间，还有很多其他的工作不可忽视：能不能找到可以带你的人？能不能持续提高学习能力而不是只学习知识？还有，我真的对这个东西感兴趣吗？千万不要局限于“自律”、“努力”这几个概念，你考不上好大学，就一定跟平时教你的老师水平、模拟题的质量、学校管理水平有关系，很多人给你洗脑是因为这些根本改变不了想让你从自身找原因，但现在我们可以改变很多东西了：
-
宿舍太吵没学习环境？还不想去图书馆？那就去租房，要么说服父母，要么自己攒钱挣钱。
-
身边没厉害的人指导？github、掘金、qq群有很多高学历高水平大佬，勇敢地加他们，问着问着可能就熟了（技术水平高的很多都是二次元，比较好说话）
-
你觉得把各种教程、学习路线从头学到尾就完事了吗？去github找个相关的项目看的懂吗？看不懂，那就是能力不够，学再多新知识也没有用，能力是费脑子练出来的。
-
我真的找到了我要从事的方向，我自发地想去做的东西了吗？就业还是考研，前端还是后端，是跟风走还是遵从自己的主见？还有，我不认可”不试试怎么知道呢“，如果只是单纯为了”试试“，那大可不必，时间浪费了就是浪费了，学没有用的就是浪费时间。
要有自己的追求和目标，这些一般就不会被很多人理解和看好，这和创业也有些类似，我们创业的干的事经常不被人理解，我只想说，在这方面他们看的太浅了，自媒体或者直播或者电商走下坡路太卷这话谁都能说出来，所以他们不去研究，可是只有自己真正琢磨了去做了才能发现做什么怎么做是更赚钱是更好的，他们拿道听途说的“参考”把这条路否定，我们把这当成一次机会当一次尝试来积累经验。 归根结底还是，我们的追求和思维模式是不一样的，我想赚钱，而他们没仔细想好过什么追求，什么财富自由 技术超群也都是想有的，可现实的巴掌呼过来时，他们只能选择从众这一条路。
这些就不是单单一个努力就能做到的，却能提高你境界的东西。那些让你痛苦的东西，就是你最该提升的。
学习理念
提高能力 > 提高知识量
上文提到过能力与知识量是不同的，我们要重点提高能力：学习能力、开发能力、设计能力、debug能力等等。这些都是需要动脑子来提高的，只机械地输入各种知识是不行的。（甚至很多学完就忘了）
那么既然是这样，学习视频教程（初学建议看视频教程）的方法也要有所不同：
-
千万不要只无脑输入：有选择地看教程，带脑子去思考，使用项目驱动学习的方法，只吸收项目需要的，跳过已经过时的、对现阶段太难的或现阶段用不上的。
-
面对例如数组的方法这种很密集的知识点，不是说听一遍讲解跟视频敲一遍就会了的，之后该忘还是会忘，只有在实战中自发的使用这些方法，才会真正记住、理解他们。
-
先速通最热门的技术栈（取决于当前招聘趋势，目前是
vue3+springboot），比如直接学SpringBoot跳过JSP前后端不分离的内容、直接学Vue3跳过一些原生实现各种功能的操作。按传统的学习路线，这些框架都是大后面才去学的，但我并不认为前面很多所谓“基础”的知识是必要的。首先要说清楚一点：学习路线是知识点串联的，不是说前面没全学懂就不能学后面的了，也不是说到后面学完框架就是进阶的了，更不是说进阶的工程师不会再去做前面所谓“基础”的东西了。学了
springboot，学了vue3，这不叫进阶，这只是你多学了一个框架，一堆知识点。使用各种技术来实现各种功能和业务才叫技术能力高，而不是你比我多学了多少东西。前面的知识也有很多很难的（比如闭包原型链）、现阶段用不到的（比如WeakMap Symbol），在你没到那个水平、那个境界的时候不要去死扣，扣也没用，而应该去学习更多知识点、练习更多写法、学习更多程序设计的思想、提高自己的境界。
前端学习路线
第1阶段：HTML+CSS+JavaScript基础开发
目标：配置简单的开发环境，掌握初步的网站开发，能够完成结构略复杂的布局，进行简单的DOM操作
关键知识点：基础标签（文本、表格、多媒体） HTML5语义化标签 CSS选择器与权重 常见样式 盒子模型 定位布局 弹性布局(Flex) 变形与动画 媒体查询 响应式布局 em/rem/vw JS基础语法 基本类型 数组与对象类型及常用方法 函数进阶 面向对象 DOM操作 ES6
推荐实战案例：响应式布局还原某官网、JS实现轮播图
第2阶段：Node.js+vue3前端工程化
目标：使用node构建前端工程，用vue3（vue2不用看了）和组件库完成基础的业务逻辑，express与前端aixios实现前后端交互，使用git进行源码管理。
关键知识点：node基础 npm包管理器 模块化 fs/path模块 nodemon 后端基础 express RESTful API ajax/axios 异步编程 Promise git vue3 vue-router vite vuex pinia ElementUI ElementUIPlus Echarts
你可能会疑惑：你这学习路线是不是少了不少东西？某马程序员某硅谷写的比你全面多了，闭包/原型这么重要的知识点都没有?上文提过，有些知识不是当前境界能碰或者说用得到的，我列举的是实现大多数功能必需的基础知识，此外的了解即可。这些知识是都可以速通的，我将更多东西放在了三阶段。
第3阶段：开发能力与技术栈扩展
此处学习更多的技术与工具，阅读文档和源码。
到了这里，就不要像刚入门时沉浸在视频教程里被人喂饭的感觉里了，一定要去github，习惯去开源社区找资料、去学习。
到了这里，就能真正见识到前端知识的多与杂。
关键知识点（太多了只列举部分）：
JS补充：Set/Map Proxy 本地存储
更多CSS方案：scss less TailwindCss 原子化CSS CSS in JS
前端面试：作用域及闭包 原型与原型链 异步和单线程 （<= JS三座大山：面试送命题）性能优化`
更多技术：React系列 Electron Tauri Uniapp 微信小程序 cocos游戏开发 Socket.io 低代码
服务器部署： docker Nginx
工程化技术：性能监控 数据埋点 CI/CD
后端深入：Koa nestjs JWT MySQL MongoDB Redis 中间件 分布式架构
更多组件库：VantUI AntUI
更多工具：Typescript Webpack Rollup Mockjs
更多方向：WebGL/threejs DataV WebRTC
前沿技术：Rust WASM PWA
以上列举的是比较有代表性的技术与方向，
其实这些只是一小部分。
只要学习兴趣到位，每个阶段会见识到非常多的技术关键词，但当然不是要全学，而是在前端领域内选择自己的方向。
目标：提高的项目的难度，提高开发能力，提高学习能力，扩展知识面，追求企业级设计模式，有良好的程序设计能力，学习面试知识，准备面试等等。
后面会讲解1、2阶段的知识，并在其中给出3阶段的能力提升相关建议，不会涉及到3阶段的扩展知识。
简历思维
如果你想好了毕业去就业的话，既然找工作就看我的简历，那么这几年大学里写不到简历里的事情我还要去做吗？
-
xxxx投稿活动，投稿就有学分（0.1创新分），就算得奖，也根本不会写在简历里，因为这和开发无关。
-
高数、线代、物理等（这些专业课以外的必修知识我称为学科知识）一定要学到特别好吗？就算得了100分，也不会写在简历里。
-
你真的指望跟着那些知识不知道多少年还没更新的专业课老师学好专业知识吗？什么所谓的C语言考核、Java面向对象测验、web前端课设，只不过是在让你认识这些东西并用一个落后浅薄但有用的考核来验证你学的怎样，这不代表你正走在通往达到就业水平的一条明确的路，千万不要沉浸其中花费太多时间。大一学生越早认识到越好，请把时间留给真正考验技术能力并可以体现在简历上的东西：竞赛和项目经验。下文会详细讲解。
-
学生会、学团、志愿者、各种委员，如果你仅是为了学分去的，那真的不值。时间应该去换知识，不是换学分，学分再多，也和简历没关系。
当然这里指的都是自己感觉有用去争取但实际在浪费时间的事情。排除了自身有兴趣或其他因素的情况，此处旨在提醒参考重要少数法则,专注在重要的少数事情上，不要落入“只要有用就想做”的沼泽。
这些就是就业之路的取舍，所以趁早花时间找到自己的道路并专注于此，才不会被在各种琐事和看起来有用的事中瞎忙。
那么重点来了：怎样打造有亮点的简历？
- 学历与工作经验
最硬性的条件，也是最难改变的。
首先是学历，本科再提也就是考研了，考研又累又卷先不说，还可能要承担白奋斗一年的风险，不过上岸肯定是比普通二本好的多了的，未来工资直接提高一档。那么考不考研、考不考公、考不考教资希望大家都是充分权衡了利弊再去做选择的，而不是脑子一热去楞冲的，建议大一一年用来思考该走什么路，后两年用来专注这条路。
然后是工作经验，关于包装工作经验（就是实习几个月直接写工作经验几年），我比较认可的一个观点就是：该包还得包，但有能力才包。
现在投简历的那么多，HR可能直接就把工作经验低的筛选掉了，没工作经验连被看到简历的机会都没有，不过要想写成几年工作经验，你就要有对应的实力，实力及格，那就顺利通过，就怕没那个能力还硬写好多年工作经验，有面试机会也是白给。
好在即使是在水深火热的2023年，只要你是科班（应聘计算机职位，那计算机专业出身就是科班），即使是二本，对技术有足够的积累也是可以找到还好的工作的。要想有积累还是要先思考找到自己的道路，相比那些临近毕业才去学的人，或是毕业后把希望寄托于辅导班的人，他们是合格，而有3年的积累的你是优秀的，所以不要害怕说什么“前端已死”、“没有出路”的话，因为现在已经不是看一堆视频有知识量就能入职的时代了，真正优秀的工程师只占10%，那么互联网上90%的抱怨你还有必要去听吗？
“该起了兄弟们，不能起太晚，因为咱这里面有科班的，还有跨考的,其中不少还是985的大佬，你们好好的，初试考高点。还是那句话，给自己的父母争点光，别跟我学，24考研，一月还在求极限，现在深感来不及了，每天都以泪洗脸，后悔也没有用了，时间不等人，害，没出息，真事,让人唠一辈子。说句实话，我现在都成为笑话了，我不能让人笑话一辈子”
- 项目经验
这里可能有个误区，别就以为参与了某个牛逼的项目写上就好了，hr会重点看你在这个项目里做了什么，做的是否有技术含量，是否和招聘条件对口。
项目可以写公司的项目，自己或合作的开源项目，训练营项目，这些项目是要有亮点的，是有难度的，不是去b站找一个教程跟着敲就能完成的。简历要写充分体现开发能力、业务能力、协作能力等的项目，比如训练营合作开发的获奖项目、设计底层工程化的项目、包含各种业务的全栈项目等等。
有自己项目丰富的Github主页、发布文章的技术博客也会大大加分哦。
项目经验示例：
2022.11 - 2023.02 学工管理系统项目描述：对武汉东湖学院内部学工管理系统前端部分的重构升级，提供更好的视觉体验，提高学生干部以及老师的工作效率 技术栈:
TS、Vite、React18、ReactRouter、Redux、Redux-ToolKit、Ant Design、Axios、wangEditor等 负责模块：项目基础设施搭建、代码打包 责任描述: 1.利用Vite内置import.meta.glob方法，动态获取路径下所有路由配置文件，生成动态路由表 2.根据React 提供的lazy函数封装路由懒加载工具组件，实现路由懒加载功能，提高性能 3.利用RBAC的权限设计思想，封装导航守卫组件，对当前登录账户进行权限控制，利用concat方法合并登录 账户能够访问的路由表 4.封装校验网络请求状态码方法，根据后端响应状态码进行弹框提示 5.封装按钮权限Hooks.封装递归函数遍历所有路由，判断当前账户的所有页面按钮权限中是否包含当前页面 6.封装工具函数利用map字典构建栏目ID 和数组的映射关系，将下级栏目依次添加到上级栏目中 7.封装wangeditor 富文本插件，适配在React项目中使用
-
奖项证书
我们一般会参加两类比赛（前后端开发方向）：一种是纯考验技术的个人赛，另一种是又答辩又写文档的团队赛。
我当然是推荐参加蓝桥杯 acm这种个人赛，这才是通过实打实的技术过关来获奖，而大创、互联网+和各种团队赛参杂了太多其他东西，作品都是给评委看的，而且大家水平比你低的多的话，也不能很好地发挥，还要被各种老师“指导”。虽然看上去含金量很高，但其实跟奖学金证书，还是三好学生，包括什么优秀毕业生之类的一个性质，在HR眼里，统统没用。这些只能证明你考试成绩不错，甚至还有一些暗箱操作的可能，企业是招你来干活的，你要拿出证明你技术能力的东西来。
看好了，现在的路线是就业，不是保研。
那么证书方面的配置至少如下：
英语四六级证书：至少，至少把四级考了，英语，不一定能给你加分，但不会，一定给你减分。
竞赛国家级二、三等奖：每一级名额都不少，争取一下还是可以的，省一是比较low了。
[可选]训练营证书：字节青训营、腾讯犀牛营，去和一些水平相近的人远程协作，最好拿个奖，也是不错的。
注意！计算机专业的是不需要考全国计算机二级的，因为全国计算机二级面向非计算机专业的人。软件工程专业毕业默认视为计算机4级水平。
以上是简历最关键的证明实力的三部分，确立好自己的就业路线后，就狠狠地丰富这三方面，绝对错不了。
入职后续的发展方向:
1.先利用前端弱鸡多大神少的特点踏入大厂的门 2.自学一年不如工作三个月，在工作中狠狠地学习 3.可以从前端过渡到后端、全栈、产品、管理或其他岗位 4.也可以在技术扎实之后学习英语，应聘国外的远程开发岗位(美元比较好赚) 5.也可以在技术扎实之后投入开源圈，现在 Vue 团队就是靠开源盈利的（但这个在大陆可能难以实现） 6.也可以在技术扎实、熟悉开发流程之后辞职创业，直接面对用户，解决用户的需求或者直接回家卖课
环境准备
浏览器：Edge + 内置Bing搜索引擎
别特么用你那老百度了，全是广告，bing至少会少一点。
之后会更推荐使用谷歌搜索，但大家现阶段用不上梯子。
软件：VSCode
真的见到好多下载软件第一想到的是去软件商店的，醒醒，这是电脑不是手机，打开edge，搜索VSCode，前面几个就有官网，有的是广告。
看好域名，code.visualstudio.com，这就是官网，进去Download下载。
并下载Live Server的插件，用它来编写代码实时预览网页。
让我们开始吧
不知道有几个人能看到这里（
我将整篇文章称为指南，而非教程，就是要声明，本指南对随便一搜就能学习到的知识点或案例不会有太详细的讲解，重点是写点常规教程没有的，做点别人课程里没有的案例。
从上面环境准备就可以看出来，比如我会介绍给你Live Server，但不会细讲怎么用。
我会在之后对初学者的学习流程进行指导，而非仅仅教知识，并且总结常见的问题循序渐进地用一个比较优雅的方案去解决。
原文地址
本文已得到作者授权转载喵，灌注本人 (Github)[https://github.com/huanxiaomang] 喵
