85 |
86 |
87 |
88 |
89 |
90 | );
91 | };
92 |
93 | export default LoadMicroApp;
94 |
--------------------------------------------------------------------------------
/packages/main/src/services/demo/UserController.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // 该文件由 OneAPI 自动生成，请勿手动修改！
3 | import { request } from '@umijs/max';
4 |
5 | /** 此处后端没有提供注释 GET /api/v1/queryUserList */
6 | export async function queryUserList(
7 | params: {
8 | // query
9 | /** keyword */
10 | keyword?: string;
11 | /** current */
12 | current?: number;
13 | /** pageSize */
14 | pageSize?: number;
15 | },
16 | options?: { [key: string]: any },
17 | ) {
18 | return request
('/api/v1/queryUserList', {
19 | method: 'GET',
20 | params: {
21 | ...params,
22 | },
23 | ...(options || {}),
24 | });
25 | }
26 |
27 | /** 此处后端没有提供注释 POST /api/v1/user */
28 | export async function addUser(
29 | body?: API.UserInfoVO,
30 | options?: { [key: string]: any },
31 | ) {
32 | return request('/api/v1/user', {
33 | method: 'POST',
34 | headers: {
35 | 'Content-Type': 'application/json',
36 | },
37 | data: body,
38 | ...(options || {}),
39 | });
40 | }
41 |
42 | /** 此处后端没有提供注释 GET /api/v1/user/${param0} */
43 | export async function getUserDetail(
44 | params: {
45 | // path
46 | /** userId */
47 | userId?: string;
48 | },
49 | options?: { [key: string]: any },
50 | ) {
51 | const { userId: param0 } = params;
52 | return request(`/api/v1/user/${param0}`, {
53 | method: 'GET',
54 | params: { ...params },
55 | ...(options || {}),
56 | });
57 | }
58 |
59 | /** 此处后端没有提供注释 PUT /api/v1/user/${param0} */
60 | export async function modifyUser(
61 | params: {
62 | // path
63 | /** userId */
64 | userId?: string;
65 | },
66 | body?: API.UserInfoVO,
67 | options?: { [key: string]: any },
68 | ) {
69 | const { userId: param0 } = params;
70 | return request(`/api/v1/user/${param0}`, {
71 | method: 'PUT',
72 | headers: {
73 | 'Content-Type': 'application/json',
74 | },
75 | params: { ...params },
76 | data: body,
77 | ...(options || {}),
78 | });
79 | }
80 |
81 | /** 此处后端没有提供注释 DELETE /api/v1/user/${param0} */
82 | export async function deleteUser(
83 | params: {
84 | // path
85 | /** userId */
86 | userId?: string;
87 | },
88 | options?: { [key: string]: any },
89 | ) {
90 | const { userId: param0 } = params;
91 | return request(`/api/v1/user/${param0}`, {
92 | method: 'DELETE',
93 | params: { ...params },
94 | ...(options || {}),
95 | });
96 | }
97 |
--------------------------------------------------------------------------------
/packages/main/src/services/demo/index.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // 该文件由 OneAPI 自动生成，请勿手动修改！
3 |
4 | import * as UserController from './UserController';
5 | export default {
6 | UserController,
7 | };
8 |
--------------------------------------------------------------------------------
/packages/main/src/services/demo/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // 该文件由 OneAPI 自动生成，请勿手动修改！
3 |
4 | declare namespace API {
5 | interface PageInfo {
6 | /**
7 | 1 */
8 | current?: number;
9 | pageSize?: number;
10 | total?: number;
11 | list?: Array>;
12 | }
13 |
14 | interface PageInfo_UserInfo_ {
15 | /**
16 | 1 */
17 | current?: number;
18 | pageSize?: number;
19 | total?: number;
20 | list?: Array;
21 | }
22 |
23 | interface Result {
24 | success?: boolean;
25 | errorMessage?: string;
26 | data?: Record;
27 | }
28 |
29 | interface Result_PageInfo_UserInfo__ {
30 | success?: boolean;
31 | errorMessage?: string;
32 | data?: PageInfo_UserInfo_;
33 | }
34 |
35 | interface Result_UserInfo_ {
36 | success?: boolean;
37 | errorMessage?: string;
38 | data?: UserInfo;
39 | }
40 |
41 | interface Result_string_ {
42 | success?: boolean;
43 | errorMessage?: string;
44 | data?: string;
45 | }
46 |
47 | type UserGenderEnum = 'MALE' | 'FEMALE';
48 |
49 | interface UserInfo {
50 | id?: string;
51 | name?: string;
52 | /** nick */
53 | nickName?: string;
54 | /** email */
55 | email?: string;
56 | gender?: UserGenderEnum;
57 | }
58 |
59 | interface UserInfoVO {
60 | name?: string;
61 | /** nick */
62 | nickName?: string;
63 | /** email */
64 | email?: string;
65 | }
66 |
67 | type definitions_0 = null;
68 | }
69 |
--------------------------------------------------------------------------------
/packages/main/src/utils/format.ts:
--------------------------------------------------------------------------------
1 | // 示例方法，没有实际意义
2 | export function trim(str: string) {
3 | return str.trim();
4 | }
5 |
--------------------------------------------------------------------------------
/packages/main/src/utils/helper.ts:
--------------------------------------------------------------------------------
1 | import {history} from "@umijs/max";
2 |
3 |
4 | export async function customFetch(url: string, ...args: any) {
5 | // 拦截子应用加载资源失败的情况处理
6 | try {
7 | return await window.fetch(url, ...args);
8 | } catch (e) {
9 | // history.push('/404', {message: '微应用加载失败，请检查应用是否可运行'})
10 | }
11 | return {
12 | async text() {
13 | return '';
14 | },
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/main/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./src/.umi/tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/main/typings.d.ts:
--------------------------------------------------------------------------------
1 | import '@umijs/max/typings';
2 |
--------------------------------------------------------------------------------
/packages/sub-app-1/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
15 | [Makefile]
16 | indent_style = tab
17 |
--------------------------------------------------------------------------------
/packages/sub-app-1/.env:
--------------------------------------------------------------------------------
1 | PORT=5001
2 | BROWSER=none
3 |
--------------------------------------------------------------------------------
/packages/sub-app-1/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /npm-debug.log*
6 | /yarn-error.log
7 | /yarn.lock
8 | /package-lock.json
9 |
10 | # production
11 | /dist
12 |
13 | # misc
14 | .DS_Store
15 |
16 | # umi
17 | /src/.umi
18 | /src/.umi-production
19 | /src/.umi-test
20 | /.env.local
21 |
--------------------------------------------------------------------------------
/packages/sub-app-1/.prettierignore:
--------------------------------------------------------------------------------
1 | **/*.md
2 | **/*.svg
3 | **/*.ejs
4 | **/*.html
5 | package.json
6 | .umi
7 | .umi-production
8 | .umi-test
9 |
--------------------------------------------------------------------------------
/packages/sub-app-1/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "all",
4 | "printWidth": 80,
5 | "overrides": [
6 | {
7 | "files": ".prettierrc",
8 | "options": { "parser": "json" }
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/packages/sub-app-1/.umirc.ts:
--------------------------------------------------------------------------------
1 | import {defineConfig} from 'umi';
2 |
3 | export default defineConfig({
4 | nodeModulesTransform: {
5 | type: 'none',
6 | },
7 | theme: {
8 | "primary-color": "#ea1244"
9 | },
10 | mfsu: false,
11 | antd: {},
12 | routes: [
13 | {
14 | path: '/theme',
15 | name: 'theme',
16 | component: '@/pages/theme',
17 | },
18 | {
19 | path: '/',
20 | component: '@/layouts/index',
21 | routes: [
22 | {
23 | path: '/one',
24 | name: 'one',
25 | component: '@/pages/one',
26 | },
27 | {
28 | path: '/two',
29 | name: 'two',
30 | component: '@/pages/two',
31 | },
32 | {
33 | name: 'micro-3',
34 | path: '/sub-app-3',
35 | microApp: 'sub-app-3',
36 | },
37 | {
38 | path: '/',
39 | redirect: '/one'
40 | },
41 | ]
42 | },
43 |
44 | ],
45 | fastRefresh: {},
46 | qiankun: {
47 | master: {
48 | // 注册子应用信息
49 | apps: [
50 | {
51 | name: 'sub-app-2',
52 | entry: '//localhost:5002',
53 | },
54 | {
55 | name: 'sub-app-3',
56 | entry: '//localhost:5003',
57 | },
58 | ],
59 | },
60 | slave: {}, //微应用必须配置
61 | },
62 | runtimeHistory: {}, // 开始运行时history功能
63 | mountElementId: 'micro-app-1', // 容器ID
64 | base: '/', // umi微应用独立访问需要配置这个参数, 否则默认获取package.name作为base
65 | // publicPath: `/${packageName}/`,
66 | // outputPath: `./dist/${packageName}`,
67 | // hash: true,
68 | });
69 |
--------------------------------------------------------------------------------
/packages/sub-app-1/README.md:
--------------------------------------------------------------------------------
1 | # umi project
2 |
3 | ## Getting Started
4 |
5 | Install dependencies,
6 |
7 | ```bash
8 | $ yarn
9 | ```
10 |
11 | Start the dev server,
12 |
13 | ```bash
14 | $ yarn start
15 | ```
16 |
--------------------------------------------------------------------------------
/packages/sub-app-1/mock/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xoptimal/qiankun-demo/343568f12490d33967acff0636bfac9fe25de293/packages/sub-app-1/mock/.gitkeep
--------------------------------------------------------------------------------
/packages/sub-app-1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sub-app-1",
3 | "scripts": {
4 | "dev": "umi dev",
5 | "build": "umi build",
6 | "postinstall": "umi generate tmp",
7 | "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
8 | "test": "umi-test",
9 | "test:coverage": "umi-test --coverage"
10 | },
11 | "gitHooks": {
12 | "pre-commit": "lint-staged"
13 | },
14 | "lint-staged": {
15 | "*.{js,jsx,less,md,json}": [
16 | "prettier --write"
17 | ],
18 | "*.ts?(x)": [
19 | "prettier --parser=typescript --write"
20 | ]
21 | },
22 | "dependencies": {
23 | "@ant-design/icons": "^4.7.0",
24 | "@umijs/plugin-antd": "^0.15.0",
25 | "@umijs/plugin-initial-state": "^2.4.0",
26 | "@umijs/plugin-model": "^2.6.2",
27 | "antd": "^4.22.3",
28 | "lodash": "^4.17.21",
29 | "path-to-regexp": "^6.2.1",
30 | "qiankun": "^2.7.4",
31 | "react": "17.x",
32 | "react-dom": "17.x",
33 | "umi": "3.x"
34 | },
35 | "devDependencies": {
36 | "@types/react": "^17.0.0",
37 | "@types/react-dom": "^17.0.0",
38 | "@umijs/plugin-qiankun": "^2.39.2",
39 | "@umijs/test": "^3.5.32",
40 | "lint-staged": "^10.0.7",
41 | "prettier": "^2.2.0",
42 | "typescript": "^4.1.2",
43 | "yorkie": "^2.0.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/app.css:
--------------------------------------------------------------------------------
1 |
2 | .link {
3 | color: #ea1244;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/app.ts:
--------------------------------------------------------------------------------
1 | import './app.css';
2 | import config from "@/utils/qiankunConfig";
3 |
4 | export const qiankun = config.qiankun
5 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/layouts/index.less:
--------------------------------------------------------------------------------
1 | #components-layout-demo-top-side .logo {
2 | float: left;
3 | width: 120px;
4 | height: 31px;
5 | margin: 16px 24px 16px 0;
6 | background: rgba(255, 255, 255, 0.3);
7 | }
8 |
9 | .ant-row-rtl #components-layout-demo-top-side .logo {
10 | float: right;
11 | margin: 16px 0 16px 24px;
12 | }
13 |
14 | .site-layout-background {
15 | background: #fff;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/layouts/index.tsx:
--------------------------------------------------------------------------------
1 | import {Descriptions, Layout, Menu, Typography} from "antd";
2 | import React, {useEffect, useState} from "react";
3 | import {useHistory} from "umi";
4 | import './index.less'
5 |
6 | const {Sider, Content} = Layout
7 | const {Title} = Typography;
8 |
9 | export default function BasicLayout(props: React.PropsWithChildren) {
10 |
11 | const menus = [
12 | {
13 | key: '/one',
14 | label: '应用间通信',
15 | },
16 | {
17 | key: '/two',
18 | label: '应用间嵌套',
19 | },
20 | {
21 | key: '/sub-app-3',
22 | label: '路由微应用嵌套',
23 | children: [
24 | {
25 | key: '/sub-app-3/one',
26 | label: '嵌套路由1',
27 | },
28 | {
29 | key: '/sub-app-3/three',
30 | label: '嵌套路由2',
31 | }
32 | ]
33 | },
34 | ]
35 |
36 | const history = useHistory()
37 |
38 | const [openKeys, setOpenKeys] = useState([])
39 |
40 | useEffect(() => {
41 | const arr = history.location.pathname.split('/')
42 | if (arr.length > 1) {
43 | setOpenKeys(arr.slice(1, arr.length - 1).map(path => '/' + path))
44 | }
45 | }, [])
46 |
47 | return (
48 |
49 |
50 |
62 |
63 |
64 | 当前微应用
65 |
66 | sub-app-1
67 | React
68 | 基于umi3 + @umijs/plugin-qiankun
69 | {history.location.pathname}
70 |
71 |
72 | {props.children}
73 |
74 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/pages/index.less:
--------------------------------------------------------------------------------
1 | .title {
2 | background: rgb(121, 242, 157);
3 | }
4 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import {useHistory} from "umi";
2 |
3 | export default function IndexPage(props: any) {
4 |
5 | const history = useHistory()
6 |
7 | const handleJump = (path: string) => {
8 | history.push(path)
9 | }
10 |
11 | return (
12 |
13 |
14 |
16 |
18 |
19 | {props.children}
20 |
39 | -
40 | 基于qiankun-apps的透传
41 |
42 |
43 |
44 | -
45 | 基于qiankun-initGlobalState
46 |
47 |
48 |
49 | -
50 | 基于umi-useModel
51 |
52 |
53 |
54 | -
55 | 基于umi-connectMaster
56 |
57 |
58 |
59 |
60 | 需要注意的是, umi通信方式仅能在主子都是umi上使用
61 |
62 |
63 |
64 | )
65 |
66 | }
67 |
--------------------------------------------------------------------------------
/packages/sub-app-1/src/pages/theme/index.js:
--------------------------------------------------------------------------------
1 | import {Button, Space} from "antd";
2 | import styles from './index.module.less'
3 |
4 | export default function Theme() {
5 |
6 | return (
7 |
8 |
antd-组件库样式
9 |
10 |
11 |
12 |
13 |
14 |
15 |
CSS Modules
16 |
我是Link
17 |
31 |
33 |
34 | 应用间嵌套
35 |
36 | -
37 | 微应用(sub-app-2)
38 | 基于umi-MicroApp组件
39 |
40 | callback(message, 2)}/>
44 |
45 |
46 |
47 | -
48 | 路由微应用(sub-app-3)
49 | 基于umi-MicroAppWithMemoHistory组件
50 |
51 | 加载微应用对应的路由页面, 需要配置base, 以及访问的路径
52 |
53 |
54 | callback(message, 3)}/>
59 |
60 | 需要注意的是url配置是无效的, 只会根据当前主应用下的路径是寻找微应用对应的页面
61 |
62 |
63 |
64 |
65 |
10 |
sub-app-1: {message}
11 |
sub-app-2: nice to meet you
12 |
13 | {replyMessage &&
sub-app-1: {replyMessage}
}
14 |
404
4 | }
5 |
--------------------------------------------------------------------------------
/packages/sub-app-3/src/pages/one/index.js:
--------------------------------------------------------------------------------
1 | export default function One(props) {
2 |
3 | console.log("props",props)
4 |
5 | return (
6 |
7 | 加载成功, 当前是sub-app-3/one 路由页面内容
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/sub-app-3/src/pages/theme/index.js:
--------------------------------------------------------------------------------
1 | import {Button, Space} from "antd";
2 | import styles from "./index.module.less";
3 |
4 | export default function Theme() {
5 |
6 | return (
7 |
8 |
antd-组件库样式
9 |
10 |
11 |
12 |
13 |
14 |
15 |
CSS Modules
16 |
我是Link
17 |
31 |
13 |
加载成功, 当前是sub-app-3/three 路由页面内容
14 |
15 |
9 |
sub-app-1: {message}
10 |
sub-app-3: nice to meet you
11 |
12 | {replyMessage &&
sub-app-1: {replyMessage}
}
13 |
7 | 
47 |
48 | ## Community
49 |
50 | * [交流和反馈群](https://fb.umijs.org/)
51 |
52 | ## LICENSE
53 |
54 | [MIT](./LICENSE)
55 |
--------------------------------------------------------------------------------
/packages/main/config/routes.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default [
4 | {
5 | path: '/',
6 | redirect: '/home',
7 | },
8 | {
9 | path: '/home',
10 | name: 'home',
11 | component: '/Home',
12 | icon: 'HomeOutlined'
13 | },
14 | {
15 | name: 'react-micro-app',
16 | path: '/sub-app-2',
17 | component: '/load',
18 | icon: 'SmileOutlined',
19 | },
20 | {
21 | name: 'react-router-micro-app',
22 | path: '/sub-app-3',
23 | microApp: 'sub-app-3',
24 | icon: 'SmileOutlined',
25 | routes: [
26 | {
27 | name: '嵌套路由1',
28 | path: '/sub-app-3/one',
29 | },
30 | {
31 | name: '嵌套路由2',
32 | path: '/sub-app-3/three',
33 | },
34 | {
35 | path: '/sub-app-3',
36 | redirect: '/sub-app-3/one',
37 | },
38 | ]
39 | },
40 | {
41 | name: 'umi3-micro-app',
42 | path: '/sub-app-1',
43 | layout: true,
44 | microApp: 'sub-app-1',
45 | icon: 'SmileOutlined',
46 | routes: [
47 | {
48 | name: '应用间通信',
49 | path: '/sub-app-1/one',
50 | },
51 | {
52 | name: '应用间嵌套',
53 | path: '/sub-app-1/two',
54 | },
55 | {
56 | name: '应用间通信',
57 | path: '/sub-app-1/sub-app-3',
58 | routes: [
59 | {
60 | name: '嵌套路由1',
61 | path: '/sub-app-1/sub-app-3/one',
62 | },
63 | {
64 | name: '嵌套路由2',
65 | path: '/sub-app-1/sub-app-3/three',
66 | },
67 | ]
68 | }
69 | ]
70 | },
71 | {
72 | path: '/theme',
73 | name: 'theme',
74 | component: '/Theme',
75 | icon: 'SmileOutlined'
76 | },
77 | {
78 | path: '/404',
79 | component: '/Exception404',
80 | },
81 | ]
82 |
--------------------------------------------------------------------------------
/packages/main/mock/userAPI.ts:
--------------------------------------------------------------------------------
1 | const users = [
2 | { name: 'Umi', nickName: 'U', gender: 'MALE' },
3 | { name: 'Fish', nickName: 'B', gender: 'FEMALE' },
4 | ];
5 |
6 | export default {
7 | 'GET /api/v1/queryUserList': (req: any, res: any) => {
8 | res.json({
9 | success: true,
10 | data: { list: users },
11 | errorCode: 0,
12 | });
13 | },
14 | 'PUT /api/v1/user/': (req: any, res: any) => {
15 | res.json({
16 | success: true,
17 | errorCode: 0,
18 | });
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/packages/main/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "author": "",
4 | "scripts": {
5 | "dev": "max dev",
6 | "build": "max build",
7 | "format": "prettier --cache --write .",
8 | "prepare": "husky install",
9 | "postinstall": "max setup",
10 | "setup": "max setup",
11 | "start": "npm run dev"
12 | },
13 | "dependencies": {
14 | "@ant-design/icons": "^4.7.0",
15 | "@ant-design/pro-components": "^1.1.3",
16 | "@umijs/max": "^4.0.9",
17 | "antd": "^4.20.7",
18 | "qiankun": "^2.7.4"
19 | },
20 | "devDependencies": {
21 | "@types/react": "^18.0.0",
22 | "@types/react-dom": "^18.0.0",
23 | "husky": "^8.0.1",
24 | "lint-staged": "^13.0.3",
25 | "prettier": "^2.7.1",
26 | "prettier-plugin-organize-imports": "^2",
27 | "prettier-plugin-packagejson": "^2",
28 | "typescript": "^4.1.2"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/main/src/access.ts:
--------------------------------------------------------------------------------
1 | export default (initialState: API.UserInfo) => {
2 | // 在这里按照初始化数据定义项目中的权限，统一管理
3 | // 参考文档 https://next.umijs.org/docs/max/access
4 | const canSeeAdmin = !!(
5 | initialState && initialState.name !== 'dontHaveAccess'
6 | );
7 | return {
8 | canSeeAdmin,
9 | };
10 | };
11 |
--------------------------------------------------------------------------------
/packages/main/src/app.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | .link {
4 | color: #2572E6;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/main/src/app.tsx:
--------------------------------------------------------------------------------
1 | // 运行时配置
2 | import {addGlobalUncaughtErrorHandler, initGlobalState, MicroAppStateActions} from "qiankun";
3 | import React, {useState} from "react";
4 | import {notification} from 'antd';
5 |
6 | import './app.css'
7 | import CustomErrorBoundary from "@/components/CustomErrorBoundary";
8 | import {getMicroAppRouteComponent} from "@@/plugin-qiankun-master/getMicroAppRouteComponent";
9 | import {customFetch} from "@/utils/helper";
10 |
11 | // 全局初始化数据配置，用于 Layout 用户信息和权限初始化
12 | // 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
13 | export async function getInitialState(): Promise<{ name: string }> {
14 | return {name: '@umijs/max'};
15 | }
16 |
17 | export const layout = () => {
18 |
19 | const [openKeys, setOpenKeys] = useState