Appearance
qiankun
官网地址
https://qiankun.umijs.org/zh/
1
构建基座
bash
vue create qiankun-base
qiankun-base
1
2
2
基座路由
html
<div id="app">
<div>
<router-link to="/">首页</router-link> | <router-link to="/vue">vue应用</router-link> |
<router-link to="/react">react应用</router-link>
</div>
<router-view v-show="$route.name"></router-view>
<div v-show="!$route.name" id="vue"></div>
<div v-show="!$route.name" id="react"></div>
</div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
注册子应用
qiankun-base
javascript
import {registerMicroApps,start} from 'qiankun'
const apps = [
{
name:'vueApp',
entry:'//localhost:10000',
container:'#vue',
activeRule:'/vue'
},
{
name:'reactApp',
entry:'//localhost:20000',
container:'#react',
activeRule:'/react'
}
]
registerMicroApps(apps);
start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
vue 子应用
bash
vue create qiankun-vue
1
javaScript
// qiankun-vue main.js
let instance = null;
function render(props) {
const { container } = props;
instance = new Vue({
router,
store,
render: h => h(App)
// 这里挂载自己的html 基座会拿到这个挂载后的html 将插入进去
}).$mount(container ? container.querySelector("#app") : "#app");
}
// 判断是够使用了乾坤
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
// 子组件的协议
export async function bootstrap() {}
export async function mount(props) {
render(props);
}
export async function unmount() {
instance.$destroy();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
打包配置 vue.config.js
javascript
module.exports = {
devServer: {
port: 10000,
headers: {
"Access-Control-Allow-Origin": "*"
}
},
configureWebpack: {
output: {
library: "vueApp",
libraryTarget: "umd"
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
react 子应用
bash
create-react-app qiankun-react
1
javascript
// qiankun-react src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
function render() {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {}
export async function mount() {
render();
}
export async function unmount() {
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
打包配置
yarn add react-app-rewired --save-dev
新建 config-overrides.js 重写 webpack
bash
"scripts": {
"start": "BROWSER=none react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
1
2
3
4
5
6
2
3
4
5
6
配置 .env 文件
PORT=20000
WDS_SOCKET_PORT=20000
1
2
2