轻量高效功能强大的微前端框架MicroApp

　　前沿
　　这几年后端的微服务是比较火爆，我们公司目前只要是新项目，基本上都是基于微服务去架构的，那么微前端是什么呢？
　　微前端是借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活
　　为什么不用iframe
　　以前我们为了把几个独立运行的小型应用合并成一个应用都是通过iframe的方式去实现的，如果不考虑体验问题，iframe几乎是最完美的微前端解决方案了。
　　iframe最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题
　　microapp的优势
　　microapp不是基于iframe架构的
　　1、使用简单
　　microapp提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的开箱即用功能
　　2、零依赖
　　microapp没有任何依赖
　　3、兼容所有框架
　　为了保证各个业务之间独立开发、独立部署的能力，microapp做了诸多兼容，在任何技术框架中都可以正常运行。
　　简单使用
　　下面我讲一下如何在Vue中使用microapp
　　1、初始化一个基座应用初始化一个vue应用大家可以理解这是一个基座应用就是把其它的应用都向它身上集成vuecreatemainapp安装microapp依赖npmimicrozoemicroappsave
　　2、基座应用的文件修改
　　main。js修改入口main。jsimportVimportAppfrom。App。路由信息importrouterfrom。router。引入微前端importmicroAVue。config。productionT微前端基座应用启动microApp。start（）；newVue（｛router，render：（h）h（App），｝）。mount（app）；
　　router。js修改router。js文件如下importVimportRimportmainPagefrom。。viewsmainpage。constroutes〔｛非严格匹配，mainpage都指向mainPage页面path：mainpage，name：mainpage，component：mainPage，｝，〕；constrouternewRouter（｛mode：history，设置主应用基础路由为mainpage子应用基础路由为mainpagexxxbase：mainpage，routes，｝）；exportdefaultrouter
　　3、mainpage。vue页面template下面就是要接入的子应用urlh1子应用h1name（必传）：应用名称url（必传）：应用地址，会被自动补全为http：localhost：3000index。htmlbaseroute（可选）：基座应用分配给子应用的基础路由，就是上面的mainpagemicroappnameapp1urlhttp：localhost：3000baseroutemainpagemicroapptemplate
　　4、创建一个子应用初始化一个vue应用vuecreatechildapp
　　5、子应用的router。js文件修改constrouternewRouter（｛mode：history，MICROAPPBASEROUTE为microapp传入的基础路由base：window。MICROAPPBASEROUTEprocess。env。BASEURL，routes，｝）；
　　6、src目录下新建publicpath。jsMICROAPPENVIRONMENT和MICROAPPPUBLICPATH是由microapp注入的全局变量if（window。MICROAPPENVIRONMENT）｛webpackpublicpathwindow。MICROAPPPUBLICPATH｝
　　7、main。js引入publicpath。jsmain。jsimportVimportAppfrom。App。importrouterfrom。router。jsimport。Vue。config。productionTconstappnewVue（｛router，render：（h）h（App），｝）。mount（app）；监听卸载操作window。addEventListener（unmount，function（）｛app。destroy（）；｝）；
　　到此这个简单的微应用就搭好了
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧