文章目录
qiankun是一个微前端js框架
简单使用
主应用
1. 安装 qiankun
注意我们只需要在主应用中安装qiankun,子应用中是不用的。
$ yarn add qiankun # 或者 npm i qiankun -S
2. 在主应用中注册微应用
vue项目在main.js中注册。
import {
registerMicroApps, start } from 'qiankun';
/**
* 路由监听
* @param {*} routerPrefix 前缀
*/
// function genActiveRule(routerPrefix) {
// console.log(location.pathname)
// return location => location.pathname.indexOf(routerPrefix);
// } //activeRule的配置函数,当然我们也可以直接配置字符串和其他规则,具体参考文档
registerMicroApps([
{
name: 'new-project', // 子应用名称
entry: '//localhost:8082', //子应用入口,就是单独访问子应用时的url,这里我把子应用配置在8082端口
container: '#container', // 子应用挂载的dom容器,我们把它写在主应用的app.vue中
// activeRule: genActiveRule("/app1"), //子应用触发路径,这里使用前面配置的函数
activeRule:"/app1" //当我们主应用的url含有app1时会触发子应用加载,为了方便触发,建议主应用路由使用history模式,在hash模式下,自动添加的#号会影响子应用触发(不知道为什么)
},
]);
//启动
start();
增加挂载子应用的盒子
app.vue
<template>
<div id="app">
<p>我是父应用</p>
<!-- 子应用容器 -->
<div id="container"></div>
</div>
</template>
微应用
微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。
1. 配置main.js
微应用需要在自己的入口 js 导出 bootstrap
、mount
、unmount
三个生命周期钩子,以供主应用在适当的时机调用。
main.js
import './public-path' // 注意需要引入public-path
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import routes from './router';
let router = null;
let instance = null;
function render(props = {
}) {
const {
container } = props;
router = new VueRouter({
base: '/app1', //这里要和在主应用配置的activeRule一样
mode: 'history',
routes,
});
instance = new Vue({
router,
render: h => h(App),
}).$mount(container ? container.querySelector(