基座SDK

该基座SDK主要是提供给基座去集成使用。

1. 安装和使用

pnpm add @mfejs/mfapp

创建基座并启动加载。

import { createBay } from '@mfejs/mfapp'
const bay = createBay({
    apps: [
        {
            container: '#container',
            name: 'vue3子应用',
            entry: 'http://127.0.0.1:8090/',
            activeRule: '/vue3-app/'
        },
        {
            container: '#container',
            name: 'vue2父应用',
            entry: 'http://localhost:8095/',
            activeRule: '/vue2-parent-app/'
        },
        {
            container: '#container',
            name: 'vue3子应用2',
            entry: 'http://localhost:8092/',
            activeRule: '/vue3-app2/'
        },
    ]
});
bay.start();

2. API

createBay(options: BayOptions)

创建基座实例

function createBay(options: BayOptions): IBay

基座参数选项BayOptions如下所示：

export interface BayOptions {
    /**
     * 基础路径, 默认从 process.env.MAPP_BASE_URL 中获取，如果没有则使用 /
     */
    baseUrl?: string;
    /**
     * 页面实现
     */
    pages?: Partial<BuiltinPages>;
    /**
     * 微应用注册
     */
    apps: MicroApp[];
    /**
     * 自定义路由
     */
    routes?: RouteRecordRaw[];
    /**
     * 基座钩子
     */
    hooks?: Partial<BayHooks>;
    /**
     * 基座就绪断言
     * 返回一个 promise, 表示基座已经就绪，基座就绪后子应用才会开始挂载
     */
    bayReady?: () => Promise<void>;
    /**
     * 网络拦截器，可以用于检测 AJAX/fetch 的请求和响应
     * 你也可以通过 registerNetworkInterceptor 方法来注册
     */
    networkInterceptors?: INetworkInterceptorRegister[];
    /**
     * 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理
     */
    excludeAssetFilter?: ExcludeAssetFilter;
    /**
     * 根组件。将传递给 createApp
     * 必须携带 RouterView
     */
    rootComponent?: Component;
}

getBay()

获取基座实例

function getBay(): IBay

状态管理

前端状态管理机制提供多模块管理能力，主应用和子应用都可以在模块管理中创建模块state、actions和modules。