首页
前端开发
Nodejs
微前端框架qiankun的基本使用指南

微前端框架qiankun的基本使用指南

20 次浏览 0 条评论
zip
zip

微前端 qiankun 的基本使用

qiankun 是基于微前端理念的开源框架，用于在单一页面中集成多个子应用。在此内容中，我们将探索 qiankun 的核心功能和基本使用流程。

1. 安装 qiankun

首先，在项目中安装 qiankun 依赖包：

npm install qiankun --save

2. 主应用配置

在主应用中启动 qiankun：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/app1',
  },
]);

start();

3. 子应用配置

子应用也需进行基础配置，设置独立的路由和资源：

// 在子应用中定义入口

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

4. 启动微前端架构

通过调用 start() 方法，主应用将开始监听路由，并根据配置加载对应子应用。至此，qiankun 的基本配置即已完成。

总结：通过配置 主应用 和 子应用，我们实现了 qiankun 微前端的基本框架。

zip 文件大小：287.24MB