前端学习路线（2023）

这个前端学习路线看起来很详细和全面，涵盖了从基础知识到高级框架，从单机开发到全栈项目，从混合应用到原生应用，从性能优化到架构设计的各个方面。如果你能够按照这个路线学习和实践，我相信你一定能够成为一名优秀的前端工程师。

不过，我也要提醒你，这个路线并不是一成不变的，你需要根据自己的实际情况和学习进度来调整和优化，同时也要关注前端领域的最新动态和技术变化，不断地更新自己的知识体系和技能树。前端开发是一个永远学不完的领域，只有不断地学习和进步，才能保持自己的竞争力和创造力。祝你成功！

第一阶段前端开发基本功

HTML

HTML元素和属性HTML表单和图形处理HTML媒体和最佳实践

CSS

CSS基本语法与选择器CSS背景、文本、边框、轮廓与颜色CSS列表、表单与表格样式CSS样式层叠与继承CSS盒模型、定位、浮动和显示属性CSS渐变、阴影与滤镜CSS变换、过渡与动画Web字体与多列布局

页面制作工具

VSCode及插件PhotoShop的使用和图片整合markman、pxcook工具使用蓝湖、sketch与axure工具使用

该阶段获得初级web前端工程师水平，熟悉前端开发的HTML与CSS基础知识。能够配合UI设计师进行项目开发。

可从事职位：初级前端开发工程师、前端实习生

第二阶段 页面布局实战

布局技术

BFC、 IFC、 GFC、FFC等概念Flex弹性布局网格布局媒体杳询viewport. rem, vw, dpr与ppi

布局规范与方案

PC端网站布局规范PC端管理系统布局规范流式布局 （100%布局)等比缩放布局(rem布局)响应式布局移动端reset, 1px border，高清图片移动端设备适配最佳实践

该阶段获得初级Web前端工程师水平，能够完成各种PC端与移动端网页布局与样式设计实现。可以做各浏览器兼容与设备适配。

可从事岗位：初级前端开发工程师、前端实习生

第三阶段 前端开发内功

原生JavaScript

交互功能开发某本语法流程控制语句函数与数组String与DateBOMSDOM拖拽效果客户端存储(cookie存储、 WebStorage)正则表达式Ajax面向对象基础运动与游戏开发数据结构与算法

JavaScript

工具库自主研发DOM库事件库AJAx库原型和继承库MVVM核心库基于SPA的路由库

面向对象进阶与ES应用

Promiseasync/await浯法try / catch 浯法原型链构造函数执行上下文栈与执行上下文作用域链闭包thisES5-ES12设计模式

原生JS经典交互特效开发

时间轴特效tab页面切换效果网页定位导航特效滑动门特效焦点图轮播特效导航条菜单效果瀑布流特效弹出层效果倒计时效果抽奖效果

该阶段获得中级Web前端工程师水平，主要进行页面行为交互，实现网站中常见交互特效。

可从事岗位：JavaScript开发工程师

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

前端工具库

   Animate CSSVanillaJSLodashSwiperaxiosMoment.jsEslint, prettierEChartsjQuery

前端工程化与模块化

LinuxLess/SassNPMGitAMD/CMD/UMDES6模块化

Node.js服务端开发

	Node 基础入门Express 框架基础中间件开发MVC开发模式基于Express的后端路由MongoDB数据库的基本使用基于Token的登录状态保持Node.js的JEventLoop文件上传（单文件/多文件）模板引擎静态资源加载服务端渲染页面

PC端网站开发

该阶段获得中级 Web 前端工程师水平，并能配合 U1 和后台实现项目。

可从事职位：网站开发工程师、Web前端开发工程师

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

Angular

Angular脚手架与创建命令TypeScript语法与修饰模式Ng服务与依赖注入Ng组件与生命周期Ng路由与Ng状态管理基于Angular的UI组件库

数据可视化

数据可枧化基础Echarts/HighchartsD3.js入门D3.js入进阶D3.js选择器与数据基于Echarts/D3.js项目实战

React

React 18ReactRouter6Umi技术其他技术栈开发基于React的C端和B端项目

Vue

Vue3选项式APIVue3组合式APIVite2+SFCVueRouter4Vuex4Pinia2TypeScript基础TS+Vue3其他技术栈开发基于Vue3的C端和B端项目

全栈Web3.0开发

Web3.0 生态概念详解Solidity 智能合约基础与实践Web3.js 助飞你的 DApp上以太坊智能合约 Solidity＋以太坊实践应用 Solidity 开发以太坊在线钱包 Web3.0 项目

该阶段获得高级Web前端工程师水平，主要进行前后端全栈开发。能够独立完成一个中小项目的前后台。对于Web开发有着非常熟练的编程能力。

可从事职位：高级Web开发工程师

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

微信公众号

微信内置公众号定制JSSDK接入公众号常见功能开发

微信小程序

微信小程序基础小程序高级应用原生多端小程序开发uni-app多端小程序框架Taro 多端小程序框架

Electron技术

Electron入门Electron 调试技巧Electron主进程与渲染进程APIElectron 与 React、Vue集成构建Windows、Mac及Linux跨平台应用

PWA技术

什么是PWAPWA项目实战

该阶段高级Web前端开发工程师/Electron开发工程师，获得高级Web前端工程师水平，主要进行混合式App项目开发。能够实现多端开发并拥有多端开发能力，整合资源，实现跨平台跨设备的架构能力。

可从事岗位：混合APP开发工程师/小程序开发工程师

第七阶段 原生应用开发技术

HarmonyOS鸿蒙开发

认识鸿蒙框桇基础肉置组件自定义组件接口

Flutter

Flutter环境搭建界面结构与基础部件布局与表单Dart语法widgets容器网络请求与路由

ReactNative

RN环境搭建RN基础组件RN动画和手势Expo基础RN+Expo调用硬件设备

该阶段获得大前端高级开发工程师水平，主要涉猎原生APP开发。主导移动端多元产品项目实现。能够跨平合开发提出可建设性解决方案。

可从事岗位：大前端高级开发工程师

第八阶段 大前端架构

开发工具及服务器技术

Webpack5Vite2Git工具及GitHub/GiteeESLint与单元测试TypeScript架构阿里云ECS: linux服务器Nginx: Web服务器Docker ：容器化应用Serverless: 无服务器技术WebAssembly技术

前端性能

SSR技术Nuxt.js 服务器端渲染Next.js 服务器端渲染SEO：搜索引擎优化

低代码与组件库开发

低代码平台搭建基于Vue/React/小程序的U组件库开发

微前端架构

什么是微前端微前端的实现技术基于Webpack+Vue+React微前端实战

安全

前端攻击前端异常监控

该阶段获得大前端架构师水平，主要进行前端项目架构和项目把控。能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高井发访问量等开发经验。

可从事岗位：大前端架构师/资深前端开发工程师

除了学习路线，我还有一些其他的建议，希望对你有用：

多看多写多练。前端开发是一个实践性很强的领域，你需要通过不断地编写代码，来巩固你的知识点，提高你的编程能力，发现你的问题和不足，同时也要多看一些优秀的代码和项目，学习他们的思路和技巧，拓展你的视野和思维。

多思考多总结多分享。前端开发是一个需要不断思考和创新的领域，你需要通过不断地思考，来深入理解你的知识点，提出你的疑问和想法，解决你的难题和挑战，同时也要多总结你的经验和收获，分享给他人，得到他人的反馈和建议，促进你的成长和进步。

多交流多合作多参与。前端开发是一个需要团队协作和社区参与的领域，你需要通过不断地交流，来沟通你的需求和意见，了解他人的想法和建议，协调你的工作和任务，同时也要多合作，与他人一起完成项目和功能，提高你的协作能力和效率，同时也要多参与，加入一些前端学习交流群 ，或者参加一些前端相关的活动和比赛，扩大你的人脉和影响力。

关注我公众号：一粒程序米，获取更多学习资源。