前端小白学习路线

前端技术排名网站：https://risingstars.js.org/2022/zh

Web 前端技术图谱：https://www.runoob.com/w3cnote/webfrontendstack.html

第一步：前端开发基本功

获得初级 Web 前端工程师水平，熟悉前端开发的 HTML 与

CSS 基础知识。能够配合 UI 设计师进行项目开发。

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

薪资待遇：4K-5K

1、HTML

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

2、CSS

• CSS 基本语法与选择器

• CSS 背景、文本、边框、轮廓与颜⾊

• CSS 列表、表单与表格样式

• CSS 样式层叠与继承

• CSS 盒模型、定位、浮动和显示属性

• CSS 渐变、阴影与滤镜

• CSS 变换、过渡与动画

• Web 字体与多列布局

3、页面制作工具

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

第二步：页面布局实战

获得初级 Web 前端工程师水平，能够完成各种 PC 端与移动端

网页布局与样式设计实现。可以做各浏览器兼容与设备适配。

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

薪资待遇：6K-7K

1、布局技术

BFC、IFC、GFC、FFC 等概念

Flex 弹性布局

网格布局

媒体查询

viewport、rem、vw、dpr 与 ppi

2、布局规范与方案

PC 端网站布局规范

PC 端管理系统布局规范

流式布局（100%布局）

等比缩放布局（rem 布局）

响应式布局

移动端 reset, 1px border, 高清图片

移动端设备适配最佳实践

第三步：前端开发内功

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

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

待遇薪资：8K-10K

1、原生 JavaScript 交互功能开发

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

2、面向对象进阶与 ES 应用

• Promise
• async/await 语法
• try / catch 语法
• 原型链
• 构造函数
• 执行上下文栈与执行上下文
• 作用域链
• 闭包
• this
• ES5-ES12
• 设计模式

3、原生 JS 经典交互特效开发

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

4、JavaScript 工具库自主研发

• DOM 库
• 事件库
• AJAX 库
• 原型和继承库
• MVVM 核⼼库
• 基于 SPA 的路由库

第四步：PC 端全栈项目开发

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

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

薪资待遇：11K-13K

1、前端工具库

• Animate CSS
• VanillaJS
• Lodash
• Swiper
• axios
• Moment.js
• Eslint、prettier
• ECharts
• jQuery

2、前端工程化与模块化

• Linux
• Less/Sass
• NPM
• Git
• AMD/CMD/UMD
• ES6 模块化

3、Node.js 服务端开发

• Node 基础入⻔
• Express 框架基础
• 中间件开发
• MVC 开发模式
• 基于 Express 的后端路由
• MongoDB 数据库的基本使用
• 基于 Token 的登录状态保持
• Node.js 的 EventLoop
• 模板引擎
• 静态资源加载
• 服务端渲染页面

4、PC 端网站开发

第五步：前端高级框架技术

获得高级 Web 前端工程师水平，主要进行前后端全栈开发。

能够独立完成一个中小项目的前后台。对于 Web 开发有着非常熟练的编程能⼒。

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

薪资待遇：14K-18K

1、Vue

Vue3 选项式 API

• Vue3 初探
• 模板与指令
• 生命周期
• 相应式
• 组件化
• 组件间通信
• 插槽
• 依赖注入
• 动态组件
• 异步组件
• 自定义指令
• 插件
• Vue3 过渡效果
• Telepor 传送⻔
• 两个重要组件实例 API
• 渲染函数

Vue3 组合式 API

• 组合式 API
• setup()函数
• 相应式核⼼
• 工具函数
• 生命周期钩子
• 依赖注入
• 组合式函数

Vite2+SFC

• Vite 脚手架的使用
• Vue3 单文件组件
• 单文件组件<script setup>
• 在 Vite 中使用 CSS 和静态资源
• 在 Vite 中使用 TS
• 构建生产版本
• 在 Vite 中使用 ESLint
• 环境变量与模式
• 腾讯云 Webify 项目部署

VueRouter4

• 理解 SPA 单页面应用程序
• 集成安装 vue-router
• 路由规则的定义
• 两种路由模式：hash 模式、history 模式
• 两个内置组件 <router-view> <router-link>
• 两个路由 API：$router路由跳转、$route 路由信息
• 两种路由传参：动态路由传参、query 传参
• 路由重定向、命名视图、路由别名、命名路由
• 嵌套路由与实践应用
• 路由懒加载与实现原理
• 路由元信息、路由守卫
• 组合式 API

Vuex4

• 状态管理、理解单向数据流
• 集成安装 vuex
• store 的创建、定义、挂载与使用
• state、getters、mutations、actions、modules
• 五大概念
• vue-devtools 的安装与使用
• mapState、mapGetters、mapMutations、
• mapActions 的使用
• axios 封装，以及 Vuex 异步数据流程
• CORS 阻塞跨域请求的原理与解决方案

Pinia2

• 为什么使用 pinia
• pinia 和 Vuex 比较
• Pinia 核⼼概念（Store，State，Actions，
• Getters）
• 会用 Pinia 做个购物⻋

TypeScript 基础

• 什么是 TypeScript
• 数据类型
• 函数
• 接口
• 泛型

TS+Vue3

• TS 与选项式 API
• TS 与组合式 API

其他技术栈

• Vant 组件库
• 单元测试
• 项目联调与测试
• 服务器配置与项目部署
• 项目优化：SSR+Nuxt.js
• PWA

开发基于 Vue3 的 C 端和 B 端项目

2、React

React 18

• CRA 脚手架
• 组件定义
• JSX
• Props
• 事件绑定
• State
• 生命周期
• 条件渲染与列表渲染
• 表单绑定
• 状态提升
• 组合
• 上下文 Context
• 高阶组件
• Ref
• hooks
• Redux
• Redux Toolkit

ReactRouter6

• 集成安装 ReactRouter
• 路由规则的定义、路由跳转与传参
• 路由组件、路由 Hooks
• 代码分割技术
• 路由(V5)和路由(V6)差异解读

Umi 技术栈

• umi4 企业级前端开发框架
• 约定式及配置式路由
• umi 数据流
• 权限管理
• 图表
• 国际化
• 微前端

其他前端技术栈

• TS + React
• ant-design-pro
• antd-mobile
• mobx
• next
• swr
• 业务组件的封装
• 单元测试
• 项目部署与发布

开发基于 React 的 C 端和 B 端项目

3、Angular

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

4、数据可视化

• 数据可视化基础
• Echarts/Highcharts
• D3.js 入⻔
• D3.js 进阶
• D3.js 选择器与数据
• 基于 Echarts/D3.js 项目实战

第六步：混合应用开发技术

获得高级 Web 前端工程师水平，主要进行混合式 App 项目开发。

能够实现多端开发并拥有多端开发能⼒，整合资源，实现跨平台跨设备的架构能⼒。

可从事岗位：混合 APP 开发工程师/小程序开发工程师/高级 Web 前端开发工程师/Electron 开发工程师

薪资待遇：19K-22K

1、微信公众号

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

2、微信小程序

• 微信小程序基础
• 小程序高级应用
• uni-app 多端小程序框架
• uni-app 多端小程序框架
• Taro 多端小程序框架

3、Electron 技术

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

4、PWA 技术

• 什么是 PWA
• PWA 项目实战

第七步：原生应用开发技术

获得大前端高级开发工程师水平，主要涉猎原生 APP 开发。

主导移动端多元产品项目实现。能够跨平台开发提出可建设性解决方案。

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

薪资待遇：23K-30K

1、ReactNative

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

2、Flutter

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

HarmonyOS 鸿蒙开发

• 认识鸿蒙
• 框架基础
• 内置组件
• 自定义组件
• 接口

第⼋步：大前端架构

获得大前端架构师水平，主要进行前端项目架构和项目把控。

能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高并发访问量等开发经验。

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

薪资待遇：30K 以上

1、开发工具及服务器技术

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

2、前端性能

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

3、微前端架构

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

4、低代码与组件库开发

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

5、安全

• 前端攻击
• 前端异常监控