Lerna Web UI 组件库概述

📚 简介

Lerna Web UI 是一个基于 Vue 3 + TypeScript + Vite 的现代化企业级 UI 组件库，采用 Lerna Monorepo 架构管理多包结构。它提供了一套高质量、可复用、类型安全的 UI 组件系统，专为中后台应用场景设计。

✨ 核心特性

• 🎯 TypeScript 支持: 完整的类型定义，提供优秀的开发体验
• 🚀 Vite 构建: 快速的开发启动和构建速度
• 🎨 主题定制: 基于 CSS 变量的完整主题系统，支持亮色/暗色模式
• 📦 模块化架构: Monorepo 管理，清晰的职责分离
• 🔧 组合式 API: 全面使用 Vue 3 Composition API
• 🌐 按需加载: 支持 Tree Shaking 和自动导入
• ♿ 无障碍设计: 考虑 ARIA 属性和键盘导航
• 📱 响应式: 适配多种屏幕尺寸

🏗️ 架构设计

包结构

@lerna-web-ui/
├── shared   → 共享常量、枚举、类型定义
├── utils    → 工具函数（DOM 操作、类型判断等）
├── core     → 核心能力（composables, directives, plugins）
└── ui       → UI 组件实现（最终用户接口层）

依赖关系

ui → core → shared
     utils ↗

• @lerna-web-ui/shared: 基础包，无内部依赖
• @lerna-web-ui/utils: 工具包，无内部依赖
• @lerna-web-ui/core: 依赖 shared 和 utils
• @lerna-web-ui/ui: 依赖所有其他包，是最终用户的直接接口