微前端阿里qiankun、京東micro-app、騰訊wujie配置父子應(yīng)用
一:阿里qiankun
基于 single-spa,采用了微前端的技術(shù)方案,通過主應(yīng)用來管理和加載多個子應(yīng)用。主應(yīng)用和子應(yīng)用之間通過自定義協(xié)議通信,實現(xiàn)了跨應(yīng)用的狀態(tài)共享。
1、主main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: '子應(yīng)用名稱',
entry: '子應(yīng)用入口URL',
container: '#子應(yīng)用掛載容器',
activeRule: '/子應(yīng)用路由前綴',
},
// 可以添加更多子應(yīng)用
]);
start();
2、子main.js
import { createApp } from 'vue';
import App from './App.vue';
let app = null;
function render() {
app = createApp(App);
app.mount('#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
// 子應(yīng)用啟動前的操作
}
export async function mount(props) {
// 子應(yīng)用掛載前的操作
render();
}
export async function unmount() {
// 子應(yīng)用卸載前的操作
app.unmount();
app = null;
}
3、子package.json
{
"name": "sub-app",
"version": "1.0.0",
"qiankun": {
"master": {
"defer": true
}
}
}
二、京東micro-app和騰訊wujie
基于 Web Components 技術(shù)實現(xiàn),wujie為輕量級的微前端框架,micro-app為相對完整的微前端解決方案,提供了更多的功能和生態(tài)支持,如狀態(tài)管理、路由管理等。
使用方法一致,替換庫即可
1、主mian.js
import { createApp } from 'micro-app';
import App from './App.vue';
createApp(App).start();
2、子main.js
import { createApp } from 'micro-app';
import App from './App.vue';
createApp(App).start();
3、子package.js
{
"name": "sub-app",
"version": "1.0.0",
"micro-app": {
"type": "sub-app"
}
}

浙公網(wǎng)安備 33010602011771號