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