这门课解决什么工作场景

微前端不是日常写页面的工具，而是解决“多个团队、多个历史项目如何拼成一个系统”的架构手段。在企业里，常见场景是：一个门户站要同时接入老版本 Vue 写的资讯模块、新 React 写的车库模块、第三方外包交付的报价模块，且各模块独立部署、独立发版，互不阻塞。这门课围绕一个汽车资讯平台，讲清楚如何从零搭一个微前端框架，而不是只讲怎么调用现成开源方案。它处理的是子应用加载、样式隔离、路由分发、通信机制这些工程级问题，偏架构设计，不是 UI 层业务开发。

适合什么基础与怎么用资料

课程定位是面向有两到五年经验的前端工程师，默认你已经能独立用主流框架写项目，懂打包配置，看过路由和状态管理源码。零基础或刚学完语法的人不建议碰，会卡在软件设计原则和分层那一段。建议先把第二章关于架构基础和软件设计原则的部分过一遍，建立“为什么要分层、为什么要拆应用”的认知，再进入框架实现部分。资料包里有源代码和视频，建议顺序是：先看一节视频理解设计意图，再打开对应源码逐行对照，不要只看不动手。重点把应用注册表、路由拦截、沙箱隔离这几块的代码自己跑通一遍，改一改加载顺序和样式作用域，看隔离是否生效。源码体积不大，适合逐行调试，不要当速查手册翻。

学完能独立做什么

学完后，你应该能独立设计一个支持多子应用注册、按路由懒加载、具备基础样式和全局变量隔离的微前端框架，并能把它接入到现有中后台或门户项目里。更实际的是，当团队面临多团队协作、老系统改造、独立部署需求时，你能判断该不该上微前端、用什么方案、隔离做到哪一层，而不是只会把开源框架搬过来跑通 demo。这门课的价值不在让你多写几个页面，而在让你具备前端架构层面的判断和落地能力。如果你当前工作只涉及单应用开发，暂时用不上，可以先放一放；如果正在做平台型产品或中后台整合，这门课值得花时间啃透。


专为2~5年前端工程师打造的架构能力提升课

课程目录

*   00 资料/

  *   源代码/

    *   01 video-code.zip (3.00 MB)

*   01 第1章 课程简介/

  *   01 1-1 导学.mp4 (35.44 MB), 06:27

  *   02 1-2 了解微前端.html (0.01 MB)

*   02 第2章 架构基础知识/

  *   01 2-1 导学-微前端实现方式对比.html (0.00 MB)

  *   02 2-2 前端架构的前世今生.mp4 (93.73 MB), 17:31

  *   03 2-3 软件设计原则与分层（1）.mp4 (33.20 MB), 04:37

  *   04 2-4 软件设计原则与分层（2）.mp4 (30.43 MB), 05:11

  *   05 2-5 软件设计原则与分层（3）.mp4 (34.34 MB), 06:24

  *   06 2-6 软件设计原则与分层（4）.mp4 (42.28 MB), 08:02

  *   07 2-7 架构设计的质量-健壮性和稳定性.mp4 (63.76 MB), 11:41

  *   08 2-8 架构前期准备.mp4 (97.84 MB), 13:45

  *   09 2-9 技术填补与崩溃预防（1）.mp4 (101.02 MB), 18:38

  *   10 2-10 技术填补与崩溃预防（2）.mp4 (30.94 MB), 05:34

  *   11 2-11 系统重构（1）.mp4 (44.31 MB), 07:51

  *   12 2-12 系统重构（2）.mp4 (13.72 MB), 02:17

  *   13 2-13 前端架构基础.html (0.00 MB)

  *   14 2-14 讨论题—浏览器对于微前端的支持能力.html (0.00 MB)

*   03 第3章 基础准备工作/

  *   01 3-1 微前端实现方式对比.mp4 (66.26 MB), 11:03

  *   02 3-2 技术选型-确定技术栈.mp4 (34.27 MB), 07:41

  *   03 3-3 绘制项目架构图.mp4 (122.35 MB), 13:55

*   04 第4章 应用开发/

  *   01 4-1 vue2子应用-新能源页面.mp4 (68.06 MB), 10:51

  *   02 4-2 vue3子应用-首页、选车页面.mp4 (84.10 MB), 14:15

  *   03 4-3 react15子应用-资讯、视频、视频详情.mp4 (79.91 MB), 11:39

  *   04 4-4 react16子应用-新车、排行、登录（1）.mp4 (15.86 MB), 02:04

  *   05 4-5 react16子应用-新车、排行、登录（2）.mp4 (19.17 MB), 03:26

  *   06 4-6 react16 子应用-新车、排行、登录（3）.mp4 (8.06 MB), 01:21

  *   07 4-7 react16子应用-登录、新车、排行（4）.mp4 (61.02 MB), 10:48

  *   08 4-8 构建一个后端服务.mp4 (79.97 MB), 14:29

  *   09 4-9 后端服务请求处理（1）.mp4 (65.57 MB), 11:58

  *   10 4-10 后端服务请求处理（2）.mp4 (51.48 MB), 09:23

  *   11 4-11 子应用接入微前端-vue2 （1）.mp4 (67.59 MB), 06:46

  *   12 4-12 子应用接入微前端-vue2 （2）.mp4 (63.54 MB), 11:28

  *   13 4-13 子应用接入微前端 - vue3（1）.mp4 (33.57 MB), 06:03

  *   14 4-14 子应用接入微前端 - vue3（2）.mp4 (31.90 MB), 05:52

  *   15 4-15 子应用接入微前端 - react15.mp4 (67.51 MB), 12:12

  *   16 4-16 子应用接入微前端 - react16.mp4 (55.86 MB), 08:26

  *   17 4-17 知识补充 - vue3开发指南.html (0.03 MB)

  *   18 4-18 知识补充 - Webpack基本配置.html (0.03 MB)

  *   19 4-19 面试题 -- vue3和vue2的不同.html (0.00 MB)

*   05 第5章 微前端框架开发 - 框架初长成/

  *   01 5-1 项目整体介绍.mp4 (64.87 MB), 09:44

  *   02 5-2 中央控制器 - 主应用开发.mp4 (91.43 MB), 16:35

  *   03 5-3 子应用注册.mp4 (104.94 MB), 19:20

  *   04 5-4 微前端框架 - 路由拦截.mp4 (75.57 MB), 13:15

  *   05 5-5 微前端框架 - 获取首个子应用.mp4 (75.58 MB), 13:36

  *   06 5-6 微前端框架 - 主应用生命周期.mp4 (60.94 MB), 10:46

  *   07 5-7 微前端框架 - 微前端生命周期.mp4 (112.00 MB), 20:08

  *   08 5-8 获取需要展示的页面 - 加载和解析html.mp4 (127.10 MB), 23:18

  *   09 5-9 加载和解析js.mp4 (88.00 MB), 15:46

  *   10 5-10 执行js脚本.mp4 (101.75 MB), 18:46

*   06 第6章 微前端框架开发 - 添加辅助功能/

  *   01 6-1 微前端环境变量设置 （1）.mp4 (47.23 MB), 08:30

  *   02 6-2 微前端环境变量设置 （2）.mp4 (44.61 MB), 07:52

  *   03 6-3 运行环境隔离 - 快照沙箱.mp4 (84.38 MB), 15:08

  *   04 6-4 运行环境隔离 - 代理沙箱.mp4 (111.51 MB), 19:58

  *   05 6-5 css样式隔离.mp4 (80.57 MB), 14:22

  *   06 6-6 应用间通信 - 父子通信（1）.mp4 (24.15 MB), 03:35

  *   07 6-7 应用间通信 - 父子通信（2）.mp4 (81.88 MB), 14:19

  *   08 6-8 应用间通信 - 父子通信（3）.mp4 (41.51 MB), 07:36

  *   09 6-9 应用间通信 - 子应用间通信.mp4 (69.16 MB), 12:19

  *   10 6-10 全局状态管理 - 全局store（1）.mp4 (25.63 MB), 04:52

  *   11 6-11 全局状态管理 - 全局store（2）.mp4 (29.34 MB), 05:02

  *   12 6-12 全局状态管理 - 全局store（3）.mp4 (14.30 MB), 02:35

  *   13 6-13 提高加载性能 - 应用缓存.mp4 (42.36 MB), 06:26

  *   14 6-14 提高加载性能 - 预加载子应用.mp4 (42.21 MB), 07:39

*   07 第7章 微前端框架开发 - 实现自动发布/

  *   01 7-1 框架发布 – 通过npm发布框架 （1）.mp4 (40.22 MB), 06:17

  *   02 7-2 框架发布 – 通过npm发布框架 （2）.mp4 (46.48 MB), 08:25

  *   03 7-3 应用部署 - 创建自动部署平台（1）.mp4 (48.27 MB), 08:30

  *   04 7-4 应用部署 - 创建自动部署平台 （2）.mp4 (48.41 MB), 08:42

  *   05 7-5 实现应用的自动化部署 （1）.mp4 (43.37 MB), 07:46

  *   06 7-6 实现应用的自动化部署 （2）.mp4 (12.84 MB), 02:14

  *   07 7-7 实现应用的自动化部署 （3）.mp4 (52.34 MB), 09:32

  *   08 7-8 质量保证 - 如何实现主子应用测试.mp4 (40.58 MB), 08:31

*   08 第8章 使用现有框架 qiankun 重写/

  *   01 8-1 使用qiankun重构项目.mp4 (105.90 MB), 16:29

  *   02 8-2 qiankun源码分析-应用注册.mp4 (28.68 MB), 04:56

  *   03 8-3 qiankun源码分析 - 应用加载.mp4 (41.63 MB), 07:32

  *   04 8-4 qiankun源码分析 - 沙箱隔离.mp4 (28.94 MB), 05:15

  *   05 8-5 qiankun源码分析 - 全局状态管理.mp4 (22.81 MB), 03:05

  *   06 8-6 qiankun源码分析 - 预加载.mp4 (14.40 MB), 02:10

  *   07 8-7 扩展：如何阅读源码.html (0.00 MB)

  *   08 8-8 使用single-spa重构项目（1）.mp4 (28.39 MB), 03:08

  *   09 8-9 使用single-spa重构项目（2）.mp4 (26.10 MB), 04:43

  *   10 8-10 使用single-spa重构项目（3）.mp4 (40.73 MB), 07:03

  *   11 8-11 使用single-spa重构项目（4）.mp4 (28.24 MB), 05:02

  *   12 8-12 使用single-spa重构项目（5）.mp4 (79.57 MB), 14:24

  *   13 8-13 使用single-spa重构项目（6）.mp4 (13.59 MB), 02:26

  *   14 8-14 single-spa源码介绍.mp4 (49.50 MB), 07:48

  *   15 8-15 后续学习建议.html (0.00 MB)