%20(2).svg)
项目简介
本项目基于qiankun微前端框架构建，借助该技术将多个独立应用整合为统一管理平台。主应用采用Vue，微应用涵盖Vue和React，实现了应用的松耦合、独立部署与动态加载，有效提升了系统的可扩展性与可维护性。
项目的主要特性和功能
主要特性
- 技术栈无关：qiankun支持Vue、React等多种前端技术栈，可灵活集成不同应用。
- 样式隔离：运用影子DOM等技术，确保微应用间样式互不干扰。
- JS沙箱：提供JS沙箱环境，避免微应用间全局变量和事件冲突。
功能
- 应用管理：利用qiankun微前端技术，整合多个独立应用形成统一管理平台。
- 动态路由：支持动态加载微应用，根据URL变化自动加载对应微应用。
- 生命周期管理：提供微应用的注册、启动、卸载等生命周期管理功能。
- 配置管理：支持通过配置文件或API对微应用进行配置和管理。
安装使用步骤
假设用户已下载本项目的源码文件。
1. 安装依赖
使用npm或yarn安装项目依赖：
bash
npm install 或 yarn
2. 启动项目
按以下顺序启动项目：
1. 主应用：在qiankun-base目录下执行npm run serve。
2. Vue微应用：在qiankun-vue目录下执行npm run serve。
3. React微应用：在qiankun-react目录下执行npm run start。
若启动顺序不一致可能出现端口问题，可在qiankun-base的main.js中修改子应用端口设置。
3. 配置微应用信息
在主应用里注册各微应用信息，包含入口、容器等，示例如下：
vue
import { registerMicroApps, start } from "qiankun";
registerMicroApps([
{
name: "vueApp",
entry: "//localhost:8080",
container: "#container",
activeRule: "/app-vue",
},
{
name: 'reactApp',
entry: 'http://localhost:3000',
container: '#container',
activeRule: '/app-react',
}
]);
start();
4. 运行测试
通过访问不同URL加载不同微应用并进行功能测试。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】