qiankun 微前端

微前端

一、使用背景

一个集成了不同业务的大平台，很多情况下都是将业务拆分成多个子系统进行开发，最后由平台提供统一的入口。而在当前快速变化的前端大环境下，此类平台需要考虑以下几个难题：

1. 怎样将不同业务子系统集中到一个大平台上，统一对外开放？
2. 如何给不同用户赋予权限让其能够访问平台的特定业务模块同时禁止其访问无权限的业务模块？
3. 如何快速接入新的子系统，并对子系统进行版本管理，保证功能同步？
4. 针对于老系统，如何实现从 Backbone 技术栈到 React 技术栈或 Vue 技术栈的平滑升级？

二、介绍

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

微前端的核心在于拆, 拆完后在合!

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

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

• **技术栈无关 **

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

• 独立开发、独立部署

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

• 独立运行时

  每个子应用之间状态隔离，运行时状态不共享

三、实战

1、主应用

安装qiankun依赖

npm i qiankun -S

1. 主程序

   在主应用切换子应用代码中，加入以下代码片段：

   <el-menu :router="true" mode="horizontal">
       <el-menu-item index="/home/index">首页</el-menu-item>
       <el-menu-item index="/zf">子应用</el-menu-item>
   </el-menu>
   <router-view v-show="$route.name"></router-view>
   <div v-show="!$route.name" id="zfSystemId"></div>
   
   

   在主应用main.js中引入以下代码片段：

   import {
        registerMicroApps,start,addGlobalUncaughtErrorHandler} from 'qiankun'
   
   let fullscreenLoading = null; // loading
   
   // 初始化vue
   new Vue({
        
     el: '#app',
     router,
     store,
     render: h => h(App)
   });
   
   const apps = [
     {
        
       name: 'zf system',  // 应用名
       entry: 'http://localhost:10000/ ',  // 默认会加载这个html，解析里面的js，动态执行（子应用必须支持跨域） fetch
       container: '#zfSystemId', // 容器名
       activeRule: <