自学前端达到什么水平才能找到工作，来看这套前端学习路线图--陆神版本思维导图

末蓝、 2024-04-01 14:22 65阅读 0赞

说起前端届IT教育老大，怎么能没有千锋的名字，学前端，来千锋，入股不亏，学习带飞！

你可能兜兜转转看了不少路线图只是得到了罗列的知识点和一张思维导图，但是学这些能做些什么？学到这个程度可以找到什么样的工作并没有人跟你详细说明，这篇文章就来告诉你！

分享北大陆神精心为各位朋友梳理的前端开发学习成长路线，完整视频版本大家可以自行去搜索观看。

![c8c7a39780a65858a0b9c7ff53d38b9b.png][]

下面就让我们开始了解前端开发的进阶之路～

### 第一阶段：前端开发基本功 ###

![358f61f350a6db4b4272ae37dbcde6fb.png][]

这是入门前端最基础的内容。学会后，就能达到初级Web前端工程师水平。熟悉了前端开发的HTML与CSS基础知识，就能够配合UI设计师进行项目布局开发了。

如果你是应届生，想去找实习的工作，学完这个部分，初级前端开发工程师，前端实习生等岗位，你就可以去面试了，入职后待遇能达到4K-5K。

这一步骤共分为三部分内容：HTML、CSS和页面制作工具。HTML是前端开发入门首先要学会的东西，有了它，你才可以布局页面结构。CSS是页面美化和精细化的核心技术。想要更好的完成页面的开发，更好的与UI部门合作，这些页面制作工具是必须掌握的。

### 第二阶段：页面布局实战 ###

![2677fb15bd362fa6bae16f6617fd6448.png][]

有了第一步的基础知识，你就可以实战各种页面布局了。学会后，更加夯实初级Web前端工程师水平，能够完成各种PC端与移动端网页布局与样式设计实现了。

应届生找工作会更加有底气，入职后待遇能达到6K-7K。

这一步骤共分为两部分内容：布局技术，布局规范与方案。

想要轻松的完成各种PC端和手机端的布局，这些重要的布局技术必须掌握。另外一些布局规范与布局方案，是完成浏览器兼容和各种设备适配的法宝。

### 第三阶段：前端开发内功 ###

![16bc123a50e588d61cd3a68635bb2d86.png][]

![77049148668d9a6b91299202b6caa54a.png][]

![956088badd95a9fe1153c10e0dc51376.png][]

![f55aabd13ecfdede8e603db91f227ed9.png][]

### 第四阶段：PC端全栈项目开发 ###

![45170ef188e6b299f19f4daf9a3e7b23.png][]

![171a6a0a53bc589293825f150fb603ce.png][]

有了JavaScript、HTML、CSS知识，再加上这个步骤的技能点学习，你就能够完成一个PC端的前后端整体项目开发了。

可以从事网站开发工程师，以及Web前端开发工程师的工作了。薪资能达到11K-13K。

这一步骤共分为四部分内容：首先学会常用的前端工具库，掌握前端工程化和模块化，然后系统学习后端，或者叫服务端开发工具 Node.js，最后你就能独立完成一个网站或者管理系统的开发了。

### 第五阶段，前端高级框架技术。 ###

![13108660a0649ecd0d7b327c4c185d23.png][]

![79576c185806259c5d89bbd4e2578b7c.png][]

![1862828e32b71074721110d58d55e8b9.png][]

![5d885d09c5cc369c85edf3996c28bc20.png][]

![8800e3925cef686b2e99e92945abd2a6.png][]

![522d1e5b8791129e3a883d9d27604beb.png][]

这个步骤是从事前端工作必须掌握的重要内容，尤其是Vue、React，已经是公司开发企业项目的首选框架。

学会这个部分，你就是一名高级Web前端工程师了，可以胜任公司的C端和B端的所有项目，薪资待遇能达到14K-18K。那这些框架都需要学习掌握什么呢？

Vue框架，需要掌握Vue3和它的生态技术。掌握了Vue3的选项式API，Vue2的项目也信手拈来。Vue3生态的每个技术都包含了很多内容，都需要你掌握它并熟练应用。像Vue3的组合式API、Vite2+SFC、VueRouter4、Vuex4、Pinia2、TypeScript基础、TS+Vue3，其他的技术栈。学会这些，你就可以基于这些技术开发Vue3的C端和B端项目了。

React框架，同样需要掌握React18和它的生态技术。每个生态也都包含很多内容，像Umi技术栈、其他技术栈。React技术备受大厂青睐，一般情况下，React岗位薪资也会比Vue高些。那除了这两个主要框架还需要什么呢？

Angular框架，企业用的比较少些了，基本上都是老项目的维护了。

数据可视化，可以选学，如果项目里有这块需求，可以仔细研究一下。

### 第六阶段，混合应用开发技术。 ###

![0ac2002fb5c5e24f862ff08470b142c7.png][]

所谓混合开发，就是将HTML5基于浏览器的应用，嵌入到基于Android和iOS手机APP里，或者嵌入到基于Node和Chromium的桌面APP里。因为兼具了WebApp和NativeApp的双重优点，混合应用开发技术得到了广泛的应用。

学会这个部分，就拥有了多端开发能力，能够胜任跨平台跨设备的架构工作。通过Vue和React基础加持，薪资待遇能达到19K-22K。

常见的混合开发如手机端的微信公众号、微信小程序、桌面端的Electron技术和PWA技术等。

### 第七步，原生应用开发技术。 ###

![40acdde6f31099cb57febcc4e0deb780.png][]

所谓原生应用开发，就是应用前端的技术，脱离浏览器，进行原生的手机APP的开发。

掌握这部分内容，可以达到大前端高级开发工程师水平，可以主导移动端多元产品项目实现，能够跨平台开发提出可建设性解决方案。薪资待遇能达到 23K-30K。

比如，Facebook的基于React技术的ReactNative原生APP的开发，谷歌的基于Dart技术的Flutter原生APP的开发，以及华为的基于JS技术的HarmonyOS鸿蒙原生APP的开发。

### 第八步，大前端架构。 ###

这是本学习路线图最后一个步骤了，同时也到达了一个至高点。

![164842a5a70754ba0194cc96e35a2134.png][]

掌握这个部分，即可拥有大前端架构师水平，主要进行前端项目架构和项目把控。能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高并发访问量等开发经验。这个岗位的薪资能达到30K以上的水平。

前端架构师，包含很多内容，要求有广度也要有深度，这里给出了重要的五部分内容，包括开发工具及服务器技术、前端性能、微前端架构、低代码与组件库开发以及前端安全技术。

小白起点的前端路线图，我们都走了一遍，你可能会问，这些知识我们我该如何学习呢？你可以靠查文档、看视频，也可以找个师父带你。上面给大家推荐的视频都是核心的技术点视频以及项目练手视频，更多更细节的技术点请大家关注IT千锋教育搜索你需要的课程。

[c8c7a39780a65858a0b9c7ff53d38b9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ae4443883d8948cfac8d4dc51e293c60.png
[358f61f350a6db4b4272ae37dbcde6fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f129192751f84681b29dee7714428557.png
[2677fb15bd362fa6bae16f6617fd6448.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5e82b4bd286d442292f9d7f82e861376.png
[16bc123a50e588d61cd3a68635bb2d86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/67e40969a9b643a8addffb1bceb63a15.png
[77049148668d9a6b91299202b6caa54a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5fa3f139f91a464fa9c3cffddf6ce88f.png
[956088badd95a9fe1153c10e0dc51376.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bae7344646674bd28803624b5a04db5e.png
[f55aabd13ecfdede8e603db91f227ed9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5cd2ce8e5d4441b883965eedc89d2079.png
[45170ef188e6b299f19f4daf9a3e7b23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/388185e159bb49b1a79773fed3b09a5e.png
[171a6a0a53bc589293825f150fb603ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/eaf88c8d6b084c7c8f340b0a84ca7bed.png
[13108660a0649ecd0d7b327c4c185d23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/eaa261b26d5e40a2b8fd4c07b2592d5d.png
[79576c185806259c5d89bbd4e2578b7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f5063f7f5f4f4736824b69bbac0bd95b.png
[1862828e32b71074721110d58d55e8b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7ed828e727bf42daaa84b93d7ab7cf9b.png
[5d885d09c5cc369c85edf3996c28bc20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/322b9f4579614f42968aa3e98379d382.png
[8800e3925cef686b2e99e92945abd2a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4b508ef373e64c02bce3d428aaf43260.png
[522d1e5b8791129e3a883d9d27604beb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8fa8ccb9e414453b8d88a21c3855e8c9.png
[0ac2002fb5c5e24f862ff08470b142c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ccc03839a588478ea03f6e85a3340865.png
[40acdde6f31099cb57febcc4e0deb780.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6ec816a94a8644c6a07b7fd389de239b.png
[164842a5a70754ba0194cc96e35a2134.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7987b0b0ee1840c19c22f3d5f347ff39.png