JT Element Plus

基于 Element Plus 源码的自定义组件库，使用 Vite + Rolldown 打包。

📦 特性

• ✅ 保留 Element Plus 所有核心组件
• ✅ 包含完整的主题样式 (theme-chalk)
• ✅ 提供 Hooks、指令、工具函数等
• ✅ 使用 Vite + Rolldown 进行快速构建
• ✅ 支持 ESM 和 CommonJS 模块
• ✅ TypeScript 类型定义

📁 项目结构

jt-element-plus/
├── packages/              # 源代码
│   ├── components/        # 所有组件
│   ├── theme-chalk/       # 样式文件
│   ├── hooks/             # Composables
│   ├── utils/             # 工具函数
│   ├── locale/            # 国际化
│   ├── directives/        # Vue 指令
│   ├── constants/         # 常量定义
│   └── index.ts           # 统一入口
├── scripts/               # 构建脚本
├── dist/                  # 构建输出（打包后生成）
└── vite.config.ts         # Vite 配置

🚀 安装依赖

# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install

🔨 构建

完整构建（推荐）

npm run build:all

这个命令会：

1. 清理旧的构建文件
2. 构建组件库
3. 构建样式文件

分步构建

# 仅构建组件库
npm run build

# 仅构建样式
npm run build:theme

# 清理构建文件
npm run clean

📤 构建产物

构建完成后，dist/ 目录包含：

dist/
├── es/                # ES Module 格式
│   └── index.mjs
├── lib/               # CommonJS 格式
│   └── index.js
├── types/             # TypeScript 类型定义
│   └── index.d.ts
├── index.css          # 完整样式文件
└── *.map              # Source map 文件

💡 使用方法

完整引入

import { createApp } from 'vue'
import JTElementPlus from 'jt-element-plus'
import 'jt-element-plus/dist/index.css'

const app = createApp(App)
app.use(JTElementPlus)

按需引入

import { ElButton, ElInput } from 'jt-element-plus'
import 'jt-element-plus/dist/index.css'

// 在组件中使用
export default {
  components: {
    ElButton,
    ElInput
  }
}

使用 Hooks

import { useNamespace, useLocale } from 'jt-element-plus'

使用指令

import { ClickOutside, vRepeatClick } from 'jt-element-plus'

🛠️ 开发

# 启动开发服务器
npm run dev

# 预览构建结果
npm run preview

📝 与原版 Element Plus 的主要改动

1. 移除了测试相关代码

   • 删除了所有 __tests__ 文件夹
   • 移除了测试工具依赖

2. 简化了构建流程

   • 使用 Vite + Rolldown 替代原有的复杂构建系统
   • 统一的打包配置

3. 精简了依赖

   • 只保留生产环境必需的依赖
   • 移除了 monorepo 相关的复杂配置

4. 统一的入口文件

   • 创建了 packages/index.ts 作为唯一入口
   • 方便按需引入和完整引入

🔧 配置说明

Vite 配置

查看 vite.config.ts 了解详细的构建配置。

关键配置：

• 支持 ESM 和 CommonJS 双格式输出
• 自动生成 TypeScript 类型定义
• 样式文件独立打包
• 外部化 Vue 和其他依赖

TypeScript 配置

• tsconfig.json - 基础配置
• tsconfig.app.json - 应用配置
• tsconfig.node.json - Node 环境配置

📄 许可证

MIT License

注意：本项目基于 Element Plus 源码进行精简和定制，仅用于学习和内部使用。