-
Notifications
You must be signed in to change notification settings - Fork 7
01. 开发一个子应用
Vizards edited this page Nov 12, 2020
·
4 revisions
子应用分为「brother 级」和「children 级」,详见 children 级子应用与 brother 级子应用;
下面的示例基于新建一个 children 级子应用编写。
Ming > $ mkdir example && cd example
Ming/example > $ yarn create @umijs/umi-app
Ming/example > $ yarn install
Ming/example > $ yarn add @umijs/plugin-qiankun
import { defineConfig } from 'umi';
export default defineConfig({
routes: [
{ path: '/index', component: '@/pages/index' },
{ path: '/other', component: '@/pages/other' },
],
+ base: '/example',
+ qiankun: {
+ slave: {}
+ }
});
✅ 按 qiankun 规范,还应该为子应用的
package.json
配置一个 name
PORT=9000
Ming/example > yarn start
子应用可独立运行在 http://localhost:9000/example/index
Ming 的基座应用为 Ming/foundation,可以随意指定基座应用;
基座应用的基本配置见 @umijs/plugin-qiankun.
从 Ming 1.1.0 版本开始,将路由和应用配置集中到了
foundation/config/config.[env].ts
,方便配置。
const subApps: MingRoute[] = [
...
+ {
+ name: 'example',
+ microApp: 'example',
+ entry: 'http://localhost:9000',
+ path: '/example',
+ title: '示例',
+ wrappers: ['@/wrappers/children'],
+ privilegeId: '示例子项目',
+ routes: [
+ { path: '/example/index', title: '页面1', privilegeId: '示例子项目的页面1' },
+ { path: '/example/other', title: '页面2', privilegeId: '示例子项目的页面2' },
+ ],
+ },
...
]
注意:
-
按规范,请保证
name
字段在MingRoute[]
数组中唯一不重复。microApp
字段对应不同的子应用名称(允许重复) -
entry
字段应为子应用入口的index.html
文件,开发模式下可以直接配置为子应用的ip:[port]
-
path
字段指定了 example 子应用在微前端应用的路由前缀,与此对应的,需要将routes[]
中的path
添加此前缀 -
wrappers
指定了此应用外部包裹的 React 组件,可以指定 1 个或多个,至少指定一个:- 数组包含
@/wrappers/children
代表此应用为 children 级子应用 - 数组包含
@/wrappers/brother
代表此应用为 brother 级子应用
- 数组包含
-
title
用于一个 children 级子应用指定它自己在侧边栏的标题。brother 级子应用可不指定此字段 -
privilegeId
为权限标识,全局页面权限控制的设计思路详见 DOM 级权限控制
Ming/foundation > yarn start
基座应用默认启动在 http://localhost:8000
- 子应用页面 1 路径:http://localhost:8000/example/index
- 子应用页面 2 路径:http://localhost:8000/example/other
在子应用之间切换时,基座应用会自动显示 loading 动画。