【乾坤新增一个子应用】

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

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
   

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