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
- 引入
// 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 框架
- 安装
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>
评论