微前端学习

将多个独立的web应用联合在一起，提供统一接口，使用微前端框架内嵌到主应用里面。
是什么时候用：比如公司有人用vue有人用react的时候，老项目更新迭代
主框架不限制接入应用的技术栈
运行时状态隔离

micro-app

官网

少手最低，主应用只需要配置路由，页面直接引入

qiankun

官网

基于single-spa
需要在微应用里面引入三个生命周期，子应用需要修改

1.下载npm i qiankun -S

2.主应用配置路由

//应用文件目录
myapp文件夹————主应用：端口号3010
mychild1文件夹————子应用：3011
mychild2文件夹————子应用：3012
1
2
3
4

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'mychild1', // app name registered
    entry: '//localhost:3011',
    container: '#mychild1',
    activeRule: '/mychild2',
  },
 {
    name: 'mychild2', // app name registered
    entry: '//localhost:3012',
    container: '#mychild2',
    activeRule: '/mychild2',
  },
]);

start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.子应用src目录下添加public-path.js文件

每个子应用都要加

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
1
2
3

4.vue子应用配置

入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

vue.config.js设置

看官网

5.react子应用配置

6.子应用对应生命周期钩子

export async function bootstrap() {//初始化调用一次
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}
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

7.子应用进来需要挂载点

在主应用中
app.vue

<div id="mychild1"></div>
<div id="mychild2"></div>
1
2

8.注意静态资源图片不显示

//子应用的main.js看是否添加了这一行
//在顶层引入
import './public-path';
1
2
3

9.主应用向子应用传值

//主应用
  {
    name: 'mychild1', // app name registered
    entry: '//localhost:3011',
    container: '#mychild1',
    activeRule: '/mychild2',
    props:{
    	name:'我是数据'
	}
  },
1
2
3
4
5
6
7
8
9
10

//子应用，在钩子函数中接收
export async function mount(props) {
  props就是数据
}
1
2
3
4

如果主应用的数据也是后面加载出来的，initGlobalState
官网

10.子应用更改父应用数据

//子应用

v3写法

b站视频

single-spa

添加链接描述