1、初始化项目：

首先新建空文件夹在里面新建master 文件，使用一下命令创建主应用;

$ yarn create umi
...
✔ Pick Umi App Template › Simple App
✔ Pick Npm Client › yarn
✔ Pick Npm Registry › npm

当项目初始化完成后使用

$ yarn start
info  - [MFSU] buildDeps since cacheDependency has changed╔════════════════════════════════════════════════════╗║ App listening at:                                  ║║  >   Local: http://localhost:8000                  ║
ready - ║  > Network: http://172.16.10.209:8000              ║║                                                    ║║ Now you can open browser with the above addresses↑ ║╚════════════════════════════════════════════════════╝

打开页面项目创建成功

重复以上步骤创建子应用appA， appB；

2、编辑主应用

2.1编辑layouts

import { Link, Outlet } from 'umi';
import styles from './index.less';export default function Layout() {return (<div className={styles.navs}><ul><li><Link to="/appA">appA</Link></li><li><Link to="/appB">appB</Link></li></ul><Outlet /></div>);
}

2.2 安装qiankun

$ yarn add qiankun

2.3 配置主应用

在.umiirc.ts增加如下配置：

export default defineConfig({...qiankun:{master:{// 注册子应用信息apps:[{name:'appA',entry:'http://localhost:8001'},{name:'appB',entry:'http://localhost:8002'}],// 配置微应用关联路由router:[{path:'/appA',microApp: 'appA',},{path:'/appB',microApp: 'appB',}]}},...});

3 、编辑子应用

3.1修改页面样式

修改appA下 src/pages/index.tsx


export default function HomePage() {return (<div>APP A</div>);
}

修改appB下 src/pages/index.tsx

export default function HomePage() {return (<div>APP B</div>);
}

3.2 安装qiankun

$ yarn add qiankun

3.3 配置子应用

在.umiirc.ts增加如下配置：

export default defineConfig({...qiankun:{slave:{},},...});

使用umi4+qiankun 搭建微前端项目相关推荐

2022年了你必须要学会搭建微前端项目及部署方式
一.微前端简介微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.各个前端应用可以独立运行.独立开发.独立部署. ...
基于qiankun搭建ng-alain15微前端项目示例实践
基础环境实践日期:2023-03-04 ng versionAngular CLI: 15.2.1 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
基于qiankun搭建ng-alain15微前端项目入门实践
基础环境实践日期:2023-02-22 ng versionAngular CLI: 15.1.6 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
如何利用qiankun快速搭建一个微前端项目
前言小伙伴们大家好.前一篇文章跟大家分享了一些关于微前端的知识点,包括什么是微前端,为什么要用微前端以及如何实现一个微前端,在文章的最后我们还提到了能够实现微前端的两个库:single-spa和qi ...
【微前端】手把手带你从零开始搭建一个qiankun+vue微前端应用
前言小伙伴们大家好.上一篇文章中我们分享了qiankun的一些概念和特性,以及基于qiankun实现有一个微前端应用的大概步骤,最后以qiankun加vue2.0为例给出了快速搭建qiankun微前 ...
vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
微前端应用及基于qiankun的微前端实践
示例代码仓库: yl-qiankun-base:https://gitee.com/dongche/yl-qiankun-base.git yl-qiankun-child-vue:https://g ...

使用umi4+qiankun 搭建微前端项目

1、初始化项目：

2、编辑主应用

2.1编辑layouts

2.2 安装qiankun

2.3 配置主应用

3 、编辑子应用

3.1修改页面样式

3.2 安装qiankun

3.3 配置子应用

使用umi4+qiankun 搭建微前端项目相关推荐

最新文章

热门文章