步骤 1: 初始化主应用 (React)

首先，使用 create-react-app 初始化一个 React 应用，这个应用将作为主应用：

npx create-react-app main-app
cd main-app
npm start

步骤 2: 创建 Vue 微应用

然后，使用 Vue CLI 创建一个 Vue 应用，这个应用将作为一个微应用：

vue create vue-micro-app
cd vue-micro-app
npm run serve

步骤 3: 配置 qiankun

在主应用中安装 qiankun 并进行配置：

npm install qiankun --save
在 main-app/src/index.js 中：

import React from 'react';
import ReactDOM from 'react-dom';
import { qiankun } from 'qiankun';
import './index.css';
import App from './App';

qiankun().bootstrap(() => {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
});

步骤 4: 注册 Vue 微应用

在主应用中，使用 qiankun 提供的 API 注册 Vue 微应用：

// main-app/src/App.js
import React from 'react';
import { registerMicroApps, start } from 'qiankun';

const App = () => {
  // 注册 Vue 微应用
  registerMicroApps([
    {
      name: 'vueMicroApp', // 微应用名称
      entry: '//localhost:4200', // Vue 微应用的入口地址
      container: '#vue-container', // 微应用挂载点的 CSS 选择器
      activeRule: '/vue-micro-app', // 微应用的路由规则
    },
  ]);

  return (
    <div>
      <h1>React 主应用</h1>
      <div id="vue-container">Vue 微应用将挂载到这里</div>
    </div>
  );
};

export default App;

// 启动 qiankun
start();

确保在 main-app/public/index.html 中添加一个容器元素：

<div id="root">
  <!-- React 主应用内容 -->
  <div id="vue-container"></div>
</div>

步骤 5: 配置 Vue 微应用

在 Vue 微应用中，安装 qiankun 并进行配置：

cd vue-micro-app
npm install qiankun --save

在 vue-micro-app/src/main.js 中：

import Vue from 'vue';
import App from './App.vue';
import { bootstrap, mount, unmount } from 'qiankun';

// Vue 微应用的 bootstrap、mount 和 unmount 生命周期钩子
bootstrap(Vue, {
  Vue,
  App,
  // 其他配置...
});

mount(() => {
  // 渲染微应用
});

unmount(() => {
  // 卸载微应用
});

步骤 6: 启动应用

启动 React 主应用和 Vue 微应用：

# 在两个不同的终端中运行
cd main-app
npm start

cd vue-micro-app
npm run serve

通过浏览器访问 React 主应用，并在其中看到 Vue 微应用的内容。