open-index/open-npm huggingface dataset:
npm package: @oyai32/counter
Description: xx组件
Latest version: 1.0.1

# Counter 组件

一个基于 Vue3 的计数器组件，支持自动生成 API 文档和 Changelog。

## 项目结构

```
component-docs/
├── src/                    # 组件源码
│   ├── components/         # 组件文件
│   └── index.ts           # 入口文件
├── docs/                  # 文档
│   ├── .vitepress/        # VitePress 配置
│   ├── components/        # 组件文档
│   └── index.md           # 首页
├── demo/                  # 示例
│   └── examples/          # 组件示例
├── scripts/               # 构建脚本
│   ├── generate-api.js    # API 文档生成
│   └── generate-changelog.js # Changelog 生成
└── package.json           # 项目配置
```

## 功能特性

- 🎯 **组件开发**: 在 `src/components/` 中开发 Vue3 组件
- 📚 **文档生成**: 自动生成组件 API 文档
- 🔄 **Changelog**: 基于 Git 提交自动生成更新日志
- 🎨 **示例展示**: 在 `demo/examples/` 中创建组件使用示例
- 📖 **文档编写**: 在 `docs/components/` 中编写组件文档

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发文档

```bash
npm run dev
```

### 构建文档

```bash
npm run build
```

### 生成 API 文档

```bash
npm run api:generate
```

### 生成 Changelog

```bash
npm run changelog:generate
```

### 构建和发布 npm 包

```bash
# 仅构建组件库
npm run build:npm

# 构建并发布到 npm
npm run publish:npm
```

详细发布流程请查看 [NPM_PUBLISH.md](./NPM_PUBLISH.md)

## 开发指南

### 1. 创建新组件

1. 在 `src/components/` 中创建组件文件
2. 在 `src/index.ts` 中导出组件
3. 运行 `npm run api:generate` 生成 API 文档
4. 在 `demo/examples/` 中创建使用示例
5. 在 `docs/components/` 中编写组件文档

### 2. 编写组件文档

组件文档支持以下特性：

- **Props 表格**: 自动生成组件属性说明
- **Events 表格**: 自动生成事件说明
- **Slots 表格**: 自动生成插槽说明
- **示例代码**: 展示组件使用方法

### 3. 创建组件示例

在 `demo/examples/` 中创建 `.vue` 文件，展示组件的各种用法：

```vue
<template>
  <div class="demo">
    <YourComponent />
  </div>
</template>

<script setup>
import { YourComponent } from '@/components'
</script>
```

### 4. 提交规范

使用 Conventional Commits 规范提交代码：

- `feat:` 新功能
- `fix:` 修复问题
- `docs:` 文档更新
- `style:` 代码格式
- `refactor:` 重构
- `test:` 测试
- `chore:` 构建过程或辅助工具的变动

## 技术栈

- **Vue 3**: 组件开发框架
- **VitePress**: 文档生成工具
- **TypeScript**: 类型支持
- **Vite**: 构建工具

## 许可证

MIT