前言

如果你是React技术栈，并且想快速搭建一个管理后台框架。可以考虑考虑umiJs

特点

1、开箱即用 (插件化开启功能实现)

2、企业级框架 (长期依赖稳定。不会突然崩溃)

3、插件集合 (将插件整合进umi插件，方便引入)

介绍一个umiJs微前端案例

单个umi应用比较容易，这里介绍一个用umiJs实现微前端案例。

这里umi实现使用的是micro-app方案，根据路由标识加载对应的微应用。

一、创建项目命令

安装 node (版本要求看具体版本文档) yarn (包管理工具看个人喜好)

创建一个空目录

mkdir myapp && cd myapp

进入目录初始化umi结构

yarn create umi

二、项目结构

主应用（base 基座）

子应用1（游戏实现）

子应用2（数据看板）

三、父子应用注册

1、父应用配置

在父应用（基座）的配置文件中注册子应用（插件式注册）

name 为子应用的名称，在引入子应用时需要使用到它；

entry 为子应用运行的 HTTP 地址

注册子应用以及子应用路由（路由绑定引入子应用）

microApp 字段，它的值为注册子应用的 name。

切换到对应路由后，Umi 将会使用 <MicroApp /> 组件渲染此子应用，并替换原来路由的 component

子应用挂载完回调配置

2、子应用配置

子应用配置qiankun插件开启，微前端插件就会自动在项目中创建好 qiankun 子应用所需的生命周期钩子和方法

提供生命周期钩子

3、通信配置

基于 useModel() 的通信

1、主应用透传数据（选择基于路由配置方法）

在父应用的 src/app.ts 里导出一个名为 useQiankunStateForSlave() 的函数，该函数的返回值将传递给子应用：。

2、子应用消费数据

子应用会自动生成一个全局的 Model，其命名空间为 @@qiankunStateFromMaster。通过 useModel() 方法，允许子应用在任意组件中获取并消费父应用透传的数据。

 import { useModel } from 'umi';
export default function Page() {
  const masterProps = useModel('@@qiankunStateFromMaster');
  return <div>{JSON.stringify(masterProps)}</div>;
}

或者可以通过高阶方法 connectMaster() 来获取并消费父应用透传的数据。类似useContext API.

import { connectMaster } from 'umi';
function MyPage(props) {
  return <div>{JSON.stringify(props)}</div>;
}
export default connectMaster(MyPage);

3、直接配置（不推荐）

总结

记一次umi功能的实现，有相关问题也可以评论，共同学习。

UmiJs 4 分享

前言

特点