从零实现一个简单的微前端应用——qiankun

简介

微前端是一种前端架构，它允许我们独立开发和部署不同的前端应用，并将它们集成到一个统一的界面中。这使得我们可以更灵活地管理我们的前端代码库，并使我们的应用更易于维护和扩展。

qiankun 是一个流行的微前端框架，它可以帮助我们轻松地将不同的前端应用集成到一个统一的界面中。qiankun 提供了一套完整的解决方案，包括路由管理、子应用注册、子应用通信等。

创建主应用

首先，我们需要创建一个主应用。主应用负责管理路由和加载子应用。

import { createApp, h } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: App
    },
    {
      path: '/sub-app-1',
      component: '//localhost:3001/sub-app-1'
    },
    {
      path: '/sub-app-2',
      component: '//localhost:3002/sub-app-2'
    }
  ]
})

const app = createApp({
  router
})

app.mount('#app')

创建子应用

接下来，我们需要创建子应用。子应用是独立开发和部署的前端应用，它可以被加载到主应用中。

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

const app = createApp({
  render: () => h(App)
})

app.mount('#app')

注册子应用

接下来，我们需要将子应用注册到主应用中。我们可以通过在主应用中调用 qiankun.register 方法来注册子应用。

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'sub-app-1',
    entry: '//localhost:3001/sub-app-1',
    container: '#sub-app-1',
    activeRule: '/sub-app-1'
  },
  {
    name: 'sub-app-2',
    entry: '//localhost:3002/sub-app-2',
    container: '#sub-app-2',
    activeRule: '/sub-app-2'
  }
])

start()

配置路由

接下来，我们需要配置路由。路由负责管理子应用之间的切换。

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: App
    },
    {
      path: '/sub-app-1',
      component: '//localhost:3001/sub-app-1'
    },
    {
      path: '/sub-app-2',
      component: '//localhost:3002/sub-app-2'
    }
  ]
})

实现子应用之间的通信

最后，我们需要实现子应用之间的通信。我们可以通过在子应用中调用 qiankun.send 方法来向主应用发送消息，也可以通过在主应用中调用 qiankun.on 方法来监听子应用发送的消息。

// 子应用
qiankun.send('message', {
  data: 'Hello from sub-app-1'
})

// 主应用
qiankun.on('message', (data) => {
  console.log(data)
})

总结

本文介绍了如何使用qiankun实现一个简单的微前端应用。我们学习了如何创建主应用和子应用，如何注册子应用，如何配置路由，以及如何实现子应用之间的通信。