手把手教你使用 qiankun

前言

随着前端项目的越来越复杂，越来越多的公司开始采用微前端架构来构建他们的项目。微前端架构可以将一个庞大的项目拆分成多个小的、独立的、可复用的微前端应用，这些微前端应用可以独立开发、独立部署、独立运行，然后通过一个聚合器聚合在一起，形成一个完整的应用。

qiankun 是由蚂蚁集团开源的一个基于 single-spa 的微前端实现库，它是目前主流的微前端解决方案之一。它对 single-spa 进行了大量的封装和加强，比如样式隔离、JS 沙箱、以及一些开箱即用的功能。

安装

首先，你需要在你的项目中安装 qiankun。

npm install --save qiankun

然后，你需要在你的项目中创建一个新的文件，比如 main.js，然后在里面写入以下代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这个代码的作用是创建一个 Vue 实例，然后把它挂载到 #app 元素上。

配置

接下来，你需要在你的项目中创建一个新的文件，比如 qiankun.config.js，然后在里面写入以下代码：

module.exports = {
  apps: [
    {
      name: 'subapp',
      entry: '//localhost:8081/subapp.js',
      container: '#subapp',
      activeRule: '/subapp'
    }
  ]
}

这个代码的作用是配置 qiankun，告诉 qiankun 你要加载哪些微前端应用，以及这些微前端应用的入口文件、容器元素、激活规则等。

编写微前端应用

接下来，你需要编写你的微前端应用。

微前端应用是一个独立的、可复用的前端应用，它可以独立开发、独立部署、独立运行，然后通过一个聚合器聚合在一起，形成一个完整的应用。

微前端应用的开发与普通的 Vue 应用的开发非常相似，但是你需要注意以下几点：

• 微前端应用需要有一个唯一的名称，这个名称将在聚合器中使用来区分不同的微前端应用。
• 微前端应用需要有一个入口文件，这个入口文件将在聚合器中被加载。
• 微前端应用需要有一个容器元素，这个容器元素将在聚合器中被用来挂载微前端应用。
• 微前端应用需要有一个激活规则，这个激活规则将在聚合器中用来决定何时加载微前端应用。

运行

最后，你需要运行你的项目。

npm run serve

然后，你就可以访问你的项目了。

总结

本文介绍了如何使用 qiankun 来构建微前端应用。微前端架构可以将一个庞大的项目拆分成多个小的、独立的、可复用的微前端应用，这些微前端应用可以独立开发、独立部署、独立运行，然后通过一个聚合器聚合在一起，形成一个完整的应用。

qiankun 是一个非常流行的微前端实现库，它提供了很多开箱即用的功能，可以帮助你快速构建微前端应用。