当前位置: 首页 > article >正文

微前端基础知识入门篇(二)

概述

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

qiankun微前端实践

通过Vite脚手架分别创建三个程序,主应用A为:vite+vue3+ts,两个微应用分别为Bvite+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
  • 类型

http://www.kler.cn/a/410993.html

相关文章:

  • uniapp+vue2重新进入小程序就清除缓存,设备需要重新扫码
  • C++设计模式行为模式———状态模式
  • 正则表达式灾难:重新认识“KISS原则”的意义
  • Linux系统Docker部署开源在线协作笔记Trilium Notes与远程访问详细教程
  • 深度学习中的长短期记忆网络(LSTM)与自然语言处理
  • Python学习——字符串操作方法
  • PPT中插入Latex公式
  • 银河麒麟桌面系统——桌面鼠标变成x,窗口无关闭按钮的解决办法
  • mcu上一种利用伪随机数防止mac地址冲突的方法
  • 基于微信小程序的平价药房管理系统+LW参考示例
  • C语言实例之10求0-200内的素数
  • 如何打开RAW文件?——详细的工具与方法指南
  • 如何理解和运用资金流动机制——从个人理财到金融系统
  • 摄像头原始数据读取——opencv(cv::VideoCapture)
  • 计算机毕业设计Hadoop+Spark音乐推荐系统 音乐预测系统 音乐可视化大屏 音乐爬虫 HDFS hive数据仓库 机器学习 深度学习 大数据毕业设计
  • 聊一聊Elasticsearch的索引(2)
  • 一键生成唯美动漫图:ComfyUI-tPonynai详细搭建教程
  • 教学内容全覆盖:航拍杂草检测与分类
  • 大数据新视界 -- 大数据大厂之 Hive 数据桶:优化聚合查询的有效手段(下)(10/ 30)
  • 计算机网络 实验七 NAT配置实验
  • Figma入门-填充、描边、效果、导出
  • Ubuntu 22 安装 NVM 详细步骤及常见问题解决方案
  • 从零开始:Linux 环境下的 C/C++ 编译教程
  • 智慧公厕解决方案-城市公厕更智能、更干净
  • Lua--1.基础知识
  • 学习threejs,使用设置lightMap光照贴图创建阴影效果