实践说明

项目命名规范

• main/portal: 基座
• sub/partx: 子系统

示范一umi3.x

基于 qiankun2.x + umi3.x 的微前端解决方案

• umi3-main
• umi3-sub-realtime
• umi3-sub-user

主配置及跳转

在基座项目中设置

.umirc.ts

/*
 * @Author: samy
 * @email: yessz#foxmail.com
 * @time: 2021-05-13 15:42:23
 * @modAuthor: samy
 * @modTime: 2021-05-21 17:50:40
 * @desc: 配置
 * Copyright © 2015~2021 BDP FE
 */
import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  // 第一步：注册子应用；
  qiankun: {
    // 详细参考 API
    //qiankun微前端部分
    master: {
      apps: [
        {
          name: 'realtime', // 唯一 id
          entry: 'http://localhost:8001',
          // credentials:false,
          props: { samy1: 'umirc-test' }, ///主应用传递给子应用的数据
        },
        {
          name: 'user',
          entry: 'http://localhost:8002',
        },
      ],
      // sandbox:true,是否启用沙箱
      // routes:[],子应用运行时需要注册的微应用路由
      // prefetch:[],是否启用 prefetch 特性
    },
  },
  routes: [
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/', component: '@/pages/index' },
        // 第二步：装载子应用
        { path: '/realtime', microApp: 'realtime' }, //对应到上面的root上；
        {
          path: '/user',
          microApp: 'user',
          microAppProps: {
            autoSetLoading: true,
            // className: 'myContainer',
            // wrapperClassName: 'myWrapper',
          },
        },
      ],
    },
  ],
  proxy: {
    // qiankun微前端部分,中的接口代理
    '/api/realtime': {
      target: 'http://localhost:8001',
    },
    '/api/user': {
      target: 'http://localhost:8002',
    },
  },
});

在基座中跳转realtime，user项目

app.ts

export const layout = {
  title: 'WDP系统',
  menuDataRender: () => [
    {
      name: '实时引擎',
      path: '/realtime',
    },
    {
      name: '用户管理',
      path: '/user',
    },
  ],
};

参数数据传递给从应用；

//主应用设置
export function useQiankunStateForSlave() {
  const [masterState, setMasterState] = useState({samy:'from portal'});
  return {
    masterState,
    setMasterState,
  };
}

从配置及跳转

在umi3-sub-realtime项目中设置.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  base: 'realtime',
  // 嵌套子应用：子应用要跳转到其他子应用中；
  qiankun: {
    master: {
      apps: [
        {
          name: 'user',
          entry: 'http://localhost:8002',
        },
      ],
    },
    slave: {},
  },
  routes: [
    { path: '/', component: '@/pages/shopList' },
    { path: '/:shopId', component: '@/pages/shopDetail' },
  ],
});

接受主应用传递过来的参数；

import React from 'react';
import { useRequest, request, Link, useModel } from 'umi';
import { Table } from 'antd';

export default () => {
  const masterProps = useModel('@@qiankunStateFromMaster');
  const { data = [] } = useRequest(() => request('/api/realtime/list'));

  const columns = [
    {
      dataIndex: 'id',
      title: 'ID',
    },
    {
      dataIndex: 'name',
      title: '名称',
    },
    {
      dataIndex: 'address',
      title: '地址',
    },
    {
      dataIndex: 'id',
      title: '操作',
      render: (id: string) => <Link to={`/${id}`}>详情</Link>,
    },
  ];

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>从主应用中获取的数据：</h1>
      <div>{JSON.stringify(masterProps)}</div>
      <h1 style={{ marginBottom: 24 }}>商品列表</h1>
      <Table rowKey="id" columns={columns} dataSource={data} />
    </div>
  );
};

在umi3-sub-realtime项目中跳转user项目

import React, { useState } from 'react';
import { useRequest, request, MicroAppWithMemoHistory, Link } from 'umi';
export default ({ match }: any) => {
  const { shopId } = match.params;
      <Drawer
        title="用户管理"
        visible={visible}
        closable
        width={800}
        destroyOnClose
        onClose={() => { setVisible(false) }}
      >
        <MicroAppWithMemoHistory name="user" url='/' shopId={shopId} />
      </Drawer>
    </div>
  );
}

umi3-sub-user项目中配置.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  base: 'user',
  qiankun: {
    slave: {}
  },
  routes: [
    { path: '/', component: '@/pages/userList' },
    { path: '/:userId', component: '@/pages/userDetail' },
  ],
});

获取其他应用传递过来的参数；

import React from 'react';
import { useRequest, request, Link, connectMaster } from 'umi';
import { Table } from 'antd';

const UserList = (props: any) => {
  // 或者可以通过高阶组件 connectMaster 来获取主应用透传的 props
  const { shopId } = props;
  const { data = [] } = useRequest(() => request(`/api/user/list?shopId=${shopId}`));
  const columns = [
    {
      dataIndex: 'id',
      title: 'ID',
    },
    {
      dataIndex: 'name',
      title: '姓名',
    },
    {
      dataIndex: 'address',
      title: '住址',
    },
    {
      dataIndex: 'id',
      title: '操作',
      render: (id: string) => (
        <Link to={`/${id}`}>详情</Link>
      )
    },
  ];
  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>用户列表</h1>
      <Table rowKey="id" columns={columns} dataSource={data} />
    </div>
  );
}
export default connectMaster(UserList);

示范二umi2.x

基于 qiankun1.x + umi2.x 的微前端解决方案

• umi2-main
• umi2-sub-realtime
• umi2-sub-user

示范三vue3.x TODO

基于 qiankun2.x + vue3.x 的微前端解决方案

• vue3-main
• vue3-sub-realtime
• vue3-sub-user

示范四vue2.x

基于 qiankun2.x + vue2.x 的微前端解决方案

• vue2-main
• vue2-sub-realtime
• vue2-sub-user

示范五：技术栈交叉

• 基于 qiankun1.x + vue2.x + umi2.x 的微前端解决方案
• 基于 qiankun1.x + vue3.x + umi3.x 的微前端解决方案
• 基于 qiankun2.x + vue2.x + umi2.x + vue3.x + umi3.x 的微前端解决方案

参考链接

https://juejin.cn/post/6875462470593904653

https://juejin.cn/post/6844904185910018062

https://juejin.cn/post/6844904158085021704