微前端基础知识入门篇（二）

概述

在上一篇介绍了一些微前端的基础知识，详见微前端基础知识入门篇(一)。本文主要介绍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
• 类型