wujie无界微前端框架-技术圈

wujie无界微前端框架

联合创作 · 2023-09-20 01:04

无界微前端是一款基于 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>

编辑分享