看到标题,大家首先想到的应该是iframe,诚然iframe的确可以做到,但是我们今天要讲的并不是它,而是新推出的一款微前端框架micro-app。至于为什么不用iframe,可以参考Why Not Iframe。
micro-app是什么
micro-app是一款基于类WebComponent进行渲染的微前端框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
micro-app的基本实现思路和single-spa、qiankun类似,但它借鉴了WebComponent的思想,使用CustomElement和自定义的shadowDom,将微前端封装在一个类WebComponent组件中,从而简化了渲染步骤。
如何使用?
1、安装依赖
yarn add @micro-zoe/micro-app
2、引入micro-app
// index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
3、在页面中使用
<template>
<div id