本篇文章将讲述和记录如何使用Umi4及UmiMax的qiankun微前端应用！这里主要包括父应用以及子应用的创建，一步步实践记录，希望能够对你有帮助

教程开始

创建父应用

pnpm create umi
可以选择antdprodesign（默认Umimax）或者simple（默认Umi4）

1. 在父应用配置子应用信息

按照官方文档我们在父应用配置子应用的信息。
这里文档说的清楚，注册子应用有两种，这里先展示第一种，插件注册子应用。

官网这里使用了.umirc.ts配置，而在我们创建项目的时候我们已经把这个东西拆成了config.ts，我们在config.ts同级目录下创建qiankun配置文件，内容如下

const qiankun = {
  master: {
    apps: [
      {
        name: 'app1',
        entry: '//localhost:7001', //默认http，如果需要家https手动配置加上即可
      },
    ],
  },
};
export default qiankun;

然后在config中引入配置

子应用创建和配置

1. 创建子应用

使用npm create umi umi-child-app命令创建一个子应用，这里选择antd desugb pro框架。

2. 配置npm run start 命令，将子应用运行在7001端口
   在package.json中配置 “start”: “set PORT=7001 && max dev”
   
   或者也可以在.env文件下输入PORT=7001,默认会自动绑定env文件的端口号

3. 启动子应用是这个样子
   

4.删除菜单以及菜单内容

首先在app.ts加入菜单以下代码，隐藏我们的菜单

 headerRender: false,
  footerRender: false,
  menuRender:false,

路由我们也简单删除，做最简单操作

5.在app.ts导出qiankun的生命周期。

老规矩得看qiankun文档。这里官方文档写的不清楚，umi也写得不清楚。可以按我这里来

将qiankun的生命周期代码写入app.ts文件中

export const qiankun = {
  async bootstrap() {
    console.log('react app bootstraped');
  },

  /**
   * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
   */
  async mount(props: any) {
    console.log('react app mount', props);
  },

  /**
   * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
   */
  async unmount(props: any) {
    console.log('react app unmount', props);
  },
};

5.在配置文件.umirc.ts中配置qiankun。

 qiankun:{
    slave:{}
  },

这个时候启动不了项目的，会报错，这个时候我们需要在package.json把Name加上！！
这个时候启动不了项目的，会报错，这个时候我们需要在package.json把Name加上！！
这个时候启动不了项目的，会报错，这个时候我们需要在package.json把Name加上！！

这个Name和我们的子应用Name一致，或者说和路由一致

我们最后单独运行这个子应用是这样的，可以看到路由的base路径是app1。

父应用中引入子应用

查看官方文档！！引入子应用，这里文档也说明提供了三种方式，我们先玩明白第一种，路由！

路由绑定引入子应用

首先我们在父应用菜单添加我们子应用的入口，这里在路由添加一个子应用菜单就可以

当我们点击进去的时候，我们就会发现，我们的子应用已经成功嵌入到我们的父应用中了。

完美！！！ 什么逻辑呢？请看下图，我们layout就是我们整个父应用布局，比如菜单之类的，下面嵌套了一个Outlet,这个类似于Vue的router-view一个道理。把我们的子应用当作一个路由在这里展示，所以我们的子应用也就展示在下面了。

注意：这里选择的是主应用和子应用都是umimax的也就是antdesignpro选项，如果子应用中选择了simple选项的话在配置的时候会遇到这样的错误

需要安装pnpm i @umijs/plugins 插件并在.umiric的文件中加入插件plugins: [‘@umijs/plugins/dist/qiankun’],

参考：https://juejin.cn/post/7342765395902464009#heading-12