本文共 2755 字，大约阅读时间需要 9 分钟。

������������

• umi
• qiankun
• ant design pro
• ������������������������
• ������������������������������������

������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������

������������������������������������������������������ ant-deisng-pro ������������������������������������������

���������������������������

yarn create umi main-appant-design-propro v4tssimpleantd@4

���������������������

���������������������������

yarn create @umijs/umi-app sub-app-1

���������

������qiankun

yarn add qiankun

������@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

���������������

���������

��� config/config.ts ���������������������������������������������

������������������������������sub-app-1

������������������������8001

{  ...  qiankun: {    master: {      apps: [        {          name: 'sub-app-1',          entry: '//localhost:8001',        },      ],    },  },}

���������������������������

������������������������������������������

��� config/config.ts ������������������������������������ routes ������������������������

{  name: 'sub-app-1',  icon: 'smile',  path: '/sub-app-1',  microApp: 'sub-app-1',},

������������

������������������������������������������������������������������ config/config.ts ���������

���������

������@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

������������������������

���������

��� .umirc.ts ������������������������������

qiankun: {

 slave: {}

}

������������������

import { defineConfig } from 'umi';export default defineConfig({  nodeModulesTransform: {    type: 'none',  },  routes: [    { path: '/', component: '@/pages/index' },  ],  qiankun: {   slave: {}  }});

������������������

������ package.json ��������������������������������� name ���������������������

������������������������������

���������

��� src/app.ts ������������������������app.ts ���������������������������������������

export const qiankun = {  // ������������������  async bootstrap(props) {    console.log('app1 bootstrap', props);  },  // ������ render ������������  async mount(props) {    console.log('app1 mount', props);  },  // ������������������������  async unmount(props) {    console.log('app1 unmount', props);  },};

������

���������������

���������������

Github���������

������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

TODO

• ���������������������������������������������������������������������������blog

���������