概述

在上一篇介绍了一些微前端的基础知识，详见微前端基础知识入门篇(一)。本文主要介绍qiankun微前端框架的实战入门内容。

qiankun微前端实践

通过Vite脚手架分别创建三个程序，主应用A为：vite+vue3+ts,两个微应用分别为B：vite+vue3+ts;C:vite+React+ts。因为qiankun的微应用是技术无关性，因此微应用可以是一个简单网页html,也可以是任意前端框架搭建的一个网页应用。

三个应用分别安装qiankun库，终端运行如下命令：

yarn add qiankun

微应用的注册

在主应用A中程序入口文件src/main.ts中注册微应用如下：

import {
    createApp } from "vue";
import {
    registerMicroApps, start } from "qiankun";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

registerMicroApps([
  {
   
    name: "B_App",
    entry: "//localhost:5157",
    container: "#main_container",
    activeRule: "/cb",
  },
  {
   
    name: "C_App",
    entry: "//localhost:5158",
    container: "#main_container",
    activeRule: "/c",
  },
]);
start();

• 代码分析

registerMicroApps函数
该函数是基于路由去配置微应用，其语法为：registerMicroApps(apps,lifeCycles?)。

• 参数
  • apps:必选，微应用的注册信息，其类型为Array<ReigsterableApp>
  • lifeCycles:可选，全局的微应用生命周期钩子,其类型为LifeCycles
• 类型