云开雾散，认识微前端项目新星——qiankun

<h1>云开雾散，认识微前端项目新星——qiankun</h1>

在上一篇文章《微前端：single-spa 到底是个什么鬼》中，我们介绍了 single-spa 这个框架，它仅仅实现了子应用的生命周期的调度以及 url 变化的监听。严格来说，single-spa 还算不上一个完整的微前端框架，因为它并没有实现微前端的一个重要特点——应用的独立部署。

qiankun 是一个功能齐全的微前端框架，它为开发人员提供了许多有用的特性，可以帮助他们轻松构建和管理微前端项目。本文将对 qiankun 的特点、功能和使用进行详细介绍，帮助您快速掌握这个强大的微前端框架。

<h2>qiankun 的特点</h2>

* **独立部署：**  qiankun 支持子应用的独立部署，这意味着子应用可以单独打包和部署，而无需依赖主应用。这使得微前端项目更加灵活和可扩展。
* **路由管理：**  qiankun 提供了强大的路由管理功能，可以帮助开发人员轻松管理子应用的路由。qiankun 支持多种路由模式，包括 hash 模式、history 模式和内存模式，开发人员可以根据自己的需要选择合适的路由模式。
* **状态管理：**  qiankun 提供了完善的状态管理机制，可以帮助开发人员轻松管理子应用的状态。qiankun 支持多种状态管理方案，包括 Redux、MobX 和 Vuex，开发人员可以根据自己的需要选择合适的状态管理方案。
* **通信机制：**  qiankun 提供了多种通信机制，可以帮助子应用和主应用之间进行通信。qiankun 支持事件总线、消息队列和 WebSocket 等多种通信机制，开发人员可以根据自己的需要选择合适的通信机制。

<h2>qiankun 的功能</h2>

* **应用加载：**  qiankun 提供了强大的应用加载功能，可以帮助开发人员轻松加载子应用。qiankun 支持多种应用加载方式，包括按需加载、预加载和并行加载，开发人员可以根据自己的需要选择合适的应用加载方式。
* **应用渲染：**  qiankun 提供了多种应用渲染方式，可以帮助开发人员轻松渲染子应用。qiankun 支持沙箱渲染、影子 DOM 渲染和客户端渲染等多种应用渲染方式，开发人员可以根据自己的需要选择合适的应用渲染方式。
* **应用卸载：**  qiankun 提供了完善的应用卸载功能，可以帮助开发人员轻松卸载子应用。qiankun 支持多种应用卸载方式，包括按需卸载、预卸载和并行卸载，开发人员可以根据自己的需要选择合适的应用卸载方式。

<h2>qiankun 的使用</h2>

qiankun 的使用非常简单，只需要按照以下步骤即可：

1. 安装 qiankun：

npm install --save qiankun

2. 创建主应用：

// main.js
import { createApp } from 'vue'
import Qiankun from 'qiankun'

const app = createApp({})

app.use(Qiankun, {
// 子应用列表
apps: [
{
name: 'sub-app1',
entry: '//localhost:8080',
activeRule: '/sub-app1'
},
{
name: 'sub-app2',
entry: '//localhost:8081',
activeRule: '/sub-app2'
}
]
})

app.mount('#app')

3. 创建子应用：

// sub-app1/main.js
import { createApp } from 'vue'
import Qiankun from 'qiankun'

const app = createApp({})

app.use(Qiankun, {
// 主应用的地址
master: {
apps: [
{
name: 'main-app',
entry: '//localhost:8080',
activeRule: '/'
}
]
}
})

app.mount('#app')

4. 运行主应用和子应用：

npm run start:main
npm run start:sub-app1
npm run start:sub-app2

以上便是 qiankun 的使用示例，更多详细内容可以参考 qiankun 的官方文档。

<h2>结语</h2>

qiankun 是一个功能齐全、使用简单的微前端框架，它可以帮助开发人员轻松构建和管理微前端项目。如果您正在寻找一个微前端框架，那么 qiankun 绝对是您的不二之选。