前端学习路线图

基础入门

入门前端工程师的必备技能，能够完成 PC 端和移动端的静态页面，具备 1:1 还原设计图的能力。

掌握 HTML 5 标签搭建页面结构

HTML 技术

标签语法
排版标签
语义化
SEO

掌握 PC 端网页制作和布局能力

CSS3 网页布局

选择器
盒模型
浮动
定位
过渡
精灵图

掌握移动端网页制作和布局能力

移动 Web 布局

Flex
REM
媒体查询
vw/vh
Bootstrap
Less
字体图标
平面转换
3D 转换
动画

阶段案例实战

学成在线（PC 端）
小兔鲜儿电商（PC 端 + 移动端）
喜马拉雅（PC 端）
优酷首页（移动端）
腾讯全端（响应式）

技术进阶

进阶成为合格的初级前端工程师，能够实现页面的交互效果，实现与后端的数据联通。

掌握 JavaScript 语言和基本编程思想

JavaScript 开发

掌握常用的网页交互技术

网页交互

DOM 操作
网页特效
事件

掌握前后端交互的能力

数据交互 & 异步编程

ajax
axios
Promise
async
Eventloop

阶段案例实战

小兔鲜商品详情
小米购物车
聊天机器人
通讯录
黑马换肤
图书管理

PC 端综合实战项目

数据看板 + CMS 系统

API 接口
Bootstrap
Echarts
Token
Axios

Vue 开发

成为中高级前端工程师的核心能力，能够实现企业级项目的功能需求，并具备内容管理系统、企业后台及移动端医疗项目的经验。

为学习框架做技术支撑

框架前置课

Node.js
模块化
npm
webpack

掌握 Vue 2.x 开发必备技能

Vue2.x 核心技术

指令系统
常用选项
组件化
组件通讯
插件

H5 端面经浏览 +PC 端内容管理系统面经

全端项目（Vue2.x 全家桶）

vue cli
vue-router
vuex
Element
vant
axios

智慧园区 +3D 大屏微前端应用

黑马智数项目（微前端 +Vue2+Vue3）

Vue2.x 全家桶
vue-admin-template
RBAC
组件封装
国际化
性能分析
Vue3.x
Vite
3D 模型
qiankun 微前端

掌握 Vue3.x 新特性与 TypeScript 核心语法

Vue3.x + TypeScript

Pinia
类型约束
泛型枚举
TS+ 组合式 API
TS+Axios

移动端在线医疗项目

Vue3.x+TS 优医问诊项目

Vue3.x 全家桶
TypeScript
Pinia
Vant
SocketIO
三方登录&支付
高德地图
gitlabCI
Vitest 测试

掌握 Vue2&Vue3 底层原理

Vue 原理

响应式数据
虚拟 DOM
Diff 算法
AST 语法树
Vue3 响应式系统
render 和 template

阶段项目实战

极客园项目（vue2.x 全家桶）
人力资源项目（vue2.x 全家桶）
神领物流（vue2.x 全家桶）

React & 小程序开发

成为中高级前端工程师的进阶技能，能够满足市面上 90%+ 公司的招聘需求，并具备网页端和移动端项目研发经验。

掌握原生微信小程序开发

享 + 生活原生小程序项目

原生小程序
微信 API 详解
腾讯地理定位服务
VantUI 应用

掌握跨平台小程序的开发

小兔鲜儿电商 uni-app 小程序项目

uni-app
Vue3+TypeScript
组件封装及通信
微信支付/登录

掌握 React 核心语法

React.js 核心技术

JSX
组件及组件通讯
虚拟 DOM
生命周期
记账本案例

阶段项目实战

神领物流 - 司机端 App

面试与就业

能够完善简历，轻松应对企业面试场景与面试题目。

掌握职场通识做好面试准备

职业发展课

职场通识
面试攻略
简历指导
模拟面试

掌握面试常见技术问题

就业加强课

常见算法
浏览器原理
Vue 原理
React 原理