当前文档对应 qiankun 3.0(RC),安装请使用 npm i qiankun@rc;2.x 文档见 v2 站点
Skip to content

生态概览

qiankun 核心运行时通过 loadMicroApp 加载和管理微应用实例。官方配套包用于创建项目、配置微应用构建流程和集成框架组件。

官方包

用途适用场景
qiankun核心运行时和 loadMicroApp API主应用需要直接管理实例生命周期时
@qiankunjs/bundler-pluginVite 与 Webpack 构建集成将现有项目改造为微应用时
@qiankunjs/reactReact <MicroApp> 组件由 React 组件生命周期管理实例时
@qiankunjs/vueVue <MicroApp> 组件由 Vue 组件生命周期管理实例时

应用代码不应直接依赖文档未列出的内部工作区包。

选择接入方式

  • 直接调用 loadMicroApp:默认方式,适用于需要直接管理实例生命周期的主应用。
  • React 或 Vue <MicroApp>:在组件树中以声明式方式加载微应用,内部仍调用 loadMicroApp
  • registerMicroApps + start:仅用于 URL 完全决定应用激活状态的路由驱动方案。

以上三种接入方式均使用相同的微应用 HTML 入口、生命周期和隔离机制。

创建新项目

qiankun 以 Agent skill 的形式提供项目创建能力——安装 skill 后,由 coding agent 按官方约定生成项目:

bash
npx skills add umijs/qiankun

安装后向 agent 描述目标即可,它能生成使用 loadMicroAppMicroApp 组件的主应用,以及 React 或 Vue 微应用。不使用 agent 时,可按教程手动搭建。

接入已有微应用

使用 @qiankunjs/bundler-plugin 生成符合要求的 HTML 入口,并根据构建工具选择相应指南:

插件的导出、选项和兼容范围参见 构建插件参考

在框架组件中加载

React 和 Vue 绑定会创建容器、调用 loadMicroApp、传递 props,并在组件销毁时卸载实例:

使用组件封装并不会改变微应用契约。微应用仍应渲染到 props.container,并在 unmount 中释放自己的资源。

下一步

基于 MIT 协议发布