<a name="f5444d4a"></a>
关键词：
- umi
- qiankun
- ant design pro
- 非动态注册子应用
- 非动态装载子应用（路由）
<a name="Lxdp4"></a>
背景
银行项目，需要一个前端中台，承载各项目组开发的应用，本篇文章是在工作实践后所写，还是具有一定可借鉴性的，至于官网已经有相关内容还专门写这么一篇，还是因为在实践中官网中的部分不完善，导致搭建过程异常坎坷。<br />
<a name="MRiA1"></a>
搭建主应用工程
主应用一般都是类后管平台，因此我使用 ant-deisng-pro 做主应用，使用以下命令创建：
参考：https://pro.ant.design/index-cn（页面底部）
1yarn create umi main-app 2 3ant-design-pro 4pro v4 5ts 6simple 7antd@4
<a name="sx1KV"></a>
搭建子应用工程
使用以下命令创建：
1yarn create @umijs/umi-app sub-app-1
<a name="2f3ES"></a>
主应用
<a name="L8BhU"></a>
安装qiankun
1yarn add qiankun
<a name="mrT2Y"></a>
安装@umijs/plugin-qiankun
1yarn add @umijs/plugin-qiankun -D
<a name="jrHjc"></a>
注册子应用
参考： https://umijs.org/zh-CN/plugins/plugin-qiankun#a-插件构建期配置子应用
在 config/config.ts 文件中，仿照以下代码进行添加：
子应用的工程名称是：sub-app-1 子应用的端口是：8001
1{ 2 ... 3 qiankun: { 4 master: { 5 apps: [ 6 { 7 name: 'sub-app-1', 8 entry: '//localhost:8001', 9 }, 10 ], 11 }, 12 }, 13}
<a name="cVoPX"></a>
装载子应用（路由）
现在还差个指向子应用的路由。<br />在 config/config.ts 文件中，仿照以下代码，在 routes 属性下进行添加：
1{ 2 name: 'sub-app-1', 3 icon: 'smile', 4 path: '/sub-app-1', 5 microApp: 'sub-app-1', 6},
<a name="jyNK8"></a>
示例文件
担心大家不会，此处还提供一个在已经配置好了的 config/config.ts 文件。<br />config.ts<br />
<a name="SzdIa"></a>
子应用
<a name="yYZ0L"></a>
安装@umijs/plugin-qiankun
1yarn add @umijs/plugin-qiankun -D
<a name="mbXGK"></a>
注册刚安装的插件
参考： https://umijs.org/zh-CN/plugins/plugin-qiankun#第一步：插件注册（configjs）
在 .umirc.ts 文件中添加以下代码：
qiankun: { slave: {} }
添加后如下：
1import { defineConfig } from 'umi'; 2 3export default defineConfig({ 4 nodeModulesTransform: { 5 type: 'none', 6 }, 7 routes: [ 8 { path: '/', component: '@/pages/index' }, 9 ], 10 qiankun: { 11 slave: {} 12 } 13}); 14
<a name="jAOao"></a>
修改工程名称
打开 package.json 文件，在第一行添加属性 name 及相应属性值。 <a name="79xOk"></a>
导出相应生命周期钩子
参考： https://umijs.org/zh-CN/plugins/plugin-qiankun#第二步：配置运行时生命周期钩子（可选）
<br />在 src/app.ts 中添加以下代码，app.ts 如果不存在则需要自行创建：
1export const qiankun = { 2 // 应用加载之前 3 async bootstrap(props) { 4 console.log('app1 bootstrap', props); 5 }, 6 // 应用 render 之前触发 7 async mount(props) { 8 console.log('app1 mount', props); 9 }, 10 // 应用卸载之后触发 11 async unmount(props) { 12 console.log('app1 unmount', props); 13 }, 14}; 15
<a name="mLm1w"></a>
效果
<a name="qOPh3"></a>
主应用效果
<a name="bd651872"></a>
子应用效果
<a name="7JYxx"></a>
Github源代码
https://github.com/blueju/umi-mirror-docs/tree/umi-micro-fe-platform
结语
以上配置均不是动态注册子应用、动态装载子应用（路由），但现实项目中更多需要的是动态注册子应用、动态装载子应用（路由）。<br />
<a name="6KQvj"></a>
TODO
- 写一篇如何动态注册子应用、动态装载子应用（路由）的blog
首发于语雀文档