【乾坤新增一个子应用】

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

  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 serve
    
    cd main-app
    npm run serve
    

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小百科

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值