如何利用qiankun快速搭建一个微前端项目

前言

小伙伴们大家好。前一篇文章跟大家分享了一些关于微前端的知识点，包括什么是微前端，为什么要用微前端以及如何实现一个微前端，在文章的最后我们还提到了能够实现微前端的两个库：single-spa和qiankun。今天我们就一qiankun+vue为例来实现一个简单的微前端。

qiankun是什么

• qiankun官方给出的解释是：qiankun是基于single-spa封装的一个库，旨在帮助大家能够更简单。更无痛的构建一个生产可用的微前端架构系统。
• qiankun有如下几个主要特点：
  • 简单易用，qiankun基于 single-spa 封装，并在此基础上提供了更加开箱即用的 API
  • 与技术栈无关，任意技术栈的应用均可使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架
  • HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单
  • 样式隔离，确保微应用之间样式互相不干扰
  • JS 沙箱，确保微应用之间 全局变量/事件 不冲突
  • 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度

为什么不用iframe

前端的小伙伴应该都知道，iframe也可以实现类似的功能，我们只需要给iframe做好相关的配置，绑定一个src属性即可将src对应的应用嵌进来，那么为什么不用iframe，而是单独搞了这么一个库呢？那么下面我们就来分析一下使用iframe有哪些缺点：

• 1.url不同步，浏览器刷新iframe的url状态丢失，并且前进后退按钮都无法使用。
• 2.UI 不同步，DOM 结构不共享。如果想让一个小iframe中的弹出框在整个屏幕中居中显示是一件不容易的事
• 3.全局上下文完全隔离，内存变量不共享，iframe内部无法访问外面的全局变量
• 4.慢，用过iframe的都知道，iframe加载其实是挺慢的，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程

而对于这些问题来说，qiankun刚好都能完美的解决。

快速构建一个qiankun微前端应用

以上说了这么多，接下来我们就一起来看下快速构建一个qiankun微前端应用都需要哪些步骤吧：

• 1.首先需要创建一个主应用和至少一个微应用
• 2.然后在主应用中安装微前端库：qiankun
• 3.在主应用的入口处导入qiankun中的两个方法registerMicroApps和start方法
• 4.调用registerMicroApps方法注册各个微应用，最后调用start方法来启动qiankun

以上4个步骤是关于主应用的配置，是不是很简单呢，下面再来看下微应用是如何配置的：

• 1.微应用不需要安装qiankun，但必须要在自己的入口处导出三个方法：
  • bootstrap：在微应用启动（初始化）的时候调用一次（只会调用一次）
  • mount：微应用渲染函数，每次微应用进入时都会调用
  • unmount：每次微应用切出或卸载时都睡调用
  • **注意：**以上三个方法即使不做任何事也必须要导出，否则会报错
• 2.为了保证每个微应用还能独立运行，还需要在入口处根据全局属性window.__ POWERED_BY_QIANKUN __ 来判断当前应用是由主应用启动还是自己独立运行&#