Qiankun 从 0 到 1 核心步骤（4 大步）

---

🔹 第一步：搭建主应用（Main App）

1. 创建项目

npm create vite@latest main-app --template react/vue

2. 安装 Qiankun

npm install qiankun

3. 注册并启动微前端

import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',    // 子应用地址
    container: '#container',      // 渲染位置
    activeRule: '/app1',          // 激活路径
  },
]);

// 启动 qiankun
start();

4. 在页面中预留容器

<div id="container"></div>

---

🔹 第二步：改造子应用（Sub App）

1. 确保支持跨域开发服务器

// vite.config.js / vue.config.js / webpack.config.js
server: {
  port: 3001,
  cors: true,
  headers: { 'Access-Control-Allow-Origin': '*' }
}

2. 暴露生命周期钩子

// bootstrap、mount、unmount 必须导出
export async function bootstrap() {}

export async function mount(props) {
  ReactDOM.render(<App />, document.getElementById('root'));
}

export async function unmount() {
  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}

3. 兼容独立运行 & 被加载

if (!window.__POWERED_BY_QIANKUN__) {
  render(); // 独立运行时直接渲染
}

---

🔹 第三步：配置通信与隔离（可选但推荐）

功能	实现方式
样式隔离	使用 CSS Modules / BEM / 动态加载作用域类名
JS 沙箱	Qiankun 默认开启（proxy 沙箱）
主子通信	通过 props 传递 或 initGlobalState 全局状态

示例：

// 主应用中定义全局状态
const { onGlobalStateChange, setGlobalState } = initGlobalState({
  user: 'jack'
});

onGlobalStateChange((state) => console.log(state));

---

🔹 第四步：启动与验证

1. 分别启动主应用和子应用

cd main-app && npm run dev
cd sub-app  && npm run dev

2. 访问主应用

• • 打开 http://localhost:5173
  • 点击 /app1 路由 → 自动加载子应用

3. 检查控制台

• • 是否有跨域错误？
  • 生命周期是否正常触发？

---

🧩 总结：4 个核心动作

步骤	关键点
1️⃣ 主应用	安装 qiankun，注册 + 启动子应用
2️⃣ 子应用	导出生命周期，支持被动态加载
3️⃣ 跨域处理	开发服务允许 CORS
4️⃣ 联调验证	主应用路由触发加载，内容正确显示

---

🚫 常见坑点提醒

• ❌ 子应用没导出 mount → 加载失败
• ❌ 没判断 __POWERED_BY_QIANKUN__ → 独立运行报错
• ❌ 生产环境路径错误 → 配置 publicPath（Vue React 都需处理）
• ❌ 样式污染 → 推荐使用 scoped 或命名空间

💡 Vue 用户注意：设置 vue.config.js 中的 publicPath

const { name } = require('./package');
module.exports = {
  publicPath: window.__POWERED_BY_QIANKUN__ ? '/' : '/your-path/',
};

---

✅ 按照这四大步走完，你就完成了 Qiankun 从 0 到 1 的完整落地！

如需我提供一个最小可运行的 GitHub 示例结构，也可以继续告诉我 👇