微前端——qiankun

一. 什么是微前端

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

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

二. qiankun框架

文档地址 https://qiankun.umijs.org/zh

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 。

qiankun  孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

特性

• 📦 基于 single-spa 封装，提供了更加开箱即用的 API。
• 📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• 💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
• 🛡​ 样式隔离，确保微应用之间样式互相不干扰。
• 🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• ⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
• 🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

三. qiankun框架实例

准备建立三个项目实际操作，主要用的vue和react技术栈（不限技术栈）,qiankun-base充当主应用(主应用为vue)，qiankun-vue 和 qiankun-react 充当子应用。

1. 创建应用

1.创建基座

vue create qiankun-base

2.创建子应用1

vue create qiankun-vue

3.创建子应用2

create-react-app qiankun-react

2.项目配置

1、基座qiankun-base配置

项目创建好后我们首先进行主应用qiankun-base的配置，进入man.js文件进行配置，在main.js中加入以下代码，要注意的是，

entry 是我们两个子项目的域名和端口，我们必须确保两个子项目运行在这两个端口上面，container 就是我们的容器名，就是我们子应用挂载的节点，相当于Vue项目里面的app节点，activeRule 就是我们的激活路径，根据路径来显示不同的子应用
 

(1) 引入qiankun插件

npm i qiankun -S

(2) main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);


// 引入qiankun
import { registerMicr