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>
评论
基于wujie的解决方案来简单聊聊微前端
点击关注公众号,“技术干货” 及时达!「1.5W 字预警」前言因为目前有时间了,所以在整理一下自己这几年写过的一些东西的相关文档,准备把一些东西改一下发出来,有的内容可能并不复杂,甚至有点浅显,但是也是对自己这几年的一些复盘和总结了.往期精彩零代码+AI的阶段性复盘文档引擎+AI可视化打造
趣谈前端
1
基于wujie的解决方案来简单聊聊微前端
前言因为目前有时间了,所以在整理一下自己这几年写过的一些东西的相关文档,准备把一些东西改一下发出来,有的内容可能并不复杂,甚至有点浅显,但是也是对自己这几年的一些复盘和总结了如果有需要,转载前请向我确认另:刚入职的公司把总监和经理都干掉了,有可能因为发展路线原因不再需要前端,现在求一份广州 、 深圳
前端Q
1
Soda前端框架
已更名为Abstract.js,请参考Abstract.jsPuppet(ORSoda)是基于逻辑层抽像的前端框架,致力于更高效,便捷,优雅的构建开发复杂的前端工程。Puppet是基于MVC的传统架框
Soda前端框架
0