wujie 无界微前端框架

无界微前端是一款基于 Web Components + iframe 的微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。

特性

成本低

主应用使用成本低

子应用适配成本低

速度快

子应用首屏打开速度快

子应用运行速度快

原生隔离

css 样式通过 Web Components 可以做到严格的原生隔离

js 运行在 iframe 中做到严格的原生隔离

功能强大

支持子应用保活

支持子应用嵌套

支持多应用激活

支持应用共享

支持去中心化通信

支持生命周期钩子

支持插件系统

支持 vite 框架

兼容 IE9（需自行 babel 编译）

快速上手直接使用

安装

npm install wujie -S

使用

import { startApp } from "wujie";startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });

vue 框架

安装

# vue2 框架npm i wujie-vue2 -S# vue3 框架npm i wujie-vue3 -S

引入

// vue2import WujieVue from "wujie-vue2";// vue3import 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 框架

安装

npm i wujie-react -S

引入

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>