目录

一、介绍

1.背景

2.什么是微前端

特性

3.开发前的准备工作

4.构建主项目

第一步、创建vue3的项目与正常创建项目无异，在这里不做过多描述

第二部、将创建好的vue3项目作为主应用，在根目录先安装qiankung在主应用安装qiankun

第三步、修改src目录下面的main.js

第四步、在src目录下面的App.vue，提供微应用展示的DOM

5.构建微应用

第一步、在主应用examples目录下创建一个vue3的项目，创建流程正常创建vue3项目无异，在这里不做过多描述；

第二步、在新创建的vue项目的src文件中创建名为public-path.js 的js文件，如图所示：

public-path.js文件代码如下：

第三步、入口文件 main.js 文件代码修改如下：

第四步、打包配置文件（vue.config.js）代码修改成：

三、总结

一、介绍

1.背景

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

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

目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

2.什么是微前端

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

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

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

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

  • 增量升级

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

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

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

特性