@umijs/plugin-qiankun怎么使用
时间: 2023-07-25 07:03:43 浏览: 114
使用`@umijs/plugin-qiankun`插件,需要先安装它:
```shell
npm install @umijs/plugin-qiankun --save-dev
```
然后,在你的umijs项目中,打开 `.umirc.ts` 或者 `.umirc.js` 配置文件,添加插件到 `plugins` 数组中:
```javascript
export default {
// ...
plugins: [
// ...
'@umijs/plugin-qiankun',
],
// ...
};
```
接下来,您需要在配置文件中配置微前端应用的相关参数,例如子应用的入口、路由等等。以下是一些常用的配置项:
```javascript
export default {
qiankun: {
master: {
// 主应用启动后默认进入的子应用,通常为第一个注册的子应用
defaultApp: '',
// 主应用的生命周期钩子,在这里可以初始化主应用的状态
// 例如:在主应用挂载前,初始化一些全局状态
beforeLoad: () => {},
// 挂载主应用
mount: () => {},
// 卸载主应用
unmount: () => {},
},
// 注册的子应用列表
apps: [
{
// 子应用名称
name: '',
// 子应用的入口地址
entry: '',
// 子应用的路由前缀
base: '',
// 子应用启动后需要传递给子应用的参数
props: {},
// 子应用的生命周期钩子,在这里可以初始化子应用的状态
// 例如:在子应用挂载前,初始化一些子应用的状态
beforeLoad: () => {},
// 挂载子应用
mount: () => {},
// 卸载子应用
unmount: () => {},
},
// ... 其他子应用
],
// 是否开启调试模式,调试模式下会输出一些额外的信息
debug: true,
},
// ...
};
```
配置完成后,您可以使用 `umi build` 命令打包您的主应用和子应用。最后,您可以使用 `umi serve` 命令启动您的主应用,并在浏览器中查看微前端应用的效果。
阅读全文