qiankun基础案例

给你一束花吧

于 2024-03-17 12:08:09 发布

阅读量167

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43855869/article/details/136486966

版权

一个简单的基于 qiankun.js 的微前端案例。在这个案例中，我们将创建两个子应用（分别为 app1 和 app2），并通过主应用（main-app）来加载和管理它们。

创建子应用
app1

在 app1 的 src/main.js 中：

javascript

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App';  
  
let instance = null;  
  
function render() {  
  ReactDOM.render(React.createElement(App), document.getElementById('app1-container'));  
}  
  
if (!window.__POWERED_BY_QIANKUN__) {  
  render();  
}  
  
export async function bootstrap() {  
  console.log('app1 bootstraped');  
}  
  
export async function mount(props) {  
  console.log('app1 mounted', props);  
  render();  
  instance = ReactDOM.getRootNode(document.getElementById('app1-container'));  
}  
  
export async function unmount() {  
  console.log('app1 unmounted');  
  ReactDOM.unmountComponentAtNode(document.getElementById('app1-container'));  
  instance = null;  
}

app2

app2 的实现与 app1 类似

创建主应用
main-app

首先，安装 qiankun：

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

import { registerMicroApps, start } from 'qiankun';  
  
const apps = [  
  {  
    name: 'app1',  
    entry: '//localhost:3001', // 假设 app1 在本地 3001 端口运行  
    container: '#app1-container',  
    activeRule: '/app1',  
  },  
  {  
    name: 'app2',  
    entry: '//localhost:3002', // 假设 app2 在本地 3002 端口运行  
    container: '#app2-container',  
    activeRule: '/app2',  
  },  
];  
  
registerMicroApps(apps);  
  
start();

在 main-app 的 public/index.html 中：

html
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Main App</title>  
</head>  
<body>  
  <div id="app1-container"></div>  
  <div id="app2-container"></div>  
  <script src="src/main.js"></script>  
</body>  
</html>

运行应用
分别启动 app1 和 app2。
启动 main-app。
当你访问 /app1 路径时，app1 会被加载到对应的容器中；访问 /app2 路径时，app2 会被加载。

给你一束花吧

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
qiankun基础案例

一个简单的基于 qiankun.js 的微前端案例。在这个案例中，我们将创建两个子应用（分别为 app1 和 app2），并通过主应用（main-app）来加载和管理它们。app2 的实现与 app1 类似。
复制链接

扫一扫