从0到1搭建一个属于自己的qiankun项目，从此技术不再“千钧一发”

2024-02-11 02:23:35

前言

随着前端项目越来越复杂，单页面应用（SPA）的局限性也日益凸显。为了解决SPA的弊端，微前端架构应运而生。微前端架构将一个大型单页面应用拆分为多个独立的微应用，每个微应用都可以独立开发、部署和维护。这样不仅可以提高开发效率，还可以降低维护成本。

qiankun是一个基于Vue3的微前端框架，它提供了丰富的功能和完善的文档，可以帮助开发者快速搭建微前端应用。本篇文章将详细介绍如何使用Vue3从0到1搭建一个qiankun项目，并分享作者在搭建过程中遇到的问题及解决方案。

安装qiankun

首先，我们需要安装qiankun。我们可以通过以下命令来安装qiankun：

npm install --save qiankun

安装完成后，我们可以在项目中创建一个名为main.js的文件，并在其中引入qiankun：

import { createApp } from 'vue'
import App from './App.vue'
import { registerMicroApps, setDefaultMountApp } from 'qiankun'

const app = createApp(App)

registerMicroApps([
  {
    name: 'micro-app-1',
    entry: '//localhost:9001',
    container: '#container',
    activeRule: '/micro-app-1'
  },
  {
    name: 'micro-app-2',
    entry: '//localhost:9002',
    container: '#container',
    activeRule: '/micro-app-2'
  }
])

setDefaultMountApp('/micro-app-1')

app.mount('#app')

在上面的代码中，我们首先创建了一个Vue3应用，然后通过registerMicroApps函数注册了两个微应用。registerMicroApps函数接收一个数组作为参数，数组中的每个元素都是一个微应用的配置对象。配置对象包含了微应用的名称、入口地址、容器元素和激活规则。

配置qiankun

在注册完微应用之后，我们需要配置qiankun。我们可以通过以下命令来配置qiankun：

import { qiankun } from 'qiankun'

qiankun.init({
  // 应用加载之前
  beforeLoad: (app) => {
    console.log('应用加载之前', app)
  },
  // 应用加载之后
  afterLoad: (app) => {
    console.log('应用加载之后', app)
  },
  // 应用卸载之前
  beforeUnmount: (app) => {
    console.log('应用卸载之前', app)
  },
  // 应用卸载之后
  afterUnmount: (app) => {
    console.log('应用卸载之后', app)
  },
  // 单个应用配置
  apps: [
    {
      name: 'micro-app-1',
      entry: '//localhost:9001',
      container: '#container',
      activeRule: '/micro-app-1'
    },
    {
      name: 'micro-app-2',
      entry: '//localhost:9002',
      container: '#container',
      activeRule: '/micro-app-2'
    }
  ]
})