乾坤qiankun的使用

vue2 为主应用 react 为子应用

在项目中安装乾坤

yarn add qiankun # 或者 npm i qiankun -S

vue主应用

在main.js中新增 (需要注意的是路由模型为history模式)

registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:3011',
    container: '#container',//主应用挂在子应用的容器id名称
    activeRule: '/app-react',//主应用挂在子应用的路由名称
  },
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
]);

react 子应用:

修改 index.js文件

	import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter  } from 'react-router-dom';
function render(props) {
  const { container } = props;
  // 
  console.log('====================================');
  console.log(container);
  console.log('====================================');
  // container 存在 说明是作为子应用运行 不存在则是独立运行
  const root = ReactDOM.createRoot(container ? container.querySelector('#appRoot') : document.getElementById('appRoot'));
  //需要注意的是 appRoot 和 public目录下index.html 中div的id名称保持一致
  root.render(
    <HashRouter >
      <App />
    </HashRouter>
);
}

// 如果是独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  console.log('react app mounted', props);
  render(props);
}

export async function unmount(props) {
  const { container } = props;
  const root = ReactDOM.createRoot(container ? container.querySelector('#root') : document.getElementById('root'));
  root.unmount();
}

修改webpack配置,安装craco

yarn add react-app-rewired 或 npm i -D react-app-rewired

根目录下新增 config-overrides.js文件

const { name } = require('./package');

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    // config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    return config;
  },

  devServer: (_) => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

修改package.json文件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里端口号需要和子应用挂在的端口号保持一致

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如在主应用在挂在子应用时遇到

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

需要再子应用 package.json 中 eslintConfig 中新增

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

[外链图片转存中…(img-5Wnjp92F-1748775941845)]

需要再子应用 package.json 中 eslintConfig 中新增

[外链图片转存中…(img-YZw30X77-1748775941845)]

参考链接 React 18 配置 QianKun:主应用【React 18】+ 微应用【React 18】前端技能提升 react - 掘金

<think>好的,用户想查找关于乾坤框架(qiankun)的使用教程、指南和示例。我需要整理相关引用中的信息,给出清晰的步骤和示例。首先,我应该回顾提供的引用内容,看看有没有直接相关的教程和示例。 引用[1]提到了一个基于qiankun搭建ng-alain15微前端项目的示例实践,里面有代码示例。这可能是一个实际项目的案例,对用户有帮助。引用[2]是Qiankun前端框架的入门指南,提到了访问本地服务器查看示例应用,这对用户来说可能是一个好的起点。引用[3]是快速入门教程,详细讲解了项目结构和配置文件,适合新手。引用[4]解析了微前端架构,提到了技术栈如React、Redux等,可能涉及组件层的内容。 接下来,我需要将这些信息组织成结构清晰的步骤。首先介绍快速入门步骤,包括主应用和子应用的配置,然后给出代码示例。可能还需要列出学习资源,包括官方文档和社区资源。同时,生成相关问题,帮助用户深入理解。 需要注意的是,用户可能需要具体的教程链接或示例代码,但引用中没有给出外部链接,所以只能基于现有的引用内容来组织信息。例如,引用[2]中的访问http://localhost:7099可能是一个本地示例,用户需要自行运行项目才能看到。另外,代码示例可能需要从引用中提取,比如引用[1]中的代码部分,但用户提供的引用里并没有具体的qiankun代码,可能需要用一般性的示例来说明。 还要检查是否所有数学公式和独立公式都用了正确的LaTeX格式,但当前问题不涉及数学内容,可能不需要处理这点。最后,确保回答用中文,结构清晰,并附上相关问题。</think>### 乾坤(Qiankun)框架使用指南 #### 一、快速入门步骤 1. **主应用配置** - 安装依赖:`npm install qiankun` - 在主应用中注册子应用,示例代码: ```javascript import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'subApp1', entry: '//localhost:7100', container: '#subapp-container', activeRule: '/sub-app1', } ]); start(); ``` 此代码定义了一个子应用`subApp1`,指定其入口地址和激活规则[^2][^3]。 2. **子应用配置** - 子应用需导出生命周期钩子(如`bootstrap`, `mount`, `unmount`): ```javascript export async function bootstrap() { /* 初始化逻辑 */ } export async function mount(props) { /* 挂载逻辑 */ } export async function unmount(props) { /* 卸载逻辑 */ } ``` 确保子应用资源支持跨域访问[^3]。 3. **运行示例** 通过访问本地开发服务器(如`http://localhost:7099`),可查看主应用与子应用的集成效果[^2]。 #### 二、核心概念与最佳实践 - **技术栈无关性** 主应用与子应用可使用不同技术栈(如ReactVue、Angular),通过qiankun的沙箱机制隔离[^4]。 - **通信机制** 使用`initGlobalState`定义全局状态,实现主应用与子应用间的数据同步: ```javascript import { initGlobalState } from 'qiankun'; const actions = initGlobalState({ user: 'admin' }); ``` #### 三、学习资源 1. **官方文档** - [Qiankun GitHub仓库](https://github.com/umijs/qiankun) 2. **实践案例** - 引用[^1]中的`ng-alain15`微前端项目示例,演示复杂场景集成。 - 引用[^3]提供的目录结构与配置文件说明,适合快速上手。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值