JM Plus 组件库

这是一个基于 Vue 3 + TypeScript + Element Plus 的组件库快速搭建示例。

项目结构

jm-plus/
├── packages/
│   ├── components/          # 组件源码
│   │   └── button/          # Button 组件
│   ├── theme-chalk/         # 样式主题包
│   │   ├── src/             # SCSS 源文件
│   │   └── mixins/          # SCSS 混入
│   └── jm-plus/             # 主入口包
├── src/                     # 示例应用
├── package.json
├── pnpm-workspace.yaml      # Monorepo 配置
└── vite.config.ts

快速开始

1. 安装依赖

cd jm-plus
pnpm install

2. 运行示例

pnpm dev

3. 构建组件库

pnpm build

组件使用

全局注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 注意：发布后包名会是 @你的用户名/jm-plus
import JmPlus from '@你的用户名/jm-plus'

const app = createApp(App)
app.use(ElementPlus)
app.use(JmPlus)
app.mount('#app')

按需引入

<script setup lang="ts">
// 注意：发布后包名会是 @你的用户名/jm-plus
import { MyButton } from '@你的用户名/jm-plus'
</script>

<template>
  <MyButton type="primary">按钮</MyButton>
</template>

组件特性

MyButton 组件

• 基于 Element Plus Button 封装
• 支持防抖功能（debounce）
• 可自定义防抖时间（debounceTime）
• 继承所有 Element Plus Button 的属性

扩展组件

要添加新组件，只需：

1. 在 packages/components/ 下创建新组件目录
2. 实现组件代码
3. 在 packages/components/index.ts 中导出
4. 在 packages/jm-plus/component.ts 中注册

已完成

✅ 样式系统：已创建 packages/theme-chalk 包，支持 SCSS 样式管理
✅ 构建系统：已配置完整的 Rollup + ESBuild 构建流程，支持：

• 全量构建（UMD + ESM 格式）
• 按需加载模块构建（ESM + CJS 格式）
• TypeScript 类型定义生成
• 样式文件构建和压缩
• 自动版本号更新
  ✅ 单元测试：已集成 Vitest 测试框架，支持：
• 组件单元测试
• 代码覆盖率报告
• 测试 UI 界面
• 自动化测试流程

构建说明

构建命令

# 完整构建（清理 + 样式 + 主包）
pnpm build

# 仅构建样式
pnpm build:theme

# 仅构建主包
pnpm build:main

# 清理构建产物
pnpm clean

构建产物

构建完成后，产物位于 dist/jm-plus/ 目录：

dist/jm-plus/
├── es/              # ESM 格式（按需加载）
├── lib/             # CJS 格式（按需加载）
├── index.js         # UMD 格式（全量）
├── index.mjs        # ESM 格式（全量）
├── index.min.js     # UMD 格式（压缩）
├── index.min.mjs    # ESM 格式（压缩）
├── package.json     # 包配置
└── README.md        # 说明文档

测试

运行测试

# 运行测试（监听模式）
pnpm test

# 运行测试（单次）
pnpm test:run

# 运行测试并生成覆盖率报告
pnpm test:coverage

# 打开测试 UI 界面
pnpm test:ui

测试覆盖率

测试覆盖率阈值设置为 60%，包括：

• 行覆盖率（lines）
• 函数覆盖率（functions）
• 分支覆盖率（branches）
• 语句覆盖率（statements）

覆盖率报告会生成在 coverage/ 目录下。

下一步

• 添加更多组件
• 配置自动导入解析器
• 搭建文档站点（VitePress）