简介

admin-micro-app 这是一个基于 Vue 3、Vite、TypeScript、MicroApp 和模块联邦等技术构建的微前端中后台模板。该模板采用了最新的前端技术栈，支持在开发模式下自动运行子应用和联邦模块，非常适合学习和参考。

特性

• 最新技术栈：使用 Vue3 / Vite 等前端前沿技术开发，使用高效率的 pnpm 包管理器
• TypeScript：应用程序级 JavaScript 的语言
• 微前端架构：支持无缝集成多个子应用，提升开发与维护效率
• 模块联邦：实现动态加载和共享模块，优化资源利用。
• 自动化管理： 1.在开发模式下，子应用可自动启动，无需手动输入命令。 2.模块联邦可自动注入主应用和子应用，免去手动配置的繁琐。

项目目录说明

• apps/main/: 项目的主应用，包含 项目的主应用，包含核心功能模块、路由管理、状态管理以及与子应用的集成，确保整体架构的灵活性和可扩展性。
• micro/modules: 存放模块联邦的共享依赖，包括多个子应用之间共享的库和组件，确保资源的高效复用和一致性，从而减少重复加载，提高应用性能。
• micro/login|child/: 存放子应用项目文件，包括各个子应用的源代码、配置文件和资源，便于模块化开发和维护，支持独立构建和部署，确保各子应用能够灵活集成到主应用中。
• scripts/: 存放自定义的 CLI 构建脚本代码，以简化项目的构建和部署流程，提高开发效率。
• shared/tsconfig/: 存放项目的 TypeScript 类型文件和配置，确保类型安全和灵活编译。
• shared/common/: 存放项目的一些共用方法和组件，以便于复用和维护，提高开发效率。。

如何创建子应用

在 micro 文件夹下使用 pnpm init 创建一个空项目，package.json 中的 name 按照约定使用 @micro/项目名 格式。然后，根据 Vue 3 的基础项目结构，创建文件，格式参考 login 或 child。

安装使用

• 安装依赖

pnpm i

• 运行

npm run dev

• 打包

npm run build