首页 实战

从0到1落地微前端架构， MicroApp实战招聘网站

一套解决巨石应用痛点的微前端架构方案+多技术栈融合+综合项目实战

已完结
|
难度：高级
|
时长：共 14 小时
前端畅销榜第 9 名
￥199.00
距离活动结束
立即购买
加购物车
已有 184 人在学
  • 掌握整套微前端架构解决方案
  • 训练前端多应用架构设计思维
  • 收获从0到1落地微前端的经验
  • 强化Vue3、Nuxt2等主流技术
  • 提升多项目多技术栈融合能力
  • 提高多角色分工与协作开发力
试看本节课 06:40
1-1 ：课程导学

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
能够应对不同技术栈、不同构建工具的巨石应用架构是前端高级工程师的衡量标准之一。本课程为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案，并结合主流微前端框架MicroApp，流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站，助力你成长为独当一面、具备team leader潜质的前端高级工程师。
展开所有

本章介绍：

课程介绍

第1章 课程介绍
1 节｜7分钟
展开
  • 视频：
    1-1 ：课程导学
    试看
    06:40

本章介绍：

了解微前端的应用场景，并对市面上的多种微前端基数方案进行比较，加深对微前端架构思想的理解

第2章 为什么前端工程师都应该学习微前端？
3 节｜35分钟
收起
  • 视频：
    2-1 ：什么是微前端？为什么要学习微前端？
    12:42
  • 视频：
    2-2 ：微前端实现方案大乱炖：iframe、single-spa、qiankun、micro-app
    12:24
  • 视频：
    2-3 ：现代微前端架构理念：团队自治、独立部署、场景落地
    09:22

本章介绍：

进行实战项目的技术栈选型，确定使用微前端框架micro-app，并阐明它的优势

第3章 微前端技术选型&微前端架构设计方案
2 节｜22分钟
收起
  • 视频：
    3-1 ：技术选型：基于micro-app框架的微前端应用
    15:45
  • 视频：
    3-2 ：架构设计：一站式微前端架构设计方案
    05:18

本章介绍：

开发环境准备

第4章 开发环境搭建&后端API联调说明
2 节｜16分钟
展开
  • 视频：
    4-1 ：开发环境搭建：nvm、node
    09:24
  • 视频：
    4-2 ：主、子应用的后端API联调说明
    06:22

本章介绍：

扮演上帝视角，使用Vue3技术栈构建子应用，构建基座应用，对未来多个子应用进行统筹，具备无缝衔接微应用的能力

第5章 微前端实战1—主应用main-vue3
11 节｜123分钟
展开
  • 视频：
    5-1 ：本章导学
    00:54
  • 视频：
    5-2 ：vue3+vite4主应用快速构建
    05:11
  • 视频：
    5-3 ：vue3全家桶集成：vue-router、axios、element-plus、sass
    27:09
  • 视频：
    5-4 ：主应用接入微前端：MicroApp开箱即用、统筹全局
    09:44
  • 视频：
    5-5 ：封装通用组件commonHeader、commonFooter
    19:03
  • 视频：
    5-6 ：封装容器组件mainContainer
    03:01
  • 视频：
    5-7 ：主应用登录页面布局
    16:27
  • 视频：
    5-8 -1：主应用登录功能开发：axios封装、proxy跨域设置、MD5加密
    15:42
  • 视频：
    5-9 -2：主应用登录功能开发：axios封装、proxy跨域设置、MD5加密
    13:58
  • 视频：
    5-10 ：主应用登出功能开发：MicroApp全局数据通信
    10:03
  • 视频：
    5-11 ：本章小结
    01:43

本章介绍：

扮演研发团队A角色，使用Nuxt2技术栈构建子应用，详解Nuxt2子应用如何接入微前端体系，最终实现了【首页】业务模块相关功能

第6章 微前端实战2—子应用child-nuxt2-home
10 节｜71分钟
展开
  • 视频：
    6-1 ：本章导学
    02:05
  • 视频：
    6-2 ：nuxt2子应用快速构建
    09:15
  • 视频：
    6-3 ：nuxt2集成1：sass
    06:13
  • 视频：
    6-4 ：nuxt2集成2：axios安装与二次封装
    09:57
  • 视频：
    6-5 ：nuxt2子应用功能开发：实现首页SSR
    08:00
  • 视频：
    6-6 ：nuxt2子应用跨域请求：proxy跨域设置
    11:29
  • 视频：
    6-7 ：接入微前端1：chrome插件解决本地跨域
    05:20
  • 视频：
    6-8 ：接入微前端2：express自定义跨域服务
    08:39
  • 视频：
    6-9 ：接入微前端3：ssr模式加载子应用
    04:02
  • 视频：
    6-10 ：本章小结
    05:42

本章介绍：

扮演研发团队B角色，使用Vue2技术栈构建子应用，详解Vue2子应用如何接入微前端体系，最终实现了【职位】业务模块相关功能

第7章 微前端实战3—子应用child-vue2-job
9 节｜69分钟
展开
  • 视频：
    7-1 ：本章导学
    01:31
  • 视频：
    7-2 ：vue2子应用快速构建
    04:09
  • 视频：
    7-3 ：vue2全家桶集成：vue-router、axios、element-ui、sass
    16:27
  • 视频：
    7-4 ：vue2子应用功能开发1：职位列表
    17:07
  • 视频：
    7-5 ：vue2子应用功能开发2：职位详情
    10:36
  • 视频：
    7-6 ：vue2子应用跨域请求：proxy跨域设置
    03:53
  • 视频：
    7-7 ：接入微前端1：如何解决vue2子应用跨域
    06:02
  • 视频：
    7-8 ：接入微前端2：设置publicPath补全静态资源路径
    04:34
  • 视频：
    7-9 ：本章小结
    04:27

本章介绍：

扮演研发团队C角色，使用Vue3技术栈构建子应用，详解Vue3+Vite子应用如何接入微前端体系，最终实现了【企业】业务模块相关功能

第8章 微前端实战4—子应用child-vue3-enterprise
6 节｜54分钟
展开
  • 视频：
    8-1 ：本章导学
    01:54
  • 视频：
    8-2 ：vue3+vite4子应用快速构建
    09:34
  • 视频：
    8-3 ：vue3子应用功能开发1：企业列表
    18:11
  • 视频：
    8-4 ：vue3子应用功能开发2：企业详情
    05:06
  • 视频：
    8-5 ：接入微前端：全心全意为vite打造的iframe沙箱方案
    13:47
  • 视频：
    8-6 ：本章小 结
    04:41

本章介绍：

扮演研发团队D角色，使用React18技术栈构建子应用，详解React18+Webpack子应用如何接入微前端体系，最终实现了【关于我们】业务模块相关功能

第9章 微前端实战5—子应用child-react18-about
7 节｜31分钟
展开
  • 视频：
    9-1 ：本章导学
    00:53
  • 视频：
    9-2 ：react18+webpack5子应用快速构建
    01:46
  • 视频：
    9-3 ：react18集成router、axios、sass
    10:31
  • 视频：
    9-4 ：react18子应用功能开发：关于我们
    03:55
  • 视频：
    9-5 ：react子应用跨域请求：暴露webpack实现proxy跨域设置
    04:01
  • 视频：
    9-6 ：接入微前端：设置publicPath补全静态资源路径
    07:13
  • 视频：
    9-7 ：本章小结
    02:25

本章介绍：

通过实际案例和具体业务场景，解析微前端框架的多种能力：沙箱隔离能力、加载能力、缓存能力、数据通信能力、跨应用跳转能力

第10章 沙箱隔离&加载&缓存&数据通信&跨应用跳转等能力拓展
12 节｜94分钟
展开
  • 视频：
    10-1 ：本章导学
    01:08
  • 视频：
    10-2 ：沙箱隔离能力1：JS隔离
    11:22
  • 视频：
    10-3 ：沙箱隔离能力2：样式隔离
    10:16
  • 视频：
    10-4 ：沙箱隔离能力3：元素隔离
    07:57
  • 视频：
    10-5 ：加载能力：微前端的生命周期
    08:08
  • 视频：
    10-6 ：数据通信能力1：主子通信
    09:49
  • 视频：
    10-7 ：数据通信能力2：子主通信
    10:18
  • 视频：
    10-8 ：数据通信能力3：子应用之间通信
    07:46
  • 视频：
    10-9 ：跨应用跳转能力1：主应用跳转子应用
    03:28
  • 视频：
    10-10 ：跨应用跳转能力2：子应用跳转主应用
    09:42
  • 视频：
    10-11 ：跨应用跳转能力3：子应用之间跳转
    02:07
  • 视频：
    10-12 本章小结
    11:35

本章介绍：

逐一对主、子应用进行交互、打包优化，进一步提升巨石应用整体性能

第11章 微前端性能优化实践
6 节｜39分钟
展开
  • 视频：
    11-1 ：本章导学
    01:03
  • 视频：
    11-2 ：微前端预加载
    09:06
  • 视频：
    11-3 ：微前端资源共享
    08:18
  • 视频：
    11-4 ：子应用缓存
    08:11
  • 视频：
    11-5 ：子应用的丝滑转场
    08:28
  • 视频：
    11-6 ：本章小结
    03:03

本章介绍：

将实战项目从本地环境提升到了生产环境，通过对主、子应用的依次部署，确保微前端应用在生产环境的稳定性，学会如何将一个微前端应用成功部署上线

第12章 微前端应用如何优雅上线？
16 节｜132分钟
展开
  • 视频：
    12-1 ：本章导学
    03:55
  • 视频：
    12-2 ：发布工具准备：putty、xftp
    07:11
  • 视频：
    12-3 ：服务器环境依赖：Node、Nginx、Screen
    13:18
  • 视频：
    12-4 ：封装config文件统一管理开发和生产环境域名
    18:05
  • 视频：
    12-5 ：nuxt2子应用部署
    16:35
  • 视频：
    12-6 ：生产环境Nginx配置
    12:05
  • 视频：
    12-7 ：vue2子应用部署
    09:40
  • 视频：
    12-8 ：vue3子应用部署
    05:06
  • 视频：
    12-9 ：react18子应用部署
    05:05
  • 视频：
    12-10 ：vue3基座应用部署
    08:26
  • 视频：
    12-11 ：Nginx开启Gzip压缩：为微前端应用增速
    04:20
  • 视频：
    12-12 ：查缺补漏1：优化微前端应用样式
    02:43
  • 视频：
    12-13 ：查缺补漏2：解决vue2子应用白屏问题
    02:34
  • 视频：
    12-14 ：查缺补漏3：结合Vuex优化基座应用的导航栏选中问题
    13:33
  • 视频：
    12-15 ：查缺补漏4：解决子应用页面重定向和token透传问题
    07:41
  • 视频：
    12-16 ：本章小结
    01:22

本章介绍：

为中小产研团队提供一种更合理的架构方案

第13章 工程化微前端的另一种方案
4 节｜48分钟
展开
  • 视频：
    13-1 ：MPA架构治好了我的精神内耗
    06:48
  • 视频：
    13-2 ：快速搭建MPA脚手架
    16:50
  • 视频：
    13-3 ：微应用的跨应用跳转与内部路由跳转
    16:25
  • 视频：
    13-4 ：微应用的组件复用
    07:03

本章介绍：

课程总结

第14章 课程总结
1 节｜5分钟
展开
  • 视频：
    14-1 ：课程回顾
    04:55
本课程已完结
适合人群
2-3年前端工程师
对前端架构感兴趣的开发人员
有vue基础的开发人员
想要进阶的前端工程师
技术储备
熟悉Javascript，至少掌握Vue2
了解Vue3、React
环境参数
node 16.11.0
micro-app 1.0.0-beta.4
vite 4.4.9
vue-cli 4.5.0
Harry_wang
资深Web前端工程师， 已有545个学生
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
查看更多
数据加载中...
查看更多好课
《从0到1落地微前端架构， MicroApp实战招聘网站》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥199.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信