背景:
一些大的项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,网上找了好多例子也少,记录下来后面供自己预览
qiankun 是一个基于 single-spa 的微前端实现库
umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
搭建主应用
yarn create @umijs/umi-app 安装umi脚手架
安装qiankun
1 | yarn add qiankun |
安装@umijs/plugin-qiankun
1 | yarn add @umijs/plugin-qiankun -D |
在主应用中注册子应用
在.umirc.ts 文件中 仿照以下代码进行添加
例如:
子应用的工程名称是:app-1
子应用的端口是:8001
这里端口到时候要规定好
1 | { |
在主应用中装载子应用(路由)
指向子应用的路由。
在 config/config.ts 文件中,仿在 routes 属性下进行添加:
1 | { |
示例:这是我的.umirc.ts 文件配置 很简单
1 | import { defineConfig } from 'umi'; |
好了,这个时候我们的主应用就意见搭建好了。
搭建子应用
yarn create @umijs/umi-app 安装umi脚手架
安装qiankun
1 | yarn add @umijs/plugin-qiankun -D |
为了获得更好地本地开发及调试体验,我们建议您提前在子应用中指定应用启动的具体端口号,如通过.env指定
1 | PORT=8081 |
注册刚安装的插件
在 .umirc.ts 文件中添加以下代码:
1 | qiankun: { |
添加后如下:
1 | import { defineConfig } from 'umi'; |
修改工程名称
打开 package.json 文件,在第一行添加属性 name 及相应属性值。
如:
导出相应生命周期钩子
在 src/app.ts 中添加以下代码,app.ts 如果不存在则需要自行创建
1 | export const qiankun = { |
到了这里就可以了
这是我的文件
效果:
主应用
在主应用中通过路由访问子应用
子应用:
如果我们希望把子应用在父应用中当组件使用
可以这样:
1 | import styles from './index.less'; |
效果
如上面就当组件显示了
好了,到了这里,简单的qiankun使用就可以了
借鉴了这两位的
https://www.jianshu.com/p/d0f87e1dcacf
https://www.yuque.com/blueju/blog/huuie8