微服务框架搭建

React demo

1.创建主应用

npx create-react-app main-app
cd main-app
npm install qiankun

2.注册子应用（主应用入口）

// main-app/src/App.js
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'vue-app', // 子应用名称entry: '//localhost:7100', // 子应用入口（开发环境）container: '#subapp-viewport', // 挂载容器activeRule: '/vue', // 路由匹配规则},
]);start(); // 启动乾坤

3.创建子应用 

vue create vue-app
cd vue-app
npm install vue-router

4.配置子应用（暴露生命周期钩子） 

// vue-app/src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';let instance = null;function render(props = {}) {const { container } = props;instance = new Vue({router,render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {render();
}// 乾坤生命周期钩子
export async function bootstrap() {console.log('Vue app bootstraped');
}
export async function mount(props) {render(props);
}
export async function unmount() {instance.$destroy();
}

5.配置子应用打包（vue.config.js）：

module.exports = {devServer: {port: 7100, // 确保与主应用注册的端口一致headers: {'Access-Control-Allow-Origin': '*', // 允许跨域},},configureWebpack: {output: {library: 'vueApp', // 库名称，需唯一libraryTarget: 'umd', // 模块化格式},},
};

实现应用间通信