卫浴外贸版网站案例怎么做百度里面自己的网站
概述
在上一篇介绍了一些微前端的基础知识，详见微前端基础知识入门篇(一)。本文主要介绍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
- 类型