每一个初阶前端开发，在进阶的道路上，都会遇到这些困扰

天天忙需求，薪资不见涨，加班还越来越多？你的路走窄了！

技术更迭

市场发展推动前端技术频繁迭代
如何延长自身技能保鲜期？

经验匮乏

没有大牛指导，缺乏大型项目开
发经验，如何验证个人价值？

岗位内卷

前端需求不断扩张，新人、新技术
迭出，如何提升自身竞争力？

工作内容单一

重复性工作太多，接触不到更精深
的技术，如何提高自身水平？

如何冲破瓶颈，系统塑造岗位能力，迈上更高的台阶？

综合百位行业大咖能力模型，带你系统构建【全端+全栈+全流程】高阶岗位能力

前沿技术 + 实战经验 + 高维视野 + 技能落地 = “进阶通行证 ”

对标前端行业成熟解决方
案，针对前端未来可能的
变化而准备

培养全局思维，将业务与
技术高度结合，统筹梳理
项目全生命周期流程

行业大咖带队做项目，落
地实现方案 / 沟通协调 /
项目管理 / 工程提效

“全端+全栈+全流程”开发
指导，主流技术高效综合
应用，快速提升岗位能力

通过一整套主流企业级解决方案，帮你实现能力的整体进阶

全端+全栈+全流程

一套业务场景打通PC、管理后台、
WebApp、uni-app小程序、移动
App、跨端桌面应用和服务端接口

一套企业级项目贯穿6大场景

从0~1大牛指导企业级落地项目，掌
握具体方案，提升项目开发实战能力

多重学习保障

录播+直播+社群+问答+课程专属电
子书；习题+作业+课程资源+面试指
点，真正学有所成

完善的知识体系+前沿技术

主流、前沿的知识和技能内容，核心
技术全新版本，体系化提升技术实力

思维与技术深度并重

全局思维贯穿始终，技术原理深度理
解，拥有更强的解决问题能力，从容
应对开发难题

团队管理提效

20 + 种效率工具应用&平台自建，
云平台+自有平台，掌握企业级可落
地的团队协同方案

2022 全新升级，技术全面革新，助你实现越级进阶！

紧跟技术发展，迭代课程内容，大前端2022，带你走在前端技术“前沿”

对标一线大厂开发标准，一套业务打通全端全栈应用场景

符合规范化+模块化+组件化+自动化的全端项目，覆盖需求-设计-开发-测试-维护的全流程

社区PC前端项目—全流程Vue.js高级进阶全栈项目

项目简介

完整的通用社区业务闭环，实践企业级开发流程(需求-设计-开发-部署-自
动化)，渐进式学习前端Vue高级知识全栈开发。

项目亮点

前端工程化落地实践

容器化、组件化、自动化全能进阶

前端必备效率工具链&环境使用

鉴权设计与权限管理解决方案

项目核心功能模块

登录机制设计/JWT鉴权/HTTPS
VeeValidate&Vuelidate数据验证
密码安全/bcrypt加密解密
图片验证码及Redis缓存
接口设计/Mock流程/接口开发
效率开发环境/Prettier/ESLint

多屏响应式布局
全流程从需求、接口到开发
缺陷控制和版本管理
长列表筛选/排序/异步加载
Vue进阶自定义filter/directives
Axios封装/拦截器

前端依赖升级方案
积分/签到系统设计
多级路由/路由监听/路由守卫
头像图片上传/静态资源
邮件功能node-mailer集成
栅格系统/Sass预编译进阶

自定义IconFont图标库
组件化进阶富文本编辑器
动态路由/路由权限控制
文章管理/预览功能
评论/收藏/点赞功能
Websocket实时&历史消息
Nuxt.js服务端渲染

点击链接预览PC项目

http://front.dev.toimc.com:22500/

内容管理后台—多端统一的角色权限&内容管理平台

项目简介

使用流行iView UI框架，进行通用中后台界面设计。开发统一的CMS管理
后台，管理小程序、PC端、WebApp多端内容数据，抽离统计数据通过
Echarts进行首页数据可视化，开发多角色/多级菜单的管理系统。

项目亮点

基于多角色的前端权限方案

首页数据可视化实践

复杂CMS系统数据库设计

跨组件多级联动交互

项目核心功能模块

表单数据校验
缓存&存储方案js-cookie
用户管理/权限分配功能
通用业务组件封装方案
多级内容分类CMS系统设计

角色管理/接口管理/菜单管理
内容管理/评论管理/标签管理
访问日志功能
多模块状态管理
首页可视化统计功能

菜单权限/角色权限/接口权限
自定义多级菜单树型控件
嵌套数据/递归查询
Vue动态菜单方案
iView-admin路由权限

多种错误日志收集方案
错误日志管理多重异步筛选
koa中间件统一报错处理
Log4j/koa-logger文件日志方案
多语言l18n

点击链接预览

http://admin.dev.toimc.com:22501/

接口数据后端—告别Node.js“玩具”时代，多端统一API接口框架

项目简介

Nodejs通用应用级API开发，采用前后端分离的开发模式，多级菜单权限、
基于角色的权限设计（RABC），深入学习ES6高级语法，基于webpack多
开发环境的接口数据后台。

项目亮点

多端通用高性能Nodejs接口框架

分级日志收集，系统接口监控

NoSQL 数据库进阶

全方位（数据+接口）权限解决方案

项目核心功能模块

Webpack多环境打包/开发配置
Babel配置详解/ES6开发环境
ESLint自动修复/代码格式化
多级容器化构建打包及部署
IDE开发常用插件

CORS跨域访问控制
接口安全helmet集成
koa-static静态资源访问
统一日志收集&监控
接口访问管理

Redis与图片验证码
JWT签名、Token校验机制
Nodemailer邮件功能集成
WebSocket服务端
WebSocket鉴权设计
配置信息加密方案&dotEnv

NoSQL数据库设计
复杂的搜索逻辑处理
常见CURD操作
填充Populate和聚合Aggregate
联动搜索条件

点击链接预览

https://jenkins.toimc.com/
https://git.toimc.com

社区移动端WebApp—采用组件化结构+多端适配方案

项目简介

无缝对接社区管理后台API，学习移动端布局、适配、性能优化等，进阶移动
端调试技巧，开发移动端WebApp。

项目亮点

多端适配解决方案

企业移动端开发规范

主流UI框架集成

从0到1丰富的自定义组件

项目核心功能模块

MintUI介绍及模块化方案
移动框Flex布局及栅栏设计
常见移动端交互设计
Vue路由切换过渡动画设计
多端数据展示与设计要点
容器化/自动化构建

移动端底部适配
HTML移动端Meta解析
postcss移动端适配方案
Sass进阶Mixin适配方案
封装上下拉LoadMore基础组件
添加表情滚动动画

首页多分类筛选
评论回复功能开发
自定义表情组件
登录/签到/个人中心
热门统计功能开发
对接CMS前后端联调

组件状态分层&动态Modules加载
自定义SVG图标组件
Normalize和Reset
全局样式方案Sass-loader
transition过渡动效进阶

扫码体验WebApp

社区小程序—快应用框架MVVM架构开发社区小程序

项目简介

一套完整的社区业务的多端体现，涵盖小程序开发使用场景，打通大型项
目的设计与多端思考能力，从开发到发布全流程GET。

项目亮点

前端MVVM架构

极致交互设计与性能优化

支付专题

UI组件库uni-ui&uView

主流开发模式全流程实战

项目核心功能模块

mpvue/Wepy/taro/uniapp对比
自定义组件进阶
微信小程序开放接口
小程序扩展能力&云开发介绍
原生能力与组件化开发
开发/部署/上线技巧

微信登录功能
小程序适配方案px2rpx
第三方npm库集成
图片上传/预览组件
分类数据筛选
UGC内容安全

文章列表/详情/长列表加载
评论点赞/回复
小程序内容安全
签到功能
多周期统计/聚合查询进阶

多组件状态管理
签到功能/积分模块设计
自定义小程序基础组件
微信用户基础信息对接
小程序订阅消息&主动推送

扫码体验WebApp

社区桌面端应用项目—Electron结合React/Vue快速构建桌面应用

项目简介

基于Electron开发的桌面端应用，包括与常见的前端框架Vue/React集成，
使用Vite构建打包，复用前端接口快速开发桌面应用。

项目亮点

Vue/React+Vite集成

App上架全流程

扫码登录

CI/CD跨平台打包

项目核心功能模块

代码提示github copilot
Electron核心概念
Electron调试技巧
窗口消息通信方案
窗口生命周期方法

Electron安全16原则
扫码登录原理
微信扫码登录
Proxy拦截代理调试
Electron持久化两种方案
系统桌面通知

Prettier&ESLint集成
React/Vue集成方案
Vite打包Electron
功能菜单+右键菜单
快捷键与全快捷键
国际化

Electron-Builder与Packager
Windows&MacOS软件公证
MacOS应用公证
MacOS证书配置
启动图&启动图标
应用上加AppStore

下载平台体验：

https://github.com/toimc/electron-vite-demo-lesson/
releases/tag/v21.11.22-501

移动跨平台App—Flutter2.0框架+Dart语言开发社区App

项目简介

Flutter2.0针对Web、移动端和桌面端构建的下一代开发框架，大厂移动端
App必选技术栈，学习Flutter中常见的技术方案，开发社区业务场景的移动
App。

项目亮点

Flutter 2.0新版本

三种状态管理方案

打包上线全流程

自动化跨平台打包

错误日志收集

项目核心功能模块

跨平台环境搭建
Dart DevTools开发工具
VSCode Dart开发插件
组件化开发思想
前端上手Dart技巧

全屏适配screen_utils
自定义图标+SVG组件
自定义验证码组件
封装请求工具类
自定义Toast组件

三种状态管理方案(Bloc重点)
数据持久化（sqflite）
序列化json_serializable
第三方路由Fluro&Auto_Route
Navigator2.0及原理
导航守卫设计

常用第三方包
IOS证书配置
日志收集方案Bugly&Sentry
应用图标与启动画
打包IOS&Android应用

8大阶段还原大厂落地解决方案，70000+ 行代码完成思维训练与实战开发

整合前沿技术框架，深度构建大前端知识图谱，累积项目经验

紧跟前沿技术栈，160+必备知识点，20种效率工具一次掌握

市面少有的系统化课程，32周全面升级职场竞争力

PC管理后台
微信小程序
WebApp开发
Flutter移动端
Electron桌面端
React源码

角色权限思想
uniapp应用
通用组件设计
Dart进阶
Vue&React集成
（ Vite打包构建）
React设计思想
动态菜单&菜单权限
微信支付
移动端适配
组件化思想
扫码登录
（微信扫码登录方案）
React Hooks原理
接口访问控制
小程序UI库uView
响应式布局
第三方组件库
窗口通信方案
(ipc通信与Electron安全)
状态管理Redux
iView-admin集成
小程序打包与上线
自定义图标
iOS/Android开发
软件公证与打包
（启动图标与启动图片）
React Router源码解析
CMS内容管理
内容安全
Transition页面过渡
错误日志收集bugly
桌面通知&消息
React工程化&性能优化
接口安全
HTTPS
订阅消息
横竖屏CSS兼容方案
打包&上架
跨平台打包与热更新
(CI/CD自动打包与发布)
封装组件库

Vue进阶
Node.js
数据库
Mock数据&测试
前端UI框架
开发环境

Vue3新特性
(Teleport/Suspense/Proxy)
Koa web框架
(koa路由/静态资源/ES6开发)
NoSQL数据库设计
接口Mock数据
Mockjs
JS/UI框架选型
虚拟机(Hypver-V)
Composition API
(生命周期/setup函数）
Node.js包管理工具
Redis缓存
测试+Mock平台
DOClever
PC端LayUI
Linux常见命令
Vite开发工具
日志服务
log4j
MongoDB
（备份、恢复、Robo3T）
Mock数据CLI工具
json-server
移动端
Mint UI/Vant UI
Docker环境配置
Vue全家桶
（Vue3/Router/Pinia）
邮件服务
nodeMailer
Mongoose
通用接口测试软件
POSTMAN
iView + iView-admin
IDE进阶配置及调试
TypeScript集成
即时消息
websocket/socket.io
SQL进阶
(联合查询 /统计/查询优化)
PC端测试平台
Yapi
小程序UI
uView & uni-ui
真机调试技巧
调试技巧
云服务
(对象云存储/短信)
接口Proxy测试工具
Charles/Fiddler
React Ant Design
小程序HBuilderX

SSR服务端渲染
Nuxt.js框架
Nginx+HTTPS
前端项目管理工具
Docker容器化
Linux运维技巧

SSR工作原理
工程目录
acme.sh申请SSL证书
pm2管理命令
Docker安装
sshd配置
SSR打包配置
自动生成路由
HTTPS原理
node.js服务器应用
docker-compsoe
集成命令
添加swap
Vite SSR打包
Universal Mode
Caddy快速添加
HTTPS服务
serverless云应用
腾讯云
Docker常见命令
firewalld防火墙
Webpack热重载
登录鉴权模块
(Nuxtjs Auth模块)
nginx配置
(vhost、GZip)
前端微服务
概念+技术原理
镜像化前后端项目
安全更新
路由与代码分割
服务端渲染性能
CloudFlare
CLI命令
常见的开发测试环境
(MySQL、MongoDB、Redis)
各大发行版本区别
数据预取的状态
nuxt中使用
composition API
阿里云、DNSPod
定时任务
Docker管理与集群知识
定时服务

需求分析
前端工程化
缺陷控制
版本管理
文档管理

原型设计
(Axure/墨刀)
Webpack核心配置
ESLint
Git高频命令
Git写博客
Github Pages
流程图设计
(ProcessON)
CI/CD云平台
(Travis CI/ GIthub
Actions/ Circle CI)
代码风格
搭建Git平台
(Gitlab/Gitee)
接口文档工具
showDoc
详细需求分析
CLI脚手架
任务管理
（Jira/禅道/TeamBition）
分支策略
MarkDown常见用法
通用框架
镜像管理
代码格式化
冲突处理
云笔记
技术栈选型
Node.js项目容器化
（Dockerfile）
任务管理
可视化Git工具
文档格式
自建持续集成平台
Jenkins+Docker
Git Flow
模块文档

12 项岗位能力全面拔高，离独挡一面的技术专家更近一步

硬实力源于实战，每一次提升都将成为你履历上的亮点

全局思维能力

· 项目需求分析
· 项目质量管理
· 项目进度管理
· 运维与扩展

全端开发能力

· PC前端/管理后台
· 小程序/WebApp
· Electron桌面端
· Flutter移动端跨平台

全栈能力

· 原型设计
· 数据库接口设计
· 技术栈选型
· 前后端开发

团队协同能力

· 版本管理
· 缺陷控制（ESLint、禅道）
· Git Flow
· 文档管理（接口、需求）

项目统筹能力

· 业务拆解
· 核心技术应用
· 项目可持续发展
· 团队协调

工程化能力

· Webpack/Gulp
· 脚手架工具应用
· 自动化部署（CI/CD）
· Docker容器化技术

测试能力

· 接口测试
· 业务功能测试
· 错误统一处理
· 单元测试

重构能力

· 新旧过渡分析
· 新技术如何取舍
· 旧平台升级
· 新技术落地应用

性能优化能力

· Chrome DevTools
· 打包优化(构建优化)/打包缓存
· SSR服务端渲染/Nuxt.js/Vite2.0
· Gzip压缩传输
· 性能优化指标/测评网站

React源码解读能力

· React设计思想
· Router源码解析
· Hooks原理 + 源码解析
· React全家桶(路由、状态管理)
· Ant Design UI组件库

监控运维能力

· 数据可视化
· 项目Linux部署
· 运行日志及监控
· pm2--node.js服务管理
· Firewall防火墙策略

第三方集成能力

· 友盟/Bugly
· 支付宝/微信开放平台
· 腾讯云短信服务
· 阿里云内容安全
· Apple开发者/安卓开发者

课程额外专属福利，为你的学习和就业保驾护航！

课程电子书

丰富的专属课程资料实时更新

兴趣小组

优秀学员有机会进组通过实战提升能力

面试指导

优秀学员更有机会获得内推服务

以周为单位，高段位大前端系统养成

理论+实践，技术难点逐一击破

阶段一：解锁“大前端思维”

第1周
第2周
第3周
第4周

认识大前端，全栈开发初体验

是否还在为选择使用什么框架而苦恼？是否还在为学习哪个前端框架而纠结？本周将给您满意的答案，有UI和JS框架对比与选型，有Node.js进阶使用、Web框架如何开发RESTful接口等。

课程安排：

企业标准的开发环境搭建

工欲善其事，必先利其器。学习最火的Docker容器技术，快速搭建测试环境。深入讲解前端必会的Mock接口与工具，并专门设计了调试技巧&真机调试讲解，与实际工作开发完美契合。

课程安排：

NoSQL数据库的设计与集成

本周带您解开数据之谜，学习NoSQL数据库与数据库设计原则，让您带着设计思维去设计项目数据库。掌握Redis安装、常用CLI命令，搞定Redis服务搭建与Nodejs集成

课程安排：

JWT登录鉴权—通用登录模块后端开发

本周解读鉴权、加密/算法、HTTPS等核心概念，实践JWT方式进行登录鉴权接口设计。从前到后，涵盖输入校验、Axios请求封装、统一错误处理、jwt功能集成及数据安全性策略的分析等知识。

课程安排：

阶段二：项目全流程DevOps

第5周
第6周
第7周

团队协作-文档管理与缺陷控制

项目开发过程中，少不了团队协作，哪些可以提升效率？文档管理：介绍工作中必知必会的（项目+需求+接口）文档的管理办法，搭建团队的文档管理工具；介绍缺陷控制流程与工具的应用，ESLint配置深入讲解。

课程安排：

团队协作-版本管理

本周介绍版本控制工具，比较SVN与git的优缺点，深入Git的应用场景，结合场景学习Git命令，同时了解Git flow和devOps流程，协助同学们在自己的团队中部署Git平台，提升工作效率。

课程安排：

团队协作-自动化流程

本周学习团队协作最重要的部分：前端自动化流程，使用容器技术配置自动化/持续集成环境，部署Jenkins平台，结合gitlab完成完整的CI/CD落地实践，让开发者能更专注于业务，进一步提升团队效率。

课程安排：

1、常见CI/CD平台CircleCI、TravisCI、Github Actions和Jenkins
2、理解自动化/持续集成流程，升华DevOps理解
3、快速搭建、配置Jenkins服务
4、掌握Jenkins中的权限控制，并与gitlab进行集成
5、学习Jenkins的权限控制与插件管理系统
6、配合Jenkins效率构建，完成发布、构建等工作
7、实战前端项目自动化部署
8、了解Linux运维相关的命令与知识
9、了解私有化容器平台搭建及使用
10、常见的5大Github Actions应用场景（自动部署、issues管理、发布Release与矩阵OS构建）

阶段三： PC端进阶前后端开发

第8周
第9周
第10周
第11周

全栈开发—首页模块

从数据库、接口设计到组件拆分，再到首页核心功能实现，提高对前置流程理解与工具使用的熟练度。本周通过原型图到实现首页交互（复杂筛选）及接口，综合运用前置知识，学习项目开发的实战内容。

课程安排：

1、Npm依赖升级方案，@vue/cli升级V4版本
2、PC端项目全局需求分析、原型设计、项目重难点介绍
3、掌握首页、发帖、用户中心数据库设计、接口设计、文档更新
4、首页多级列表、筛选、排序功能开发
5、路由监听/路由守卫/子路由ActiveClass灵活应用开发交互效果
6、Axios请求封装/拦截器/取消用户重复请求
7、侧栏：统计、签到、周热议功能开发
8、首页Mock数据调试长列表加载、接口开发、前后端接口联调
9、版本控制建立Git仓库，熟悉Git相关操作
10、缺陷控制实战：代码Prettier格式化、ESLint自动修复实践、配置Standart规则

全栈开发—用户中心

开发个人中心核心业务，丰富的Vue-router、Vuex进阶应用和自定义组件，完成周榜、签到榜、热评榜的功能，实现签到积分系统，完善个人中心设置。

课程安排：

1、登录安全机制设计
2、优化登录路由，动态加载多文件路由
3、进阶 webpack 配置，学习 require.context 用法
4、本地缓存登录状态（介绍localStorage&SessionStorage区别）
5、自制 Iconfont 图标库
6、实战核心依赖升级，升级 LayUI 基础库版本
7、Sass 进阶学习@for/@Mixin/@Map 的用法
8、帖子详情、采纳、点赞功能开发
9、个人中心收藏列表、发贴列表功能开发
10、签到系统，积分体系的设计
11、上传图片前 + 后功能开发

全栈开发—发贴/回帖模块

继续开发发帖/回帖核心业务之后，形成PC端社区业务闭环，配置自动化流程，完成PC端项目自动化部署。进一步巩固前置技能，综合应用效率平台与工具，完成开发与测试，培养技术栈综合应用能力。

课程安排：

消息中间件开发（WebSocket通信）

websocket是长连接的最优解决方案，升级全解析：ws分组消息、断线重连、心跳检测、离线消息缓存、历史消息，开发通用消息中间件。

课程安排：

阶段四： CMS后台管理系统开发

第12周
第13周
第14周
第15周

组件化思想进阶：iview上手文章管理

本周进入到后台管理系统开发，从项目整体架构去考虑中后台应用的开发路径。学习iview-admin 框架工作原理，自定义表格组件，完成文章管理开发。

课程安排：

中后台权限系统：前端权限设计方案

进入中后台系统开发中最重要环节：权限系统。介绍前端中（组件级、按钮级、路由级）三种权限控制解决方案，开发用户管理页面，定制动态搜索组件，深入学习iview基础组件：Table、Form、Modal等。

课程安排：

中后台权限系统：基于角色&菜单权限设计

本周将继续深入权限系统，开发包括菜单管理、角色管理以及后台权限管理API，开发nodejs中间件，实现基于角色的接口资源访问控制系统。加深前置知识的综合应用，从前到后，打通权限设计的全方位思维。

课程安排：

首页可视化图表与日志服务

本周将完成后端管理平台的首页管理，对首页统计功能进行定制开发，并增加日志服务，对后台接口的调用增加日志管理，系统功能完善与监管。以及前后端联调及细节优化，定制Jenkins任务及配置前后端自动化任务。

课程安排：

阶段五： WebApp开发与Vue3项目重构

第16周
第17周
第18周
第19周

WebApp页面设计与开发

WebApp本质是移动Web，在移动端适配、长列表性能、页面交互设计等核心问题如何解决？本周将讲解行业内的通用解决方案，通过首页、登录注册、详情、发贴、搜索和个人中心模块（排除消息模块）实战。

课程安排：

1、WebApp原型设计及工具使用、WebApp开发的常见问题
2、移动端框架概览及Mint-UI介绍 & 自定义主题
3、自定义SVG图标组件（巧用svg-sprite-loader）
4、Vuex状态管理state分层及Modules进阶应用
5、全局样式方案Normalize与Reset
6、开发登录、注册、密码找回页面
7、首页列表及筛选、个人中心开发
8、评论列表无限加载模块
9、上拉加载、下拉刷新的开发技巧
10、自定义Header组件
11、详情页面交互设计（transition动画进阶）
12、滚动穿透解决方案（iscroll & better-scroll介绍）
13、移动端适配解决方案（px-to-viewport & px-to-rem）
14、WebApp项目容器化实战，配置Dockerfile及打包镜像
15、Jenkins多节点配置及管理
16、个人中心、热门功能开发
17、热门功能开发：多条件统计列表开发
18、移动端接口对接，定制热门统计相关接口
19、MongDB聚合查询与Populate查询

Vue3全家桶+Vite开发工具

本周介绍Vue3及生态的变化，深入Compiler的原理，结合ToDoList实战，领会Vue3.0的新特性和强大。以及给Vue项目开发带来质的飞跃的开发工具--Vite。

课程安排：

前后端项目Vue3重构

项目重构是工作中必不可少的环节和能力，通过重构原PC端项目首页内容，和基于iview-admin开发的管理后台项目，掌握不同项目如何与Vue3进行集成，进阶Composition API的深度应用。

课程安排：

性能优化（服务端渲染）

页面性能优化是前端工程师重要核心能力。本周将学习配置服务器端渲染思想，以及学习服务端渲染的Vue解决方案Nuxt.js使用，并对前置项目首页进行改造。

课程安排：

1、了解SEO优化方法
2、前端性能优化思想
3、前端性能优化之服务端渲染（SSR）
4、SSR基础及工作原理
5、配置SSR及Webpack进阶：服务端渲染开发热重载
6、SSR中的路由与代码分割方案
7、Nuxt.js框架介绍（工程目录、Universal Mode、自动生成路由）
8、Nuxt.js Auth登录鉴权模块介绍与对接
9、Nuxt.js集成：改造前端项目首页功能模块

阶段六：小程序开发与支付专题

第20周
第21周
第22周
第23周

uniapp开发(首页/菜单定制/搜索)

便捷的快应用时代已到，本周介绍小程序的开发适用场景、常见的快应用开发框架。实操小程序的注册流程，以及基于uniapp项目开发技巧与实战。

课程安排：

uniapp开发(登录、详情、个人中心)

通过登录、详情、个人中心、热门模块开发，了解小程序授权机制，获取用户信息和解密。学习复杂的页面交互逻辑设计、与后台接口进行对接、统一鉴权处理页面跳转逻辑。后台对接小程序服务端接口，解密加密过后的数据。

课程安排：

uniapp内容安全、订阅消息

本周接入小程序订阅消息的功能，发送登录、评论、系统等类型的消息给用户，深入发贴&消息模块，完成社区业务闭环。小程序的打包优化（资源优化、分包优化、预加载），打包与发布，上线准备与注意事项。

课程安排：

小程序支付专题

分三大块介绍：注册企业&税务相关知识、支付功能前置条件、开发小程序支付对接APIv3接口。分析支付功能常见业务场景、开发坑点&难点。实操frp内网穿透本地调试HTTPS，小程序订单通知两种调试技巧。

课程安排：

阶段七：跨端开发（移动端跨平台&桌面端）

第24周
第25周
第26周
第27周
第28周

跨平台框架Flutter2与状态管理方案

快速带你掌握移动端跨端App框架，对于前端同学如何上手移动端跨端的开发？Flutter作为如今优秀的跨端解决方案，Dart语言学习坡度适中，组件化的思想、状态管理、数据持久化这些概念都与前端非常贴合。

课程安排：

1、Flutter2.0 vs Flutter 1.0
2、如何快速上手Dart语言
3、Flutter开发环境准备
4、配置Flutter官方加速源
5、Flutter中如何第三方组件
6、Flutter全屏适配方案ScreenUtil
7、Flutter状态管理方案对比(Redux、ScopedModel、bloc&flutter_bloc)
8、状态管理方案的应用场景
9、实战三种状态方案完成待办清单TodoList功能
10、封装公共的ScopedModel工具类
11、自定义svg图标库

封装请求&数据持久化方案&路由

深入Flutter通用业务模块的开发，介绍学习套路，类比前端中的学习策略，从页面到请求，从状态共享到数据持久化，结合路由完成丰富的页面逻辑。掌握核心的Flutter技能点，方便后续功能迭代与业务应用。

课程安排：

1、Flutter中的请求库Dio（Flutter单例factory、get_it）
2、请求库封装（RESTful常见请求、拦截器配置、统一错误处理等）
3、请求日志与环境变量的配置方案
4、封装常见的业务库（验证码、轻提示）
5、Flutter中的数据持久化方案（sqflite、shared_preferences）
6、封装数据库sqflite的公共类
7、学习业务数据库CURD(增删改查)操作
8、序列化与反序列化json_annotation、json_serializable
9、Flutter中的路由方案（fluro、flutter_modular、auto_route）
10、Flutter路由核心知识（命名路由、路由传参、路由守卫）

Flutter 后台消息&打包上线

介绍两种消息推送的场景（本地消息、后台消息)，结合WebSocket实现Flutter侧的消息通用工具类；以及跨端移动App（Android、iOS)，如何进行测试、打包与上线、错误日志收集。

课程安排：

1、Flutter集成WebSocket实现消息的实时通信
2、Flutter中常见的WebSocket第三方包（web_socket_channel、socket_io_client）
3、Flutter中消息分类（本地消息flutter_local_notifications、后台消息）
4、苹果开发者介绍
5、配置极光后台消息推送：iOS消息推送 + Android消息推送
6、AppStore上架规则与iOS移动端跨端测试方案TestFlight
7、Flutter全屏适配方案ScreenUtil
8、移动端第三方日志收集平台：蒲公英、友盟、bugly
9、Flutter启动图、应用图标配置方案
10、跨新平台打包环境准备(iOS + Android)
11、iOS&Android打包配置(权限申请配置)

Electron桌面端与主流的框架

本周将进入全端项目的桌面端，扩展工作中的应用场景，对比桌面端跨端应用的主流技术，分析Electron丰富的UI库 + 庞大体量的第三方npm库优势，结合前端组件化的思想，让桌面端跨端开发变得高效。

课程安排：

Electron桌面端-社区业务集成

本周进入Electron桌面端实战，开发社区应用核心模块首页 + 登录注册+扫一扫登录，对接系统消息功能。实战打包windows&MacOS跨平台应用，了解如何实现热更新，完成桌面端应用开发的小闭环。

课程安排：

阶段八： React17框架与源码解析（拔高）

第29周
第30周
第31周
第32周

React17新特性

React 17带来了性能提升，结合TypeScript，让Reac代码更加健壮、易于维护。如何配置通用项目，学习React路由方案及工作原理，深入解读源码。

课程安排：

1、React设计思想及优势
2、React新版本高性能原理：Fiber、RequestIdelCallback
3、React项目中配置eslint、prettier规范代码工具
4、搭建React&TypeScript通用企业项目模板
5、常见的React的UI库（AntDesign、AntD Pro、Material UI）
6、学习React路由方案及常见API
7、React动态路由与参数获取
8、React路由配置与匹配原则
9、React路由工作原理 + 源码解读

React-Hooks&状态管理方案

解锁 React + TS 高阶用法。本周将深入实际开发场景，学习React Hooks工作原理，Redux和Mobx两种状态管理方案，深入解读核心源码。

课程安排：

React组件库设计&工程化

使用TS+React+Vite开发业务组件库，提炼通用模板（测试集成、格式化、ESLint、提交校验、自动日志），提升项目开发效率。了解库类型项目如何组织代码，学习组件封装+分享npm的组件库设计。

课程安排：

React工程化&性能优化

React工程化的应用，项目最终需要性能优化 +打包部署，结合前置CICD知识背景，完成高效高质量的打包工作。讲解Vite工具与React的集成，实现冷启动，提升平时React项目的开发效率。

课程安排：

1、CLI打包命令与配置
2、CICD平台集成（Github Actions、Jenkins）
3、动画功能集成
4、单元测试Jest工具集成
5、测试组件库中的常见组件
6、性能优化常见指标
7、性能分析工具对比Profiler、Developer tools、Performance
8、深入Profiler优化React项目
9、Immutable 优化 React 性能
10、常见webpack打包优化方案

查看课程详情

资深大咖10+年行业经验集大成，让你能力提升一目了然

Brian

全栈大牛，创业者

任职国内一线互联网公司，超过10年的前后端开发经验。负责过多个领域的全栈项目开发，纵跨直播平台、
新媒体管理系统等多个行业领域，对于微服务框架、服务治理等技术颇有研究，自创多种优化流程。对新技
术保持敏感，将Vue3.0等最新技术栈都同步到课程里。

千名学员一致好评，学员有进步，课程才有好口碑

0基础到前端架构师进阶之路

为你梳理专业学习规划，助力优秀成长之旅

此外，你还可以享有面试指导福利

老师将与学员直播互动，
直击面试难点、痛点、盲点，详解求职技巧
每一分努力，都能收获理想的回报
课程适合人群

有扎实的JavaScript（ES6）/HTML/CSS前端功底
有Node.js、Vue、React基础，并开发过Demo项目
有自学能力、懂得运用互联网工具解决开发问题
不少于1年的web前端开发经验

热搜

最近搜索清空

每一个初阶前端开发，在进阶的道路上，都会遇到这些困扰

天天忙需求，薪资不见涨，加班还越来越多？你的路走窄了！

综合百位行业大咖能力模型，带你系统构建【 全端+全栈+全流程】高阶岗位能力

前沿技术 + 实战经验 + 高维视野 + 技能落地 = “进阶通行证 ”

通过一整套主流企业级解决方案，帮你实现能力的整体进阶

全端+全栈+全流程

一套企业级项目贯穿6大场景

多重学习保障

完善的知识体系+前沿技术

思维与技术深度并重

团队管理提效

2022 全新升级，技术全面革新，助你实现越级进阶！

紧跟技术发展，迭代课程内容，大前端2022，带你走在前端技术“前沿”

对标一线大厂开发标准，一套业务打通全端全栈应用场景

符合规范化+模块化+组件化+自动化的全端项目，覆盖需求-设计-开发-测试-维护的全流程

社区PC前端项目—全流程Vue.js高级进阶全栈项目

内容管理后台—多端统一的角色权限&内容管理平台

接口数据后端—告别Node.js“玩具”时代，多端统一API接口框架

社区移动端WebApp—采用组件化结构+多端适配方案

社区小程序—快应用框架MVVM架构开发社区小程序

社区桌面端应用项目—Electron结合React/Vue快速构建桌面应用

移动跨平台App—Flutter2.0框架+Dart语言开发社区App

8大阶段还原大厂落地解决方案，70000+ 行代码完成思维训练与实战开发

整合前沿技术框架，深度构建大前端知识图谱，累积项目经验

紧跟前沿技术栈，160+必备知识点，20种效率工具一次掌握

市面少有的系统化课程，32周全面升级职场竞争力

12 项岗位能力全面拔高，离独挡一面的技术专家更近一步

硬实力源于实战，每一次提升都将成为你履历上的亮点

全局思维能力

全端开发能力

全栈能力

团队协同能力

项目统筹能力

工程化能力

测试能力

重构能力

性能优化能力

React源码解读能力

监控运维能力

第三方集成能力

课程额外专属福利，为你的学习和就业保驾护航！

课程电子书

丰富的专属课程资料实时更新

兴趣小组

优秀学员有机会进组通过实战提升能力

面试指导

优秀学员更有机会获得内推服务

除了出色的视频内容，这里有伴你整个职业生涯的“成长社区”

学习时你能在这里获取答案，工作后你能在这里解决难题

由于课程类型与教学目标不同，学习服务会有不同，具体服务可在线咨询

以周为单位，高段位大前端系统养成

理论+实践，技术难点逐一击破

认识大前端，全栈开发初体验

课程安排：

企业标准的开发环境搭建

课程安排：

NoSQL数据库的设计与集成

课程安排：

JWT登录鉴权—通用登录模块后端开发

课程安排：

团队协作-文档管理与缺陷控制

课程安排：

团队协作-版本管理

课程安排：

团队协作-自动化流程

课程安排：

全栈开发—首页模块

课程安排：

全栈开发—用户中心

课程安排：

全栈开发—发贴/回帖模块

课程安排：

消息中间件开发（WebSocket通信）

课程安排：

组件化思想进阶：iview上手文章管理

课程安排：

中后台权限系统：前端权限设计方案

课程安排：

综合百位行业大咖能力模型，带你系统构建【全端+全栈+全流程】高阶岗位能力