一栈式主分前端架构

项目简介

本项目旨在构建一个高效、可扩展的一栈式主分前端架构，特别适用于大型项目或微前端架构。通过结合 Monorepo、Federation 和 defineAsyncComponent 技术，我们创建了一个灵活且易于管理的开发环境。

目录结构

├── apps/ │ └── one-main/ # 主应用（门户） │ └── package.json ├── packages/ │ ├── one-basic/ # 分应用之一 │ │ └── package.json │ └── ... # 其他分应用 ├── package.json

根 package.json └── pnpm-workspace.yaml # pnpm 工作区配置文件

主要模块说明

• one-main：作为主应用，提供最终用户访问的门面。
• one-basic：作为分应用之一，提供远程组件及其单独演示，方便调试。后续还会有更多分应用如 one-beau 等。
• shared-components：共享组件库（未来可能添加）。

技术栈

• Monorepo：使用 pnpm 进行多包管理，确保统一的代码风格和配置，简化跨项目依赖管理。
• Federation：基于 Webpack 5 的 Module Federation 插件实现模块联邦，允许多个独立的应用程序或微前端共享模块。
• defineAsyncComponent：利用 Vue 3 提供的异步组件 API 实现按需加载远程组件，优化初始加载时间和性能。

开发工具

• pnpm：用于管理多个 npm 包，提高依赖解析速度。
• Nx（可选）：提供丰富的工具链来优化构建和测试流程。
• Vite：用于构建和开发服务器，替代传统的 SSR 架构。

使用步骤

安装依赖

在项目根目录下运行以下命令以安装所有依赖：

pnpm install
启动开发服务器
分别启动主应用和分应用的开发服务器：

bash
# 启动主应用
cd apps/one-main
pnpm run dev

# 启动分应用
cd packages/one-basic
pnpm run dev

构建项目
使用 Lerna 或 Nx 进行统一构建：

bash
# 使用 Lerna 构建
lerna bootstrap
lerna run build --scope=one-main
lerna run build --scope=one-basic

# 或者使用 Nx 构建
nx build one-main
nx build one-basic
部署
可以分别部署主机应用和远程应用，确保每个应用可以独立更新和维护。

未来计划
将 UI 框架从 Vant 替换为 Naive UI，以获得更简洁的风格。
增加更多分应用，丰富系统功能。
进一步优化模块联邦配置，提升性能。
贡献指南
欢迎任何开发者参与贡献！如果您有任何问题或建议，请随时提交 Issue 或 Pull Request。

许可证
本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。