0基础入门学前端，2022 年前端学习路线总结，前端开发需要学什么？
经常有小伙伴后台问我要前端开发学习路线，今天抽时间更新了一下最新的前端开发学习路线图，赶紧收藏起来吧。
说点实在的，我们学习的目的就业找工作，所以，我们要学习或者要掌握的技能一定是企业需要的。所以我们要学习的内容就来源于市场的需求，那我们怎么看企业的需求呢？当然是招聘网站了。ps：这个大家也可以自己去看，这个方法也可以用到很多其他的领域，叫做“以终为始”。
我们可以从前端开发招聘的需求中看出，企业招人的要求，需要具备哪些技能和能力。我们就可以针对性的去学习。当然不是盲目的去学习，而是需要系统的学习，这样知识体系才是完整的，综合能力才能过硬。
以下截图大型招聘网站对于前端开发工程师岗位的要求：
数据来源：BOSS直聘
数据来源：BOSS直聘
数据来源：BOSS直聘
通过如上截图可以看出来，其实要从事前端开发相关的工作， 要求其实还是挺多的，而且每家公司的业务不同所要求的具备的能力也是不同的。
虽然招聘需求不尽相同，但是还是有很多共同点，那有没有一张图可以系统展示前端学习内容，来满足市场需求呢？
我们要做的就是帮助大家在最短的时间内高效的学习，顺利入门前端；所以我们经过了大量的招聘需求的分析、统计、分析、处理、汇总成一个前端的知识体系，再根据大家0基础学习的特点，由易到难，由点到面的设计出了一个系统的、高效的学习路线图。
如下： 
前端学习路线及详细内容分析
大致可以分为4个阶段：1、基础入门： HTML5+CSS3+实战项目 → 移动web2、JavaScript阶段： JavaScript基础 → JavaScript核心Web APIs → 数据交互 & 异步编程Ajax\Git3、VUE开发： 框架前置课Nodejs&es6 → Vue2+Vue34、React + 微信小程序： React → TypeScript → 微信小程序5、项目实战 -工程化 -服务化等6、简历 & 面试指导
第一阶段 基础入门 HTML5+CSS3+实战项目 → 移动web
学前导读：为零基础学员量身定制，教你搭建PC端和移动端静态页面，让你从小白升级成网页“化妆师”，轻松掌握 HTML5 和 CSS3 相关知识。
1.1、Web前端零基础入门HTML5+CSS3+前端项目
课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。
本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。
学习目标
借助PxCook工具，参照设计稿，能综合使用HTML+CSS技术完成企业级小兔鲜儿
电商项目PC端首页开发。
主讲内容
1. HTMLHTML 负责网页的结构层，是网页开发的基础，从简单的网页骨架搭建入手，使用常见的 HTML 标签丰富网页结构。
知识点： HTML基础语法 | 排版标签 | 路径 | 多媒体标签 | 链接标签 | 列表标签 | 表格标签 | 表单标签 | 布局标签 | 语义化标签| 字符实体
主讲内容
2. CSS在 HTML 搭建的网页结构基础上，通过 CSS选择器 精准选择标签，使用外观、盒模型相关属性完成网页全部内容，利用浮动、定位等布局技巧精准控制网页布局，结合背景、圆角、阴影等装饰属性进一步美化网页效果，达到能够编写企业级大型综合网页。
知识点： 选择器 | 外观 | 文字 | 背景 | 标准流 | 三大特性 | 盒模型 | 伪元素 | 浮动 | 伪类 | 定位 | 圆角 | 阴影 | 透明 | 过渡
主讲内容
3. 企业级小兔鲜儿电商项目首页制作借助PxCook工具，基于设计稿编写网页，确保网页的高度还原，通过综合运用 HTML + CSS 技术，按照实际项目开发流程，归纳开发技巧，提升综合实战水平，完成企业级小兔鲜儿电商项目PC端首页开发。
知识点： 精灵图 | 文档编码 | 性能优化
| 布局技巧 | SEO | 性能优化 | 版心 | 设计稿 | PxCook
1.2、移动web开发实战
本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。
课程采用闭环方式设计，每天课程都有完整的案例或项目， 让学生学以致用。
学习目标1. 使用CSS高级特效，丰富网页元素的呈现方式和效果| 2. 使用rem或vw、vh实现网页元素宽高随着视口变化等比缩放的效果| 3. 使用bootstrap框架布局响应式网页主讲内容1. CSS高级特效使用css高级特效丰富网页元素的呈现方式和效果。知识点：字体图标 ｜2D转换｜3D转换｜动画
主讲内容2. 移动适配首先介绍Flex布局模型,实现移动端网页的基本布局;再讲解两种移动端网页适配不同分辨率的解决方案,并使用不同的解决方案制作网页元素宽高随着视口的变化而等比缩放的效果。知识点：rem ｜ vw/vh｜Flex布局模型｜Less基础语法｜视口｜分辨率｜二倍图｜移动适配｜媒体查询
主讲内容3. 响应式学习响应式的原理,并使用bootstrap框架完成响应式网页的布局。知识点：媒体查询｜ bootstrap框架｜栅格系统｜组件｜响应式网页布局
第二阶段 技术进阶 JavaScript阶段
学前导读：让网页“动”起来，带你学会前端工程师核心语言——JavaScript，实现网页数据交互与动画效果，并实现与后端数据的联通。
2.1、JavaScript深入浅出
学完本课程你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符
、数组、函数、构造函数、内置对象以及对象等基础必备技能。学习客户端
开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。
学习目标 1. 掌握JavaScript基础语法，培养编程逻辑思维2. 掌握DOM和BOM对象的常用属性和方法，能够完成网页常见的交互效果3. 能够使用 axios 实现 Ajax 操作，为后续项目课做好技术铺垫4. 能够运用 Git 管理前端项目，并且使用 Git 分支进行多人协同开发5. 能够使用 Promise 与 async/await 高效的实现异步操作
主讲内容
1. JavaScript基础学习JavaScript基础语法规则。
知识点： 变量 | 基本数据类型 | 数据类型的转换 | 运算符 | if分支 | switch分支 | 三元表达式 | while循环 | for循环 | 数组 | 函数 | 对象 | 内置对象 | let | const | 字面量
2. WebAPI学习DOM和BOM对象的属性和方法,以完成网页常见的交互效果。
知识点：DOM树 | DOM对象 | 获取元素 | inne
rHTML | style | className | classList | 间歇函数 | 延迟函数 | 事件监听 | 鼠标事件 | 键盘事件 | 高阶函数 | 环境对象 | 节点操作 | 事件流 | 事件委托 | 元素位置 | BOM | window对象 | swiper插件 | 本地存储 | 自定义属性 | 正则表达式
3. JavaScript高级深入理解 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性，注重抽象思维的培养，具备面向对象编程的的能力。
知识点：构造函数 | 单体对象 | 面向对象 | 原型 | 解构 | 剩余 | 展开 | 箭头函数 | Object | Array | 严格模式 | 闭包 | 继承 | 防抖 | 节流 | 异常处理 | 深浅拷贝
4. Ajax利用 axios 发起 Ajax 请求，实现前后端的数据交互。并讲解 HTTP 请求的过程以及 Ajax 的底层原理。深入学习 JS 异步的底层原理，能够使用 Promise 处理异步操作，并使用 async/await 简化异步操作。
知识点： 客户端与服务器 | axios | 请求与响应报文 | 接口 | form 表单 | 拦截器 | FormData | 文件上传 | XMLHttpRequest | Promise | async/await | EventLoop | 宏任务 | 微任务
5. Git能够创建 Git 仓库管理前端项目。基于 Git 分支进行多人协同开发，并且能够把本地的 Git 仓库同步到远程码云或 Github 仓库中。
知识点： 安装和配置 Git | Git 本地操作的常用命令 | .gitignore 忽略文件 | Git 分支与常用命令 |远程仓库的使用
第三阶段 VUE开发
3.1、VUE框架开发
学前导读：掌握多行业解决方案，项目开发拿来即用，帮你搞定前端工程师必备热门框架Vue.js。
历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！
学习目标
通过 Vue2 和 Vue3 的基础学习，掌握企业开发中常见业务功能实现；通过深入 Vue 技术栈学习 vue-router vuex vant element-ui 等主流技术，掌握企业级项目开发方式，如移动端H5项目实与PC端管理项目；通过 Vue3 结合 TypeScript 的技术学习，掌握大型企业级项目开发技巧。
主讲内容
1. 框架前置课掌握模块化思想，npm包管理，webpack基础，初探工程化开发。
知识点：Node.js安装 | fs模块 | path模块 | http模块 | npm | 包配置文件 | npm常用命令 | 模块化概念| CommonJS | ES6Module | 工程化开发概念 | webpack基础配置 | dev-server | webpack插件 | 常用loader | babel
2. Vue核心技术运用Vue2.0全家桶核心内容实现开发中常见的功能，如购物车，经典列表、TodoMVC等。运用 Vant 开发移动端，运用element-ui开发PC后台管理系统。
知识点：MVVM | SPA | Vue 调试工具 | 虚拟DOM | diff算法 | 指令系统
| v-model原理 | 数据选项 | 生命周期 | 样式穿透 | 动态样式 | 插槽 | 组件系统 | 组件通信 | 自定义指令 | ref | 动态组件 | $nextTick | 自定义事件 | 计算属性 | 侦听器 | 组件库 | 组件封装 | keep-alive | 路由系统 | 导航守卫 | vue-cli | vuex | vant | element-ui | 路由懒加载
3. Vue3.0高级掌握Vue3新特性、Vite、组合API、Pinia 等。知识点：Vite | 选项API | 组合API | setup | 生命周期 | reactive | toRef | toRefs | computed | 组件通信 | 依赖注入 | ref边界 | Pinia
4. TypeScript掌握TypeScript基础语法，并且在Vue3项目中熟练运用TypeScript。知识点：基础类型｜联合类型｜字面量类型｜类型推断 | 类型断言 | 泛型 | 类型声明 | ts结合composition-api | ts结合axios | 头条案例
第四阶段 React&小程序开发
4.1、React框架
学前导读：React帮你解锁中高级前端工程师能力地图，多端项目让你满足90%+企业需求。
React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。
学习目标通过React+class组件+Hooks+Redux+TypeScript的学习，实现企业开发中的经典案例，如B站论、购物车、放大镜、点餐系统等业务功能。
主讲内容
1. React 核心技术基于 React 脚手架（create-react-app）搭建React项目，
掌握JSX语法搭建页面结构，使用函数组件实现组件化开发，掌握组件通讯在项目开发中的使用。
知识点：create-react-app（CRA）|JSX|条件渲染|列表渲染|样式处理|组件化开发|函数组件|useState Hook|状态不可变|事件绑定|事件对象|受控组件|useRef DOM操作|组件通信|父传子|子传父|兄弟组件通讯|状态提升|跨组件通讯|Context|useContext
2. Hooks 深入+路由掌握 useEffect Hook 的应用，掌握 useRef Hook 的高级用法，理解 Hooks 原理，掌握 react-router-dom 的应用。
知识点：useEffect|useRef 高级用法|useRef 保持引用不变|组件更新机制和特点|验证码登录倒计时|Hooks 原理|React 路由|Route|Routes|BrowserRouter|useRoutes|404页面|编程式导航 useNavigate|子路由|路由嵌套
3. Redux +中间件 + Redux Toolkit掌握 React 最常用状态管理工具 Redux 的基本使用，使用 react-redux 链接库在 React 中使用 Redux，掌握 Redux 中间件 redux-thunk 用来处理异步请求，掌握 Redux Tookit 简化 Redux 的使用。
知识点：状态管理流程|action|dispatch|store|reducer|redux-thunk中间件|combineReducers|react-redux|Redux Toolkit |Redux 调试工具|Redux 数据流|createAsyncThunk|基于Promise的thunk状态|immer
4. 记账本案例利用 React + Hooks + Redux Tookit 实现记账本案例，对整个 React 阶段所学内容进行练习，验证我们是否掌握了 React 开发能力。
知识点：组件库 antd-mobile|路由|axios 数据请求|记账页面|月度收支页面|全部账单页面|useMemo Hook|自定义 Hooks|状态逻辑复用|json-server 数据接口
4.2、手把手快速带你开发微信小程序
本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用
学习目标能够独立开发原生小程序，能够使用uni-app开发小程序，提高就业能力，是就业的加分项
主讲内容1. 原生小程序了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
知识点：账号申请 | 开发工具 | 工程目录 | 项目配置 | 屏幕适配 | 资源托管 | 字体图标 | 数据绑定 | 事件处理 | 生命周期 | 场景值 | 模块化 | 网络请求 | 路由 | WXS | 模板 | 组件 | UI 框架 | 表单 | Promise
2. uni-app理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
知识点：脚手架 | 项目配置 | 单文件组件 | 生命周期 | 条件编译 | 计算属性 | 跨平台支持 | less | sass | 组件通信
4.3、前端工程化
学习目标高级前端工程师必备技能，在项目开发中实现自动化、规范化、组件化、模块化。主讲内容1. webpack 核心学会 webpack 的配置 理解 webpack 的作用与原理 上手项目的打包过程配置 拥有工程化的前端思维 掌握前端工程化的常见工具及工作原理 了解 webpack 性能优化 了解 webpack 中的 tapable 了解 AST 的应用 深入学习 webpack 原理，手写 webpack
知识点：基本配置 | loader | plugin | sourc map | HMR | Shimming | CodeSplitting | TreeShaking | Caching | 性能优化 | 多页应用 | PreLoading | PreFetching
2. 脚手架工具掌握 vue-cli 及相关配置 掌握 vue-cli 初始化单页及多页项目 掌握使用 create-react-app 搭建项目 了解 create-react-app 的原理 掌握 angular-cli 搭建项目 了解 angular-cli 的原理 掌握一个基础 cli 的功能实现
知识点：vue-cli | create-react-app | angular-cli | CLI 原理
3. git flow 全流程掌握提交相关：git rebase/git commit/git reflog/git log 掌握子模块: submodule/subtree 掌握分支管理：git fetch/git checkout/git merge 掌握重置及回退：git reset/git checkout/git rm 掌握多人协同 git 工作流 掌握 git 常见的分支管理命令
知识点：rebase | commit | reflog | log | submodule | subtree | fetch | checkout | merge | reset | checkout | rm | mv | branch | switch | git flow
4.4、前端服务化
学习目标
高级前端工程师必备技能，SEO 优化策略之一，网站性能监控与埋点方案。
主讲内容
1. Koa / eggKoa / egg / 中间件知识点：对 Egg 的功能有全面的理解 | 掌握使用 Egg 完成项目 | 理解 Koa 的核心设计思想 | 掌握 Koa 的中间件编写
2. NoSQLRedis / MongoDB知识点：理解 redis 核心概念与使用 | 能使用 redis 运用到项目中 | 理解 MongoDB 核心概念与使用 | 能使用 MongoDB 运用到项目中
3. 性能监控服务端日志收集系统设计 接入第三方监控平台 服务端错误预警 分析用户行为 建立用户画像知识点：理解服务端日志收集系统设计 | 掌握接入第三方监控平台 | 掌握对服务端错误预警 | 前端异常上报 | 用户 PV/UV 统计 | 页面加载时间统计 | 用户点击行为统计 | 接口请求日志统计 | 接口请求耗时统计 | 静态资源加载异常统计 | 实现 JS 页面截图 | JS 报错实时监控统计分析 | 详情分析和代码定位 | 静态资源加载异常实时监控 | 静态资源加载异常的统计分析 | 接口请求报错实时监控 | 接口请求报错的统计分析 | 用户 PV/UV 实时统计 | 记录回放功能（详细记录用户使用的足迹） | 7 日内留存数据分析 | 版本号分析，浏览器分布，等信息分析 | 分析页面加载性能数据
4. SSRSSR 运行原理 SSR 环境搭建 缓存和 stream 性能优化知识点：理解 SSR 运行原理及为什么需要使用 SSR | 掌握 SSR 环境搭建 | 掌握使用缓存和 stream 对 SSR 进行优化 | 掌握 Nuxt.js / Next.js 的应用
第五阶段 项目实战：
项目一、数据看板项目（立可得）
智能看板是一个数据可视化项目，通过折线图、K线图、柱状图等图表形式归纳汇总大量数据，以直观的方式展示数据。学员通过学习该项目，能够掌握数据可视化、异步编程、实时数据获取等技术解决方案，适合有基础希望技能强化的IT人员继续学习。
立可得
学习目标掌握Echarts 各类型数据可视化图表的应用能够根据需要求创建折线图、K线图、地图等图表掌握前后端分离技术的实现方式并了解其意义掌握使用token进行访问鉴权功能实现
主讲解决方案
1. 基于 bootstrap 的响应式页面布局方案，2. 基于 echarts 的数据可视化解决方案， 3. 基于 token 的访问权限控制解决方案
主讲知识点
1.基于axios 实现网站注册和登录功能 2.基于 Echarts 结合需求高度自定义不同类型的可视化图表 3.Ajax、数据渲染和服务端推送前后端分离技术的应用 4.基于 token 的访问权限控制功能
项目二、面经全端项目（黑马面面）
黑马面面是一款面试刷题程序，系统包含答题状况管理、学科管理、企业管理、用户管理等综合管理功能。学员通过该项目可学习Element-UI功能组件、ECharts数据可视化、axios、JWT、Vue CLI、Vuex整体数据共享、Vue Router 等多个技术解决方案。
黑马面面
学习目标
1. 掌握 element-ui 组件库的运用，2. 掌握 axios 以及拦截器的应用， 3. 掌握 Vuex 管理全局状态的技术解决方案，4. 熟练使用 vue-router 管理组件的切换展示，5. 掌握 element-ui 中如何自定义表单的校验规则， 6. 掌握文件上传和富文本编辑器在 Vue 项目中的应用，7. 掌握 Vant 组件库的运用，8. 掌握使用 postcss-px-to-viewport 实现移动端适配
主讲解决方案
1.token身份认证解决方案| 2.文件上传解决方案| 3.富文本编辑解决方案| 4.表单验证解决方案| 5.基于vant的移动端界面构建方案| 6.基于postcss-px-to-viewport移动端适配方案
主讲知识点
1. 基于 vue-cli 创建工程化的 Vue 项目 2. 基于 element-ui 组件库快速实现项目布局 3. 用户注册与登录的业务解决方案 4. 使用 Vuex 管理全局共享的数据 5. 使用 axios 实现前后端的数据交互 6. 基于 vant 组件库快速构建移动端界面
项目三、iHRM人力资源项目
iHRM人力资源管理系统是一款在线HR人力资源管理系统，帮助企业管理人事信息、员工档案、绩效考核等。利用HR软件充分发挥人力资源的价值，通过企业人事HR管理人力资源，从而保持人才竞争力。
iHRM人力资源管理系统
学习目标
1.掌握Vue + Element技术栈在开发管理型后台项目的技术开发能力| 2.具备角色，人员，权限类系统的设计整体设计及应用能力| 3.拥有Vuejs相关的技术要点及配套的插件，解决方案深度使用能力
主讲解决方案
1. 基于element-ui和vue2进行大型中台项目开发解决方案2. 基于axios封装请求工具模块解决方案| 3. 基于token的前端登录解决方案| 4. vuex分模块持久化解决方案| 5. RBAC大型中台项目权限控制解决方案| 6. excel批量导入导出解决方案| 7. 上传组件封装解决方案| 8. 多语言动态主题解决方案| 9. 树形结构处理解决方案
主讲知识点
vue-element-admin（请求模块化，请求工具拦截，scss 样式，布局组件） | Vuex 持久化（state，mutations，actions，getters 和 modules） | Vue CLI 配置(webpack) | 反向代理 | ElementUI 表单校验（async-validator） | vue-router 导航守卫 | token 认证 | token 失效控制 | 角色管理业务 | RBAC 权限 | Vuex + 路由 + RBAC | 动态路由 | 角色权限 | 混入 mixns | 工作日历 | Echarts 雷达图 | 全屏（screenfull） | tabs 页多页签组件 | vue-i18n 国际化方案 | history 路由模式的应用 | 树形菜单 |element 列表的数据过滤 | 导入导出 Excel | Excel 复杂型表头 | PDF 打印（vue-print-nb）| el-upload 上传第三方云服务器 | 打包性能分析 | CDN 加速的实践应用 | 组件封装 | 业务组件封装
项目四、优医问诊项目（优医问诊）
Vue3+TS 优医问诊H5项目，对标【某香医生】、【某东健康】、【某里健康】等在线医疗项目，本项目涵盖了在线问诊的主流业务，致力于交付完整的在线问诊业务解决方案，让学员成为具备在线问诊业务能力的前端开发工程师。
优医问诊
学习目标
1. 掌握使用Vue3 + TypeScript 开发大型前端项目开发能力| 2. 掌握使用Vant组件库开发移动端项目能力| 3. 掌握 Pinia 状态管理工具实现项目状态管理| 4. 掌握 第三方登录和第三方支付 业务解决能力| 5. 掌握 快速问诊 等在线问诊主流业务开发能力
主讲解决方案
1.基于vue3.0+typescript中大型项目开发解决方案| 2.基于vant组件库快速构建H5界面解决方案| 3.基于vue-router的前端路由解决方案| 4.基于vite构建vue3.0项目解决方案| 5.基于pinia的状态管理解决方案| 6.基于pinia-plugin-persistedstate状态持久化解决方案| 7.基于@vuecore/use的组合API工具库解决方案| 8.基于id-validator的身份证信息校验解决方案| 9.基于postcss-px-to-viewport移动端适配解决方案| 10. 基于vite-plugin-svg-icons的svg图标组件解决方案| 11. 基于tailwindcss的原子化类名现代解决方案| 12. 基于http://socket.io的即时通讯问诊室解决方案| 13. 基于eruda 的移动端调试解决方案| 14. 第三方登录解决方案| 15. 第三方支付解决方案
主讲知识点
vue3.0框架| TypeScript使用 | vite前端构建工具｜create-vue项目脚手架｜vue-router路由｜pinia状态管理｜pinia-plugin-persistedstate状态持久化｜sass预处理器｜ vite-plugin-svg-icons图标组件插件｜tailwindcss现代CSS框架｜@vueuse/core组合API工具库｜dayjs日期处理｜vant组件库 | postcss-px-to-viewport移动端适配 | id-validator校验身份证 | http://socket.io即时通讯 | eruda真机调试 | 第三方登录 | 第三方支付 | vant组件二次封装 | 通用组件封装 | reqeust工具函数 | 组件按需引入 | steup语法糖 | pnpm包管理 | 第三方库类型扩展 | 自定义composable | css变量
项目五、小程序
学习目标
能够独立开发原生小程序，能够使用uni-app开发小程序，提高就业能力，是就业的加分项
主讲内容
1. 原生小程序 了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
账号申请 | 开发工具 | 工程目录 | 项目配置 | 屏幕适配 | 资源托管 | 字体图标 | 数据绑定 | 事件处理 | 生命周期 | 场景值 | 模块化 | 网络请求 | 路由 | WXS | 模板 | 组件 | UI 框架 | 表单 | Promise
2. uni-app理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
脚手架 | 项目配置 | 单文件组件 | 生命周期 | 条件编译 | 计算属性 | 跨平台支持 | less | sass | 组件通信
3. 电商项目 基于真实需求综合运用小程序开发的相关知识，突出小程序 API 的真实应用场景，强化和巩固小程序开发的相关知识，提升综合解决问题的能力。
客户消息 | 微信支付 | 微信地址 | 小程序转发 | 区域滚动 | 上拉加载 | 下拉刷新 | 数据缓存 | 用户信息 | 自定义组件 | 微信登录 | 意见反馈 | 上线发布
项目六、小兔鲜电商小程序项目
Vue3.0小兔鲜儿电商是对标网易严选的综合品类的网上商城项目，本项目涵盖了电商的主流业务，致力于交付完整的电商业务解决方案，让学员成为具备电商业务能力的前端开发工程师。
小兔鲜
学习目标
1.能够开发跨平台的小程序| 2.能够独立开发小程序项目| 3.掌握微信登录的实现方式| 4.掌握微信支付的实现方式
主讲解决方案
1.小程序跨平台开发解决方案| 2.小程序微信登录实现方案| 3.小程序微信支付实现方案| 4.下拉刷新/上拉加载交互实现方案| 5.数据缓存实现方案
主讲知识点
1.uni-app跨平台开发框架| 2.组件封装及通信| 3.微信支付/登录| 4.pinia 状态管理| 5.基于vue3+ts技术实践方案| 6.小程序云开发| 7.vant组件库
六、简历&面试指导
这里就不多说了，是什么写什么就好。
开发经验精通 HTML、CSS、JS 基础，熟悉 H5、CSS3 新属性，熟悉 ES6 新特性熟悉响应式，flex 等页面布局方式，熟练使用 less、sass熟练运用 Vue、React 前端开发框架，了解 ReactNative 的基本实现原理熟悉组件间的通信和数据的管理 , 熟练 Redux/Vuex 使用熟悉常见 UI 框架如：Bootstrap、Element-UI、Vant、Ant-design 等熟悉 Webpack 等构建工具熟悉微信小程序开发流程熟练使用 Git 等项目管理工具了解 NodeJS，了解 Express 框架开发
项目经历（这里可以参考写）
项目一：优联校园后台管理系统
项目描述：优联校园是一款大学生校园生活服务软件，为在校大学生提供社团活动，二手交易，学生兼职，学生租房，驾校报名、微商城等服务，项目技术栈：React + React-router + Axios + Ant-design + React-redux
责任描述：1. 负责应用管理模块，包括社团管理、二手交易、学生兼职、学生租房等界面，使用 Antd 中 Button , Form , Modal ,Table 等组件来展示页面2. 使用 React-router 来配置路由，实现组件间页面的跳转3. 使用 Axios 来请求数据并渲染页面4. 根据需求文档完成业务逻辑5. 抽离公共组件并封装到项目组件库中
自我介绍
多人说不要写自我评价。觉得这个版块非常没有用。我认为恰恰相反，千篇一律的自我评价，什么认真啊踏实啊确实让人反感。
详细简历介绍可以看这篇回答：面试前端工程师简历应该怎么写才容易通过？
七、写在最后
7.1、自学能力
自学能力，是主观因素中一个非常重要的能力。
因为编程领域中的技术大多是不断在更新的，这个过程中是不会有人专门带你去学习的。那要如何快速并深入地掌握一门技术呢？就是自学。但如果你自学能力很弱，要怎么办呢？几个小建议送给你~拒绝拖延症不要今日复明日，如果你决定做，那么就要立刻做。一旦开始，你就成功了一半。学会专注模式有的小盆友即使想学习，但却无法坚持太长时间，就会精力发散。这时候你要学会沉浸自己，练习每天拿出2-3个小时学习，这个时间段不要去触碰手机、pad或者是其他你感兴趣的东西，慢慢将注意力放在学习内容上。即使开始很难受，但是慢慢养成习惯之后就好了。注重学习方法学习不是一味地照搬照抄、死记硬背，是将别人的输出内化为自己的东西。比如，老师讲的A知识点，你需要将它分解，并吸收掉，即使脱离老师的指示，你也能用自己的话说清楚A知识点是什么东西。当然，如果你还能举一反三，那就更好了。学会复习根据艾宾浩斯记忆与遗忘曲线表明，遗忘是有规律的，先快后慢。
遗忘从学习开始时就发生了，并且速度较快，然后遗忘速度下降，到达一定程度后，就不会再遗忘了。所以及时复习是防止遗忘或者减缓遗忘的有效办法。
7.2、自律和毅力
引用一句名言“要学好编程，兴趣和毅力必须要有一样”，毅力其实在某种程度上比兴趣更加重要。兴趣能带你入门，但持之以恒的毅力才能让你在长途跋涉的工作过程中坚持下来，才能让你在一次次的失败中快速崛起。
编程其实挺枯燥的，坐在电脑前，一天可能要不止8个小时。对编程感兴趣的人自然是乐在其中，那么其他人呢，靠的是什么？是自律和毅力。
你不能只看到技术大牛在解决问题时的轻松潇洒、深不可测，而是要知道他们背后花了多少时间，下了多少苦功。
跟你说个真人真事吧（老师的亲身经历），就是我的好朋友，小K。
我们是在大学一次兼职中认识的，他是哲学系，我是计算机系。得知我的专业是编程，他十分感兴趣，详细了解后他也开始了学习编程之路。由于他是文科，逻辑思维不强。于是他平时手里经常拿着一个本，想到什么记什么，看到什么、听到什么就写什么。等晚上他就把这些与知识无关的东西去梳理，目的不是要总结出什么来，而是为了复述、总结这一天都做了什么。久而久之他的思维顺畅了很多。他英语很好，但是没什么编程基础，所以初期学习很费力。于是他每天都用思维导图去整理老师上课的内容形成笔记，每日一篇，从来不落，以至于后来大家在考试之前都朝他要笔记，以作复习使用。他是个电脑小白开始的时候只会用个QQ，创建个文档。什么DOS界面，盘符，包括文件后缀都不懂，打字也很费劲，但是他每天都坚持照着老师的代码敲，反复的敲，直到他可以独立打出演示代码为止。最后，他很愿意和我们沟通，有疑问就提出，并且自己会看一些编程基础的书，去网上搜索一些练习题去做。
就这样，日复一日，一年后，他学成了。如今已经毕业多年，他依旧不忘学习和进步，现在某条，年薪60万。
你以为他本身就是聪明，所以学的很轻松？不是的。
上面我说的这几条，他每天都会花费大概4-6个小时的时间。此外，他还要上他本专业的课，去完成本专业老师给他的任务。也许就是在我们刷剧，玩游戏的时候他在学习；我们侃大山，逛街看电影的时候，他也在学习。
这就是一个人的自律和毅力，当然，他现在的成就也是匹配得起他的付出的。
整理不易呀，眼睛都留眼泪了。亲爱的小伙伴儿们，如果觉得资源对你有用，点个赞 +收个藏，给我者一个鼓励吧。也方便你下次能够快速查找。
