无界微前端是一款基于 Web Components + iframe 的微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。
特性
- 成本低
- 速度快
- 原生隔离
- css 样式通过 Web Components 可以做到严格的原生隔离
- js 运行在 iframe 中做到严格的原生隔离
- 功能强大
- 支持子应用保活
- 支持子应用嵌套
- 支持多应用激活
- 支持应用共享
- 支持去中心化通信
- 支持生命周期钩子
- 支持插件系统
- 支持 vite 框架
- 兼容 IE9(需自行 babel 编译)
快速上手
直接使用
import { startApp } from "wujie";
startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });
vue 框架
# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S
// vue2
import WujieVue from "wujie-vue2";
// vue3
import WujieVue from "wujie-vue3";
Vue.use(WujieVue);
<WujieVue
width="100%"
height="100%"
name="xxx"
:url="xxx"
:sync="true"
:fetch="fetch"
:props="props"
:beforeLoad="beforeLoad"
:beforeMount="beforeMount"
:afterMount="afterMount"
:beforeUnmount="beforeUnmount"
:afterUnmount="afterUnmount"
></WujieVue>
react 框架
import WujieReact from "wujie-react";
<WujieReact
width="100%"
height="100%"
name="xxx"
url="{xxx}"
sync="{true}"
fetch="{fetch}"
props="{props}"
beforeLoad="{beforeLoad}"
beforeMount="{beforeMount}"
afterMount="{afterMount}"
beforeUnmount="{beforeUnmount}"
afterUnmount="{afterUnmount}"
></WujieReact>