【乾坤新增一个子应用】

embedded/2024/10/21 12:22:57/

乾坤框架是一个基于微前端的解决方案,可以实现不同子应用的独立开发、独立部署和独立运行。下面是新增一个子应用的完整步骤:

  1. 创建一个新的子应用项目
    首先,在终端中使用命令行工具创建一个新的子应用项目,可以选择使用任何前端框架,例如React、Vue等。

  2. 配置子应用项目
    在子应用项目中,需要配置一些与乾坤框架相关的配置项,例如子应用的名称、入口文件的路径等。这些配置项可以存放在一个单独的配置文件中,例如"kid.config.js"。

    module.exports = {name: 'sub-app', // 子应用名称entry: '//localhost:3000' // 子应用的入口文件路径
    }
    
  3. 安装乾坤框架依赖
    在子应用项目的根目录下,使用命令行工具安装乾坤框架的依赖。

    npm install qiankun --save
    
  4. 在子应用入口文件中引入乾坤框架
    在子应用的入口文件中,引入乾坤框架,并注册子应用。

    import { registerMicroApps, start } from 'qiankun';
    import { frameworkConfig } from './kid.config'; // 引入子应用的配置文件// 注册子应用
    registerMicroApps([{name: frameworkConfig.name,entry: frameworkConfig.entry,container: '#subapp-container' // 子应用容器的选择器}
    ]);// 启动乾坤框架
    start();
    
  5. 修改主应用的配置文件
    在主应用的配置文件中,添加子应用的配置项。

    import { FrameworkConfiguration } from 'qiankun';export const mainAppConfig = {// 主应用的配置项subApps: [{name: 'sub-app',entry: '//localhost:3000' // 子应用的入口文件路径}]
    } as FrameworkConfiguration;
    
  6. 修改主应用入口文件
    在主应用的入口文件中,引入乾坤框架,并调用"loadMicroApp"方法加载子应用。

    import { createApp } from 'vue';
    import { registerMicroApps, start } from 'qiankun';
    import { mainAppConfig } from './main.config'; // 引入主应用的配置文件const app = createApp(App);// 注册子应用
    registerMicroApps(mainAppConfig.subApps);// 启动乾坤框架
    start();app.mount('#app');
    
  7. 启动子应用和主应用
    在终端中分别进入子应用和主应用的项目目录,使用命令行工具启动子应用和主应用。

    cd sub-app
    npm run servecd main-app
    npm run serve
    

现在,你已经成功完成了新增一个子应用的过程。当你访问主应用的页面时,你将看到子应用被加载到主应用的页面中,并且可以在主应用的页面中进行路由切换和子应用之间的通信。


http://www.ppmy.cn/embedded/129270.html

相关文章

大模型时代,云原生数据底座的创新和实践

本文整理自百度云智峰会 2024 —— 云原生论坛的同名演讲。 大模型毫无疑问是当前技术发展的热点,成为大家默认的提升生产力工具。 但是,大模型训练主要使用互联网上的公开数据为主,没有企业内部的数据,所以大模型本质上自带的都…

使用 SSH 连接 GitLab 的常见问题及解决方案

使用 SSH 连接 GitLab 的常见问题及解决方案 在使用 SSH 连接到 GitLab 服务器时,可能会遇到类似于以下的错误信息: git192.168.xx.xxx: Permission denied (publickey).这个错误通常表示 SSH 无法验证你的公钥,导致无法访问 GitLab 仓库。…

Spring Boot驱动的在线考试系统:JavaWeb技术实战

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及,互联网成为人们查找信息的重要场所,二十一世纪是信息的时代,所以信息的管理显得特别重要。因此,使用计算机来管理基于JavaWeb技术的在线考试系统设计与实现…

PROFINET开发或EtherNet/IP开发嵌入式板有用于工业称重秤

这是一个真实案例,不过客户选择不透露其品牌名称。稳联技术的嵌入式解决方案助力工业称重设备制造商连接至任意工业网络。多网络连接使得称重设备能够轻松接入不同的控制系统,进而加快产品的上市时间。 我们找到了稳联技术的解决方案。他们成熟的技术与专…

10.16工作笔记

要做的事 过一遍,完善代码 修改度数据的那几个函数(读取因子的时候读了多因子,但是不能用) 加一个函数,把所有读数据的都加进去 写参数平原,考虑多参数情况考虑多因子怎么办 14计算顺序 period_df read_coin_1得到所有币&…

2.6.ReactOS系统中从内核中发起系统调用

2.6.ReactOS系统中从内核中发起系统调用 2.6.ReactOS系统中从内核中发起系统调用 文章目录 2.6.ReactOS系统中从内核中发起系统调用前言 前言 上面我们已经可以看到用户空间(R3)进行系统调用的全过程即两种方法的具体实现。 系统调用一般时从R3发起的…

二、数据离线处理场景化解决方案

https://connect.huaweicloud.com/courses/learn/Learning/sp:cloudEdu_?courseNocourse-v1:HuaweiXCBUCNXE147Self-paced&courseType1 1.离线处理方案 **业务场景-安平领域** 业务场景-金融领域 离线批处理常用组件 HDFS:分布式文件系统,为各种…

sql-labs靶场第十六关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、寻找注入点 2、注入数据库 ①寻找注入方法 ②爆库,查看数据库名称 ③爆表,查看security库的所有表 ④爆列,查看users表的所有列 ⑤成功获取用户名…