无界配置微前端

无界-微前端

vue为主应用、react为子应用举例

vue主应用组件封装

# vue2 框架
npm i wujie-vue2 -S

# vue3 框架
npm i wujie-vue3 -S

main.js文件中引入

// vue2引入如下命令
import WujieVue from "wujie-vue2";
// vue3引入如下命令
import WujieVue from "wujie-vue3";

const { bus, setupApp, preloadApp, destroyApp } = WujieVue;

Vue.use(WujieVue);

使用【页面可显示的.vue文件当中】

<WujieVue
  width="100%"
  height="100%"
  name="xxx"
  :url="xxx"  // 子应用的路径地址
  :sync="true"
  :fetch="fetch"
  :props="props"   // 用于通信、注入给子应用的数据
  :beforeLoad="beforeLoad"  // 生命周期钩子，加载子应用前调用
  :beforeMount="beforeMount"  // 生命周期钩子，子应用 mount 之前调用
  :afterMount="afterMount" // 生命周期钩子，子应用 mount 之后调用
  :beforeUnmount="beforeUnmount"  // 生命周期钩子，子应用 unmount 之前调用
  :afterUnmount="afterUnmount"  // 生命周期钩子，子应用 unmount 之后调用
></WujieVue>

做完以上步骤就可以把react的应用放到vue项目当中

react为主应用、vue为子应用举例

安装

npm i wujie-react -S

页面可显示的地方引入

import WujieReact from "wujie-react";

const { bus, setupApp, preloadApp, destroyApp } = WujieReact;

return返回页面的时候使用

<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>

做完以上步骤就可以把vue的应用放到react项目当中

看完以上的操作，感觉这个无界是不是跟html标签里面iframe是一样的操作呐

可能有人会有疑问直接使用iframe不就可以做到吗？

对iframe的了解

iframe 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档（可以是本地 html 页面，也可以是第三方网页）。说白了就是用来在当前 HTML 页面中嵌入另一个文档的。且所有主流浏览器都支持 iframe 标签。通常我们使用 iframe 直接在页面嵌套 iframe 标签指定的 src 就可以了。

微前端解决方案如 qiankun, 也有使用 iframe 作为微前端解决方案的 无界 。

iframe优点：

• 非常简单，使用没有任何心智负担
• web应用隔离的非常完美，无论是js、css、dom都完全隔离开来

iframe缺点：

• 路由状态丢失，刷新一下，iframe的url状态就丢失了
• dom割裂严重，弹窗只能在iframe内部展示，无法覆盖全局
• web应用之间通信非常困难
• 每次打开白屏时间太长，对于SPA 应用来说无法接受