Vue + qiankun 快速实现前端微服务

本文介绍 Vue 项目如何实现前端微服务

一、前言

什么是微前端

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. – Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

更多关于微前端的相关介绍，推荐大家可以去看这几篇文章：

• Micro Frontends
• Micro Frontends from martinfowler.com
• 可能是你见过最完善的微前端解决方案
• 微前端的核心价值

qiankun

qiankun 是蚂蚁金服开源的一套完整的微前端解决方案。具体描述可查看 文档 和 Github。

下面将通过一个微服务Demo 介绍 Vue 项目如何接入 qiankun，代码地址：micro-front-vue

二、配置主应用

1. 使用 vue cli 快速创建主应用；
2. 安装 qiankun

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

3. 调整主应用 main.js 文件：具体如下：

import Vue from "vue"
import App from "./App.vue"
import router from "./router"

import {
    registerMicroApps, setDefaultMountApp, start } from "qiankun"
Vue.config.productionTip = false
let app = null;
/**
 * 渲染函数
 * appContent 子应用html内容
 * loading 子应用加载效果，可选
 */
function render({
    appContent, loading } = {
   }) {
   
	if (!app) {
   
		app = new Vue({
   
			el: "#container",
			router,
			data() {
   
				return {
   
					content: appContent,
					loading
				};
			},
			render(h) {
   
				return h(App, {
   
					props: {
   
						content: this.content,
						loading: this.loading
					}
				});
			}
		});
	} else {
   
		app.content = appContent;
		app.loading = loading