hehe-shell-platform

v0.0.1

Published

5 months ago

基于 **Vite 7 + Vue 3.5 + TypeScript 5.9** 的企业级微前端壳应用平台，支持上百个产品子包的统一基础设施。

0High
0Medium
0Low

shitengkai

壳应用平台 (Shell Platform)

基于 Vite 7 + Vue 3.5 + TypeScript 5.9 的企业级微前端壳应用平台，支持上百个产品子包的统一基础设施。

🏗️ 架构概览

shell-platform/
├── apps/
│   └── web/                  # 壳应用 (集成所有产品)
├── packages/
│   ├── auth/                 # 🔐 认证系统
│   ├── ui/                   # 🎨 UI 组件库
│   ├── shared/               # 🛠️ 共享工具库
│   └── theme/                # 🌙 主题系统
├── infra-versions/           # 📋 版本管理 SSOT
└── scripts/                  # 🔧 自动化脚本

✨ 核心特性

🔐 认证系统 (hehe-auth)

统一用户登录、权限管理
Vue Router 路由守卫集成
支持多种认证策略
双模式：演示页面 + 库导出

🎨 UI 组件库 (hehe-ui)

基于 Element Plus 的统一组件
响应式设计，支持主题切换
完整的 TypeScript 类型支持
组件演示和文档

🛠️ 共享工具库 (hehe-shared)

通用工具函数 (时间格式化、防抖等)
Vue 3 Composables (useToggle 等)
API 错误处理和表单校验
纯逻辑库，无 UI 依赖

🌙 主题系统 (hehe-theme)

亮色/暗色主题无缝切换
CSS 设计令牌 (Design Tokens)
Element Plus 主题覆盖
主题演示页面

🔄 版本管理 (SSOT)

采用 Single Source of Truth 架构，通过 infra-versions 仓库集中管控所有依赖版本：

{
  "overrides": {
    "vue": "^3.5.21",
    "vite": "^7.1.5",
    "typescript": "^5.9.2"
  }
}

版本升级流程

修改 infra-versions/versions.json
运行 pnpm run sync:versions
执行 pnpm install && pnpm run build:libs

🚀 快速开始

环境要求

Node.js: 20.19+ 或 22.12+ (Vite 7 要求)
包管理器: pnpm

安装依赖

pnpm install

构建子包

pnpm run build:libs

启动壳应用

pnpm --filter hehe-web dev
# 访问 http://localhost:5173

演示页面

# 主题系统演示
pnpm --filter hehe-theme dev     # http://localhost:5183

# UI 组件演示  
pnpm --filter hehe-ui dev        # http://localhost:5182

# 认证系统演示
pnpm --filter hehe-auth dev      # http://localhost:5181

📦 包管理

双模式架构

每个子包都支持两种模式：

演示模式: pnpm run dev - 独立开发和展示
库模式: pnpm run build:lib - 构建供其他包使用

添加新包

创建包目录结构
配置 package.json 和 vite.config.ts
更新 tsconfig.base.json 路径映射
添加到 infra-versions/versions.json

🛠️ 开发工具

常用命令

# 并行开发所有包
pnpm run dev

# 构建所有子包
pnpm run build:libs

# 构建壳应用
pnpm run build:apps

# 版本同步
pnpm run sync:versions

# 系统验证
node scripts/verify-system.js

Turbo 构建

使用 Turbo 进行并行构建和缓存优化：

{
  "tasks": {
    "build:lib": { "dependsOn": ["^build:lib"], "outputs": ["dist/**"] },
    "dev": { "cache": false }
  }
}

🎯 技术栈

核心框架

构建工具: Vite 7.1.5
前端框架: Vue 3.5.21
类型系统: TypeScript 5.9.2
UI 框架: Element Plus 2.11.2

开发工具

Monorepo: Turbo 2.5.6 + pnpm workspace
状态管理: Pinia 3.0.3
路由管理: Vue Router 4.5.1
样式预处理: Sass 1.92.1

📋 版本兼容性

| 依赖 | 版本 | 说明 | |------|------|------| | Node.js | 20.19+ / 22.12+ | Vite 7 要求 | | Vue | 3.5.21 | 最新稳定版 | | Vite | 7.1.5 | 最新主版本 | | TypeScript | 5.9.2 | 稳定版本 | | Element Plus | 2.11.2 | UI 组件库 |

🔧 配置说明

TypeScript 路径映射

{
  "paths": {
    "hehe-auth": ["packages/auth/src/lib/index.ts"],
    "hehe-ui": ["packages/ui/src/lib/index.ts"],
    "hehe-shared": ["packages/shared/src/index.ts"],
    "hehe-theme": ["packages/theme/src/lib/index.ts"]
  }
}

Vite 配置优化

{
  resolve: {
    preserveSymlinks: false,
    dedupe: ["vue", "vue-router", "pinia", "element-plus"]
  }
}

🚀 部署指南

生产构建

# 1. 构建所有子包
pnpm run build:libs

# 2. 构建壳应用
pnpm --filter hehe-web build

# 3. 部署 apps/web/dist 目录

Docker 部署

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN pnpm install
COPY . .
RUN pnpm run build:libs && pnpm run build:apps
EXPOSE 80
CMD ["pnpm", "run", "preview"]

📚 最佳实践

包设计原则

单一职责: 每个包专注特定功能域
松耦合: 包之间通过明确接口交互
高内聚: 相关功能聚合在同一包内
版本统一: 通过 SSOT 确保依赖一致性

开发规范

TypeScript 优先: 所有代码使用 TypeScript
组件文档: 提供完整的使用示例
单元测试: 核心逻辑需要测试覆盖
性能优化: 利用 Tree Shaking 和代码分割

🤝 贡献指南

Fork 本仓库
创建特性分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'Add amazing feature')
推送分支 (git push origin feature/amazing-feature)
创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🎉 恭喜！壳应用平台已就绪，可支撑上百个产品子包的统一基础设施。