微前端-qiankun使用

安装 qiankun#

yarn add qiankun ## 或者 npm i qiankun -S

2.主应用#

1. 新建平台主应用，抽离公用模块：登陆/注册(前提是统一登陆认证)、导航(顶导/侧导)、用户模块、通知模块等#

2. 主应用安装 qiankun 库，提供微应用注册表#

import { registerMicroApps, start } from 'qiankun'

const registerApp = () => {
	registerMicroApps([
		{
			name: 'app1',
			entry: 'http://localhost:8080/MicroApps/app1/',
			container: '#app1',
			activeRule: '/Microapp1',
		},
		{
			name: 'app2',
			entry: 'http://localhost:8080/MicroApps/app2/',
			container: '#app2',
			activeRule: '/Microapp2',
		},
	])
	start()
}
export default registerApp

3. 主应用提供微应用基座#

// 演示针对不同的子应用提供不同的基座，即不同的路由页面内加载不同的子应用,条件允许也可以使用相同基座
const MicroApps = [
	{
		path: '/Microapp1',
		component: () => import('@/views/MicroApp/app1.vue'),
	},
	{
		path: '/Microapp1/*',
		component: () => import('@/views/MicroApp/app1.vue'),
	},
	{
		path: '/Microapp2',
		component: () => import('@/views/MicroApp/app2.vue'),
	},
	{
		path: '/Microapp2/*',
		component: () => import('@/views/MicroApp/app2.vue'),
	},
]

3. 子应用#

子应用只需导出对应的生命周期钩子即可

1. 注册全局变量，通知主应用该应用属于 quankun 的微应用#

const packageName = require('./package.json').name

module.exports = {
	// 选项...
	publicPath: './',
	configureWebpack: {
		output: {
			library: `${packageName}-[name]`,
			libraryTarget: 'umd',
			jsonpFunction: `webpackJsonp_${packageName}`,
		},
	},
}

2. 导出生命周期钩子函数#

实例子应用 main.js：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

let instance = null
function render(props = {}) {
	const { container } = props

	instance = new Vue({
		render: (h) => h(App),
	}).$mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时 即不在微应用架构内运行时
if (!window.__POWERED_BY_QIANKUN__) {
	render()
}

export async function bootstrap() {
	console.log('[vue] vue app bootstraped')
}
export async function mount(props) {
	console.log('[vue] props from main framework', props)
	render(props)
}
export async function unmount() {
	instance.$destroy()
	instance.$el.innerHTML = ''
	instance = null
}

// 当微应用路由为history模式时，需要设置base
const router = new VueRouter({
	mode: 'history',
	base: window.__POWERED_BY_QIANKUN__ ? '/Microapp1/' : process.env.BASE_URL,
	routes,
})

4. 应用通讯#

1. 主应用 - 子应用#

// 主应用注册或者手动跳转子应用时通过props 向子应用传参
{
      name: "app1",
      entry: "http://localhost:8080/MicroApps/app1/",
      container: "#app1",
      activeRule: "/Microapp1",
      props: {
        user: {
          userName: "user",
          type: "admin",
          userid: "2434234fsddfe"
        }
      }
    }

// 子应用在生命周期钩子内可以接受到参数
export async function mount(props) {
	render(props)
}

2. 子应用 - 主应用#

// 主应用添加全局的状态监听
import { initGlobalState } from 'qiankun'
// 初始化 state, 监听的数据必须是state初始化时注册好的
const state = {
	from: null,
	data: null,
}
const actions = initGlobalState(state)
actions.onGlobalStateChange((state, prev) => {
	// state: 变更后的状态; prev 变更前的状态
	console.log(state, prev)
})

// 子应用 在mount时接收到props传过来的监听对象
export async function mount(props) {
  console.log("[vue] props from main framework", props);
  render(props);
  // props.onGlobalStateChange((state, prev) => {
  //   console.log("app1", state, prev);
  // })
}
。。。。
// 在需要的时候set state
props.setGlobalState({
      from: "app1",
      data: {
        a: 1,
      },
    });

3. 子应用 - 子应用#

// 子应用间的传参也可借助全局的状态监听
export async function mount(props) {
	console.log('[vue] props from main framework', props)
	render(props)
	props.onGlobalStateChange((state, prev) => {
		console.log('app1', state, prev)
	})
}
// 在子应用内添加监听方法onGlobalStateChange，当状态发生改变时会先触发全局的onGlobalStateChange事件，之后会依次触发当前激活状态的子应用内的onGlobalStateChange。

5. 注意事项#

1. 资源复用#

微应用配置 externals, 复用主应用依赖