微前端阿里qiankun、京東micro-app、騰訊wujie配置父子應(yīng)用

一：阿里qiankun

基于 single-spa，采用了微前端的技術(shù)方案，通過主應(yīng)用來管理和加載多個子應(yīng)用。主應(yīng)用和子應(yīng)用之間通過自定義協(xié)議通信，實現(xiàn)了跨應(yīng)用的狀態(tài)共享。

1、主main.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: '子應(yīng)用名稱',
    entry: '子應(yīng)用入口URL',
    container: '#子應(yīng)用掛載容器',
    activeRule: '/子應(yīng)用路由前綴',
  },
  // 可以添加更多子應(yīng)用
]);

start();

2、子main.js

import { createApp } from 'vue';
import App from './App.vue';

let app = null;

function render() {
  app = createApp(App);
  app.mount('#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  // 子應(yīng)用啟動前的操作
}

export async function mount(props) {
  // 子應(yīng)用掛載前的操作
  render();
}

export async function unmount() {
  // 子應(yīng)用卸載前的操作
  app.unmount();
  app = null;
}

3、子package.json

{
  "name": "sub-app",
  "version": "1.0.0",
  "qiankun": {
    "master": {
      "defer": true
    }
  }
}

二、京東micro-app和騰訊wujie

基于 Web Components 技術(shù)實現(xiàn)，wujie為輕量級的微前端框架，micro-app為相對完整的微前端解決方案，提供了更多的功能和生態(tài)支持，如狀態(tài)管理、路由管理等。

使用方法一致，替換庫即可

1、主mian.js

import { createApp } from 'micro-app';
import App from './App.vue';

createApp(App).start();

2、子main.js

import { createApp } from 'micro-app';
import App from './App.vue';

createApp(App).start();

3、子package.js

{
  "name": "sub-app",
  "version": "1.0.0",
  "micro-app": {
    "type": "sub-app"
  }
}

posted @ 2022-07-12 16:12 魷魚須須閱讀(1824) 評論(0) 收藏舉報

刷新頁面返回頂部

微前端阿里qiankun、京東micro-app、騰訊wujie配置父子應(yīng)用

公告