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>

编辑分享