[520] 从零打造微前端框架：实战“汽车资讯平台”项目 - 个性化增值服务，学习有保障更高效

网盘链接：

1. 课程简介

• 1-1 导学
• 1-3 了解微前端

2. 架构基础知识

• 2-1 导学-微前端实现方式对比
• 2-2 前端架构的前世今生
• 2-3 软件设计原则与分层（1）
• 2-4 软件设计原则与分层（2）
• 2-5 软件设计原则与分层（3）
• 2-6 软件设计原则与分层（4）
• 2-7 架构设计的质量-健壮性和稳定性
• 2-8 架构前期准备
• 2-9 技术填补与崩溃预防（1）
• 2-10 技术填补与崩溃预防（2）
• 2-11 系统重构（1）
• 2-12 系统重构（2）
• 2-13 前端架构基础
• 2-14 讨论题—浏览器对于微前端的支持能力

3. 基础准备工作

• 3-1 微前端实现方式对比
• 3-2 技术选型-确定技术栈
• 3-3 绘制项目架构图

4. 应用开发

• 4-1 vue2子应用-新能源页面
• 4-2 vue3子应用-首页、选车页面
• 4-3 react15子应用-资讯、视频、视频详情
• 4-4 react16子应用-新车、排行、登录（1）
• 4-5 react16子应用-新车、排行、登录（2）
• 4-6 react16 子应用-新车、排行、登录（3）
• 4-7 react16子应用-登录、新车、排行（4）
• 4-8 构建一个后端服务
• 4-9 后端服务请求处理（1）
• 4-10 后端服务请求处理（2）
• 4-11 子应用接入微前端-vue2 （1）
• 4-12 子应用接入微前端-vue2 （2）
• 4-13 子应用接入微前端 – vue3（1）
• 4-14 子应用接入微前端 – vue3（2）
• 4-15 子应用接入微前端 – react15
• 4-16 子应用接入微前端 – react16
• 4-17 知识补充 – vue3开发指南
• 4-18 知识补充 – Webpack基本配置
• 4-19 面试题 — vue3和vue2的不同

5. 微前端框架开发 – 框架初长成

• 5-1 项目整体介绍
• 5-2 中央控制器 – 主应用开发
• 5-3 子应用注册
• 5-4 微前端框架 – 路由拦截
• 5-5 微前端框架 – 获取首个子应用
• 5-6 微前端框架 – 主应用生命周期
• 5-7 微前端框架 – 微前端生命周期
• 5-8 获取需要展示的页面 – 加载和解析html
• 5-9 加载和解析js
• 5-10 执行js脚本

6. 微前端框架开发 – 添加辅助功能

• 6-1 微前端环境变量设置 （1）
• 6-2 微前端环境变量设置 （2）
• 6-3 运行环境隔离 – 快照沙箱
• 6-4 运行环境隔离 – 代理沙箱
• 6-5 css样式隔离
• 6-6 应用间通信 – 父子通信（1）
• 6-7 应用间通信 – 父子通信（2）
• 6-8 应用间通信 – 父子通信（3）
• 6-9 应用间通信 – 子应用间通信
• 6-10 全局状态管理 – 全局store（1）
• 6-11 全局状态管理 – 全局store（2）
• 6-12 全局状态管理 – 全局store（3）
• 6-13 提高加载性能 – 应用缓存
• 6-14 提高加载性能 – 预加载子应用

7. 微前端框架开发 – 实现自动发布

• 7-1 框架发布 – 通过npm发布框架 （1）
• 7-2 框架发布 – 通过npm发布框架 （2）
• 7-3 应用部署 – 创建自动部署平台（1）
• 7-4 应用部署 – 创建自动部署平台 （2）
• 7-5 实现应用的自动化部署 （1）
• 7-6 实现应用的自动化部署 （2）
• 7-7 实现应用的自动化部署 （3）
• 7-8 质量保证 – 如何实现主子应用测试

8. 使用现有框架 qiankun 重写

• 8-1 使用qiankun重构项目
• 8-2 qiankun源码分析-应用注册
• 8-3 qiankun源码分析 – 应用加载
• 8-4 qiankun源码分析 – 沙箱隔离
• 8-5 qiankun源码分析 – 全局状态管理
• 8-6 qiankun源码分析 – 预加载
• 8-7 扩展：如何阅读源码？
• 8-8 使用single-spa重构项目（1）
• 8-9 使用single-spa重构项目（2）
• 8-10 使用single-spa重构项目（3）
• 8-11 使用single-spa重构项目（4）
• 8-12 使用single-spa重构项目（5）
• 8-13 使用single-spa重构项目（6）
• 8-14 single-spa源码介绍
• 8-15 后续学习建议