qiankun 使用方法及基座子应用搭建实践

置顶

椰子小姐姐

已于 2022-03-25 10:07:20 修改

阅读量8.2k

点赞数 1

分类专栏：前端技术文章标签： javascript 前端前端框架 vue vue.js

于 2022-03-25 10:06:45 首次发布

本文链接：https://blog.csdn.net/hlpp123/article/details/123727495

版权

本文介绍了qiankun，一个基于single-spa的微前端库，用于构建生产可用的微前端架构系统。qiankun的核心设计理念是将巨石应用拆解为自治的微应用，提供技术栈无关、独立运行的能力。实战部分详细讲解了如何搭建基座应用，包括安装qiankun，配置Vue应用，创建子应用入口，以及处理路由和生命周期。最后，总结了常见问题和解决方案，并提供了官方文档链接。

摘要由CSDN通过智能技术生成

1、介绍

Qiankun 是一个基于single-spa 的微前端实现库，旨在帮助大家能更简单，无痛的构建一个生产可用微前端架构系统。孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，经过一批线上应用的充分检验及打磨后，将其微前端内核抽离出来并开源。目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，是值得信赖的。

2、核心设计理念

微前端的核心目标是将巨石应用拆解成若干可自治的松耦合微应用，而qiankun 的诸多设计均是秉持这一原则。如：html entry, 沙箱，应用间通信等。确保微应用真正具备独立开发，独立运行的能力；使得微应用的接入像使用iframe一样简单。

2.1 技术特性

技术栈无关，可支持多种技术框架；

独立开发，独立部署，独立运行；

基于single-spa 封装，提供了更加开箱即用的API；

HTML Entry 接入方式： import-html-entry 去加载对应html 文件；

样式隔离，JS 沙箱：确保微应用之间样式互相不干扰，确保微应用之间全局变量/事件不冲突；

资源预加载：在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度；

3、qiankun实战

3.1 架构搭建

qiankun 是基于基座模式的，所以它必然有一个基座应用（主应用），来管理各个子应用的加载和卸载。我们以一个基于Vue的管理系统为例，来看如何搭建一个微前端项目。

3.2 基座搭建

qiankun安装：npm i qiankun -S
搭建好一个常规的Vue应用，并编写好以上三个区域对应的组件，此时的根组件结构大概如下

<template>
<div class="container">
<div class="app-header">
<prime-header></prime-header>
</div>
<div class="app-menu">
<prime-menu></prime-menu>
</div>
<div class="app-content">
<div id