diff --git a/README.md b/README.md index ba88d64..5aa5265 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,109 @@ export default { } ``` +在``内容块中以下面代码代替: + +```vue + + + + +
+
+``` + +`micro/apps.js`: + +```js +const apps = [ + /** + * name: 微应用名称 - 具有唯一性 + * entry: 微应用入口 - 通过该地址加载微应用 + * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 + * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 + */ + { + name: 'testMicro', + entry: '//192.168.0.87:7101', + container: '#frame', + activeRule: '/testMicro', + }, +] + +export default apps +``` + +`micro/index.js`: + +```js +// 一个进度条插件 +import NProgress from "nprogress"; +import "nprogress/nprogress.css"; +// import { message } from "ant-design-vue"; +import { registerMicroApps, initGlobalState, addGlobalUncaughtErrorHandler, start } from 'qiankun'; + +// 子应用注册信息 +import apps from "./apps"; + +/** + * 注册子应用 + * 第一个参数 - 子应用的注册信息 + * 第二个参数 - 全局生命周期钩子 + */ +registerMicroApps(apps, { + // qiankun 生命周期钩子 - 加载前 + beforeLoad: (app) => { + // 加载子应用前,加载进度条 + NProgress.start(); + console.log("[qiankun]: registerMicroApps beforeLoad", app.name); + return Promise.resolve(); + }, + // qiankun 生命周期钩子 - 挂载后 + afterMount: (app) => { + // 加载子应用前,进度条加载完成 + NProgress.done(); + console.log("[qiankun]: registerMicroApps afterMount", app.name); + return Promise.resolve(); + }, +}); + +/** + * 添加全局的未捕获异常处理器 + */ +addGlobalUncaughtErrorHandler((event) => { + console.error(event); + // 加载失败时提示 + // if (event.message && event.message.includes("died in status")) { + // message.error("[qiankun]: 子应用加载失败,请检查应用是否可运行"); + // } +}); + +// 初始化 state +const actions = initGlobalState({ + token: JSON.parse(localStorage.getItem('pro__Access-Token') || '{}') || {} +}); + +actions.onGlobalStateChange((state, prev) => { + // state: 变更后的状态; prev 变更前的状态 + console.log("[qiankun]: onGlobalStateChange ", state, prev); +}); +// actions.setGlobalState({ +// token: JSON.parse(localStorage.getItem('pro__Access-Token') || '{}') || {} +// }); +actions.offGlobalStateChange(); + +// 导出 qiankun 的启动函数 +export default start; +``` + +`main.js`: + +```js +import startQiankun from './micro'; + +startQiankun(); +``` + ## 编译 ```bash