微前端qiankun的基本使用(vue-element-admin作为项目模版)

微前端qiankun的基本使用(vue-element-admin作为项目模版)

  • qiankun架构特点
  • 主应用netmoni_master改造
    • 工程项目目录结构
    • 子项目配置:子应用注册
    • 配置项container:子应用挂载节点
    • 配置项activeRule:子应用路由
  • 子应用netmoni_child1改造
    • 目录结构
    • 项目配置:src/settings中配置子应用
    • 项目配置:main.js中接入
    • 项目配置:public-path.js
    • 项目配置:router/index.js
    • 项目配置:vue.config.js

qiankun架构特点

  • 技术栈无关
  • 主框架不限制接入应用的技术栈,微应用具备完全自主权
  • 独立开发、独立部署
  • 增量升级
  • 利于实施渐进式重构
  • 微应用仓库独立,前后端可独立开发,主框架自动完成同步更新
  • 微应用独立运行
  • 微应用之间状态隔离,运行时状态不共享
  • 劣势:接入难度高、移动端少,管理端多

主应用netmoni_master改造

工程项目目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 图片等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── micro  (重点)         # qiankun微前端配置
│   ├── router (重点)         # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局 主题(白天/黑夜)样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── permission.js          # 权限管理
│   └── settings.js  (重点)   # 项目配置
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

子项目配置:子应用注册

注意上述目录中重点标注的几个目录,其中子项目配置文件:
src/micro/app.js

const arr = window.origin.split(':')
const origin = arr[0] + ':' + arr[1]export function getApps(){return [/*** name: 微应用名称 - 具有唯一性* entry: 微应用入口 - 通过该地址加载微应用,注意与对应子应用配置保持一致* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用*/{name: 'netmoni_child1',entry: origin + ':31325',container: '#child1_frame',activeRule: '/sub/child1'//路由模式mode对应是history}]
}

启动文件:src/micro/index.js

mport {registerMicroApps, // 注册子应用方法addGlobalUncaughtErrorHandler, // 添加全局未捕获异常处理器start // 启动qiankun
} from 'qiankun'// 获取子应用信息
import { getApps } from './app'export function startMicroApps() {// 注册微前端const apps = getApps()console.log('startMicroApps', apps)registerMicroApps(apps, 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/893478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用PHP函数 “is_object“ 检查变量是否为对象类型

在PHP中,变量可以保存不同类型的值,包括整数、字符串、数组、布尔值等等。其中,对象是一种特殊的数据类型,用于封装数据和方法。在处理PHP代码中,我们经常需要检查一个变量是否为对象类型,以便进行相应的处…

DAY3,模拟终端

题目 实现一个终端的功能,注意需要带有cd功能 思路 如何 C语言执行shell命令? 使用进程替换exec函数;;使用system函数。 如何 切换工作目录? 使用chdir函数切换工作目录。 其…

一键视频转文字/音频转文字,浏览器右键提取B站视频文案,不限时长免费无限次可用

上篇文章阿虚分享了自己的「短视频」笔记方案 短视频文件小,易存储,所以阿虚建议是直接将原视频插入到笔记当中 而长视频文件大,很难像短视频一样操作。阿虚之前的建议是提取重要部分视频转长截图,或者视频转GIF 但上述方案仔细…

【C++】详细讲解继承(上)

C面向对象的三大特性:封装,继承,多态。现在我们就介绍一下继承。 1.继承的概念及定义 1.1 继承的概念 继承机制是⾯向对象程序设计使代码可以 复⽤ 的最重要的⼿段。我们前面接触到的都是 函数 层次的复用,遇到过的 类 层次的复…

AIGC专栏18——EasyAnimateV5.1版本详解 应用Qwen2 VL作为文本编码器,支持轨迹控制与相机镜头控制

AIGC专栏18——EasyAnimateV5.1版本详解 应用Qwen2 VL作为文本编码器,支持轨迹控制与相机镜头控制 学习前言相关地址汇总源码下载地址HF测试链接MS测试链接 测试效果Image to VideoText to Video轨迹控制镜头控制 EasyAnimate详解技术储备Qwen2 VLStable Diffusion …

1905电影网中国地区电影数据分析(一) - 数据采集、清洗与存储

文章目录 前言一、数据采集步骤及python库使用版本1. python库使用版本2. 数据采集步骤 二、数据采集网页分析1. 分析采集的字段和URL1.1 分析要爬取的数据字段1.2 分析每部电影的URL1.2 分析每页的URL 2. 字段元素标签定位 三、数据采集代码实现1. 爬取1905电影网分类信息2. 爬…

【25】Word:林涵-科普文章❗

目录 题目​ NO1.2.3 NO4.5.6 NO7.8 NO9.10 NO11.12 不连续选择:按住ctrl按键,不连续选择连续选择:按住shift按键,选择第一个,选择最后一个。中间部分全部被选择 题目 NO1.2.3 布局→纸张方向:横向…

C语言二级

//请编写函数fun(),该函数的功能是:计算并输出给定整数n的所有因 //子(不包括1和自身)之和。规定n的值不大于1000。例如,在主函数 //中从键盘给n输入的值为856,则输出为:sum 763。 //注意&…

P6周:VGG-16算法-Pytorch实现人脸识别

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者:K同学啊 我的环境 语言环境:Python 3.8.12 编译器:jupyter notebook 深度学习环境:torch 1.12.0cu113 一、前期准备 1.设置GPU im…

Mac下安装ADB环境的三种方式

参考网址: Mac下安装ADB环境的三种方式-百度开发者中心 ADB,即Android Debug Bridge,是Android开发过程中不可或缺的工具。通过ADB,开发者可以在计算机上管理设备或模拟器上的应用,提供了丰富的调试功能。然而&#…

WordPress Fancy Product Designer插件Sql注入漏洞复现(CVE-2024-51818)(附脚本)

免责申明: 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权,请及时与我们联系,我们将尽快处理并删除相关内容。 0x0…

web速览

web速览 1. 前端开发 概述: 前端开发是构建网站用户界面的过程,主要关注网站的视觉效果和用户体验。又称为客户端 技术栈: HTML(超文本标记语言):用于创建网页的结构和内容。CSS(层叠样式表&a…

PHP常见正则表达式

一、校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字:^([1-9][0-…

0164__【GNU】gcc -O编译选项 -Og -O0 -O1 -O2 -O3 -Os

【GNU】gcc -O编译选项 -Og -O0 -O1 -O2 -O3 -Os_gcc -o0-CSDN博客

【Rust自学】14.4. 发布crate到crates.io

喜欢的话别忘了点赞、收藏加关注哦(加关注即可阅读全文),对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 14.4.1. 创建并设置crates.io账号 在发布任何 crate 之前,你需要在 crates.io并…

青少年编程与数学 02-007 PostgreSQL数据库应用 15课题、备份与还原

青少年编程与数学 02-007 PostgreSQL数据库应用 15课题、备份与还原 一、数据库备份与还原二、PostgreSQL中操作数据库的备份与还原1. 使用pg_dump进行逻辑备份2. 使用pg_restore进行逻辑还原3. 使用pg_basebackup进行物理备份4. 还原物理备份注意事项 三、自动备份1. 使用pg_d…

数据结构——实验八·学生管理系统

嗨~~欢迎来到Tubishu的博客🌸如果你也是一名在校大学生,正在寻找各种编程资源,那么你就来对地方啦🌟 Tubishu是一名计算机本科生,会不定期整理和分享学习中的优质资源,希望能为你的编程之路添砖加瓦⭐&…

IBM湖仓一体与向量数据库:访问MinIO控制台(Accessing the MinIO console)

_1、从密钥中复制S3凭证并保存 (Copy the S3 credentials from the secret and save it ) oc extract secret/ibm-lh-config-secret -n ${PROJECT_CPD_INST_OPERANDS} --to- --keysenv.properties | grep -E "LH_S3_ACCESS_KEY|LH_S3_SECRET_KEY&q…

STM32 低功耗设计:从原理到实现的详细介绍

在现代嵌入式系统中,尤其是在需要长时间工作且电池供电的设备中,低功耗设计至关重要。STM32作为一种流行的微控制器系列,广泛应用于便携设备、传感器网络、可穿戴设备等领域,提供了多种低功耗模式来延长电池使用时间并优化整体能效…

View Shadcn UI 2025.1.2 发布公告:全新跑马灯组件与多项优化更新

亲爱的开发者们: 我们很高兴地宣布 View Shadcn UI 2025.1.2 版本正式发布!本次更新带来了全新的跑马灯组件,并对多个现有组件进行了功能增强和问题修复。 🚀 重要链接 GitHub 仓库:https://github.com/devlive-comm…