基座与子应用：qiankun 接入实战

// 运行环境：基座是 Vue3 或 React 项目；先装 qiankun
// npm i qiankun
// src/micro.js（基座主文件）
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'orderApp',                 // 子应用唯一名
    entry: '//localhost:7100',        // 子应用跑起来的地址（开发期用端口）
    container: '#subapp',             // 基座里用于挂载子应用的 DOM 容器
    activeRule: '/order',             // 访问 /order* 时加载 orderApp
    props: { token: 'xxx', theme: 'dark' } // 传给子应用的初始化数据
  },
  {
    name: 'goodsApp',
    entry: '//localhost:7200',
    container: '#subapp',
    activeRule: '/goods'
  }
])

start() // 启动 qiankun，之后路由命中 activeRule 就自动挂载对应子应用

// 运行环境：子应用（以 Vue3 为例）；先装 qiankun（基座子应用都要 qiankun）
// src/micro-entry.js
import { createApp } from 'vue'
import App from './App.vue'

let app = null
function render(props = {}) {
  app = createApp(App)
  app.mount('#app') // 注意：容器 id 要和子应用自己 index.html 的挂载点一致
}

// 关键：导出三个生命周期钩子，基座在对应时机调用
export async function bootstrap() {
  console.log('[orderApp] bootstraped')
}
export async function mount(props) {
  console.log('[orderApp] props from 基座:', props.token) // 拿到基座传的 props
  render(props)
}
export async function unmount() {
  if (app) app.unmount() // 卸载时清掉 Vue 实例，避免内存泄漏/事件残留
}
// 独立运行时（直接 npm run dev 不被基座加载）也要能跑
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}