2023年完整版web前端学习路线图：
目录
第一阶段：前端入门基础
第二阶段：前端入门开发
第三阶段：高级框架
第四阶段：混合应用开发
第五阶段：前端架构
web前端学习路线图
下面为大家详细介绍web前端学习路线的各阶段需要掌握学习的内容：
第一阶段：前端入门基础
html5+css3→ 页面布局实战（响应式/移动端/pc端页面）
1、前端入门基础核心必看html+css
这是入门前端最基础的内容，学习了解前端开发的HTML与CSS基础知识，学完就能够配合UI设计师进行项目布局开发了。
2、 页面布局实战
有了第一步的基础知识，你就可以实战各种页面布局了。学会后，更加夯实初级Web前端工程师水平，能够完成各种PC端与移动端网页布局与样式设计实现了。
第二阶段：前端入门开发
javascript（基础+进阶）→ ES6→ Ajax→ Promise→Git→node.js→PC端全栈项目开实战
1、JavaScript(基础+进阶)
本课程内容包括JS基础，基于面向对象开发实战，前后端交互实战，jQuery与BootStrap，以及CSS预处理器Sass，打造一站式知识长龙服务，适合有HTML和CSS基础的同学学习。
2、ES6
ES6的发布是大前端的里程碑。本课程主要学习内容包括ES6-ES13所有新特性以及实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。
3、Ajax扩展
Ajax技术可以使网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。
本课程内容包括Ajax XHR基础语法、fetch和axios使用、以及 跨域解决方案，打造一站式知识长龙服务，适合有JS基础的同学学习。
4、 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。
本课程内容包括Promise基础语法、手写Promise、async与await 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。
5、 Git
本课程包括Git常用命令、Git分支管理、团队以及跨团队协作、VSCode集成Git，稳稳拿捏Git。
6、Node.js入门及应用
本课程将从认识Nodejs开始学习npm、nrm、yarn；内置模块、路由、express、MongoDB、身份认证、koa、MySQL、Socket、Mocha等知识点全覆盖，学完本系列视频可以让前端程序员插上后端的翅膀，真正成为一名全栈工程师，助力同学横向全面发展。
7、PC端全栈项目开实战
（1）JS原生项目
本PC项目实战是基于JS开发，强化ES6-ES13的项目应用，打通前后端数据交互，并实战应用周边生态Sass以及Bootstrap, 打造一站式知识长龙服务，适合有js基础的同学学习。
（2）Js+Exprese项目
本套内容主要教会大家，如何利用nodejs的一个express框架和js开发一个blog项目。教会大家使用js做后端，使用js做前端，成为一名全栈工程师。
第三阶段：高级框架
vue2+vue3→vue实战项目 →Pinia→React→React实战项目
1、vue2.0+vue3.0 知识点+项目
Vue.js致力于构建数据驱动的web应用开发框架，以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。
本课程以项目实战为驱动，以轻松幽默的评书演义，帮你打开通往Vue.js的任督二脉，从vue2轻松过渡到vue3,助力同学成为一位优秀的Vue.js开发人员。
2、Vue+ElementUI物业后台管理系统
本项目是利用Vue3.0 + Element Plus UI技术开发后台管理系统，本视频你将见证从零开始搭建项目，手把手教你使用vue3.0组件开发，并用Element UI库快速创建项目页面，使用axios封装与拦截器进行前后端交互，用json-server模拟数据后台创建。在项目中还会讲到工具库的封装、vue环境变量的部署、路由的设置与配置、响应式配置等。
3、 Pinia
课程基于vue3+vite+ts来学习pinia的使用，并结合当下最流行的聊天解决方案——腾讯IM完成项目实战，并深入封装基于pinia的IM插件。
4、Echarts+Vue3.0数据可视化项目构建
本项目实战课程对Echarts中的各项核心图标技术，以及周边技术都进行了详细的讲解，一套课程让你精通Echarts技术栈，串联Echarts和vue3.0热门技术应用，让大数据可视化开发如丝般顺滑！
5、React
React已经成为江湖大厂的主流前端开发框架，本课程基于最新版React17良心制作。对React开发核心技术以及周边技术栈进行详细讲解，并进一步通过实际需求案例驱动知识点吸收，帮助大家迅速成长为React开发高手。最后还有一个完整的后台管理系统项目实战讲解，让大家即使身不入大厂，也可对企业内部真实项目组开发流程与细节做到心中有数。
6、react项目UmiJS蛋糕订购管理平台
从Umijis 上手、LeanCloud云服务、商品管理等业务逻辑、角色及权限管理、高德地图及Echarts这五个方面展开讲解Umijs的基本使用,让同学们能够快速上手Umijs框架。采用LeanCloud云服务作为项目的后端接口，结合Umijs 框架，serverless云服务实现业务逻辑交互,角色权限管理，最后完成蛋糕配送范围的绘制功能，利用Echarts 实现数据可视化功能。
第四阶段：混合应用开发
微信公众号→微信小程序→微信小程序实战项目→ uni-app→uni-app实战项目
所谓混合开发，就是将HTML5基于浏览器的应用，嵌入到基于Android和iOS手机APP里，或者嵌入到基于Node和Chromium的桌面APP里。因为兼具了WebApp和NativeApp的双重优点，混合应用开发技术得到了广泛的应用。
学会这个部分，就拥有了多端开发能力，能够胜任跨平台跨设备的架构工作。常见的混合开发如手机端的微信公众号、微信小程序、桌面端的Electron技术和PWA技术等。
1、微信公众号开发
本系列课程从整个微信公众号体系的介绍开始，进一步使用编辑模式来完成一个最基本的公众号搭建；此外你还将了解到公众号的开发模式以及所需的服务端相关知识，其中包括Express、MongoDB、Robo3T、mongoose、云服务器等；还会对微信JS-SDK鉴权的整个流程进行梳理与开发；使用vue技术栈结合vant组件库，构建web应用并集成到微信公众平台中。
2、微信小程序项目开发
本系列视频课程分为两大部分，微信小程序基础与项目实战开发。小程序开发基础学习部分你将从开发流程学起，到全局配置、todolist、基础语法、组件及自定义组件的基础知识学习。实战开发部分的讲解则会从项目搭建到借口、封装、首页模块、轮播模块、搜索模块、分类模块、授权模块、购物车及我的模块深度剖析小程序。
3、原生小程序-锋运票务系统 ——基于微信云托管的管理系统
本套《原生小程序-锋运票务系统》课程是针对有一定的前端基础的开发者提供的一个原生小程序案例实践课程。课程涵盖了客户端及中后台的业务流程，服务端的部署详细的讲解微信云托管的项目部署流程。整体项目从企业实践角度出发，多种常见的业务二次封装的技术分享，组件的复用，第三方类库的合理应用。
4、锋巢直播IM ——基于腾讯云音视频跨平台应用（全网首发）
本课程用腾讯即时通信IM+直播电商解决方案组件TLS,并涉及众多腾讯云产品，包括但不限于云直播，云数据库，Serverless，提供了一站式讲解，帮助大家迅速整合直播电商功能到自己的业务中， 通过幽默风趣讲解驱动学习的积极性，让大家不入公司，便知公司项目的全貌。
5、uni-app入门到实战项目之《仿网易云音乐》
Uniapp 是基于「 Vue + 微信小程序 」语言体系，开发人员学习成本低上手快，随着如今 Uniapp 生态也逐步趋于成熟。基于 Uniapp 开发多端项目，已经是很多中小型企业常用的技术解决方案。 我们就从 Uniapp 基础开始，对照企业级实践标准，从零到一打造一个多端（微信小程序 + H5 + 安卓 app + IOS app）的社区论坛类项目。
6、uni-app蛋糕订购项目开发教程
本项目是一个面向部分城市群体的蛋糕定制网站，为指定区域的用户提供在线定制、实时配送，打造线上线下相结合的个性化蛋糕定制服务。
掌握这个部分，即可拥有大前端架构师水平，主要进行前端项目架构和项目把控。能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高并发访问量等开发经验。
第五阶段：前端架构
掌握这个部分，即可拥有大前端架构师水平，主要进行前端项目架构和项目把控。能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高并发访问量等开发经验。
1、webpack5
webpack5课程分为四大部分，分别是webpack基础应用篇，webpack高级应用篇，webpack项目实战篇以及webpack内部原理篇。在本课程中，我们将通过前后呼应的demo从0到1学会webpack5，在项目实战中学以致用并在最后阶段去理解其底层的原理，从而做到对webpack5知其然并知其所以然的精熟掌握程度，完成前端工程师的一大步提升。
2、Vite2
Vite 基于原生 ES-Module 推出的前端构建工具，Vite 因为它的跨前端框架的能力 和极其优越的性能，被大家称为下一代前端构建工具，及时的学习新技术是有必要的。本系列视频你将会学到Vite环境的搭建、依赖预构建、模块热重载、在Vite中使用vue2\vue3\CSS等其他技术、服务器渲染等关联技术。
3、typescript
本套视频将从官网的知识点入手，分为基础篇，高级篇，案例篇及项目篇共4个篇章，结合案例循序渐进带你入门TypeScript。本视频还有配套详细版的文字笔记，帮助大家从 0 到 1 学习TypeScript,让你能读懂别人的TS代码的同时也能编写自己的TS代码。
4、从零编写一个HarmonyOS app
这个项目实战案例将手把手教你从0开始编写华为鸿蒙app，本视频包含了对鸿蒙系统技术细节、生态圈全面解析及对鸿蒙系统的技术架构进行详细讲解，最终让大家开发初属于自己的第一个鸿蒙应用！真正将学到的核心技术点进行串联使用。
温馨提示
高手查漏补缺，小白从头再来，每天安排1小时，坚持下去，成功就属于你！
希望我的内容能帮助到每一位想要通过学习改变命运的伙伴，
如有所获，请为小编的辛苦付出送上你宝贵的点赞+关注+转发 一 键 三 连 吧！！！
最后：祝愿各位伙伴都能前程似锦！！！
