AI prompts
base on 极致的微前端框架 <p align="center">
<a href="https://wujie-micro.github.io/doc/" target="_blank">
<img src="https://vfiles.gtimg.cn/wuji_dashboard/xy/test_wuji_damy/phFSuhUC.png" width="100" height="100" alt="logo">
</a>
</p>
# wujie（无界）
无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。
## 文档
动机：[动机](https://zhuanlan.zhihu.com/p/551206945)
文档详见：[文档](https://wujie-micro.github.io/doc/)
演示详见：[demo](https://wujie-micro.github.io/demo-main-vue/home)
## 背景
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。
Web Components 是一个浏览器原生支持的组件封装技术，可以有效隔离元素之间的样式，iframe 可以给子应用提供一个原生隔离的运行环境，相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location，可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的解决了上述问题。
## 特性
1. 成本低
- 主应用使用成本低
- 子应用适配成本低
2. 速度快
- 子应用首屏打开速度快
- 子应用运行速度快
3. 原生隔离
- css 样式通过 Web Components 可以做到严格的原生隔离
- js 运行在 iframe 中做到严格的原生隔离
4. 功能强大
- 支持子应用保活
- 支持子应用嵌套
- 支持多应用激活
- 支持应用共享
- 支持去中心化通信
- 支持生命周期钩子
- 支持插件系统
- 支持 vite 框架
## 快速上手
### 直接使用
- 安装
```bash
npm install wujie -S
```
- 使用
```javascript
import { startApp } from "wujie";
startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });
```
### vue 框架
- 安装
```bash
# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S
```
- 引入
```javascript
// vue2
import WujieVue from "wujie-vue2";
Vue.use(WujieVue);
// vue3
import WujieVue from "wujie-vue3";
app.use(WujieVue);
```
- 使用
```js
<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 框架
- 安装
```bash
npm i wujie-react -S
```
- 引入
```javascript
import WujieReact from "wujie-react";
```
- 使用
```html
<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>
```
## 常见问题
[详见文档](https://wujie-micro.github.io/doc/question/#_1%E3%80%81%E8%AF%B7%E6%B1%82%E8%B5%84%E6%BA%90%E6%8A%A5%E9%94%99)
## 本地开发
运行以下脚本，可以本地开发无界微前端框架，支持实时编译调试开发。
```bash
pnpm i // 安装包依赖，务必使用pnpm
npm run start // 启动所有应用
```
## One more thing
无界微前端解决方案来源于团队的无极低代码平台，通过无界微前端，存量页面和低代码页面可以丝滑的互相内嵌，欢迎体验[【腾讯无极低代码】](https://wujicode.cn)。", Assign "at most 3 tags" to the expected json: {"id":"3459","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"