npm package: @narutozheng/naruto-vue-components
Description: 基于 Vue3 + Element Plus 的业务组件库
Latest version: 0.1.1

# Naruto Vue UI

基于 Vue3 + Element Plus 的业务组件库

## ✨ 特性

- 🎨 基于 Element Plus，保持一致的视觉风格
- 📦 开箱即用，支持按需引入
- 🚀 使用 Vite 构建，开发体验优秀
- 📖 提供完整的 VitePress 文档和示例
- 🔧 支持 TypeScript
- 💪 使用 Vue 3 Composition API
- 🛠️ 提供组件快速生成脚本

## 📦 安装

```bash
# 使用 pnpm（推荐）
pnpm add naruto-vue-ui

# 使用 npm
npm install naruto-vue-ui

# 使用 yarn
yarn add naruto-vue-ui
```

## 🚀 快速开始

### 完整引入

在 `main.ts` 中写入以下内容：

```typescript
import { createApp } from 'vue'
import NarutoVueUI from 'naruto-vue-ui'
import 'naruto-vue-ui/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(NarutoVueUI)
app.mount('#app')
```

### 按需引入

```vue
<template>
  <NarutoButton type="primary">按钮</NarutoButton>
</template>

<script setup>
import { NarutoButton } from 'naruto-vue-ui'
</script>
```

## 🛠️ 开发

### 环境要求

- Node.js >= 16
- pnpm >= 8

### 安装依赖

```bash
pnpm install
```

### 开发模式

启动开发服务器，查看组件示例：

```bash
pnpm dev
```

### 构建组件库

```bash
# 构建组件库
pnpm build:lib

# 构建文档
pnpm build:docs
```

### 文档开发

```bash
# 启动文档开发服务器
pnpm docs:dev

# 构建文档
pnpm docs:build

# 预览构建后的文档
pnpm docs:preview
```

## 📝 创建新组件

使用提供的脚本快速创建新组件：

```bash
pnpm create:component ComponentName
```

脚本会自动：
- 创建组件目录和文件
- 生成组件模板代码
- 更新组件导出
- 创建文档模板
- 更新 VitePress 配置

例如：

```bash
pnpm create:component Input
```

会创建 `Input` 组件，包括：
- `src/components/input/input.vue` - 组件文件
- `src/components/input/index.ts` - 导出文件
- `docs/components/input.md` - 文档文件

## 📦 发布流程

本项目使用 [Changesets](https://github.com/changesets/changesets) 管理版本和变更日志。

### 使用 Changeset 发布（推荐）

#### 1. 创建变更集

在完成功能开发或修复后，创建变更集：

```bash
pnpm changeset
```

这会引导你：
- 选择变更类型（patch/minor/major）
- 输入变更描述
- 生成变更集文件到 `.changeset/` 目录

#### 2. 提交变更集

```bash
git add .
git commit -m "chore: add changeset"
git push
```

#### 3. 更新版本

当准备发布时，运行：

```bash
pnpm version-packages
```

这会：
- 根据变更集更新版本号
- 生成 CHANGELOG.md
- 更新 package.json 版本

#### 4. 发布

```bash
pnpm release
```

这会发布到 npm 并创建 git tag。

### 传统发布方式（备选）

#### 方式一：使用 npm scripts

```bash
# 发布补丁版本 (0.1.0 -> 0.1.1)
pnpm publish:patch

# 发布次要版本 (0.1.0 -> 0.2.0)
pnpm publish:minor

# 发布主要版本 (0.1.0 -> 1.0.0)
pnpm publish:major
```

#### 方式二：手动发布

```bash
# 1. 构建组件库
pnpm build:lib

# 2. 类型检查
pnpm type-check

# 3. 更新版本号
npm version patch  # 或 minor, major

# 4. 提交更改
git add .
git commit -m "chore: release v<version>"
git tag -a "v<version>" -m "Release v<version>"

# 5. 推送到远程
git push
git push --tags

# 6. 发布到 npm
npm publish --access public
```

### 发布检查清单

- [ ] 代码已通过 lint 检查
- [ ] 类型检查通过
- [ ] 组件库构建成功
- [ ] 文档已更新
- [ ] 已创建 changeset（如果使用 changeset）
- [ ] 版本号已更新
- [ ] CHANGELOG 已更新
- [ ] 所有更改已提交

## 📚 文档

完整的组件文档请访问：[文档地址](https://your-docs-site.com)

本地查看文档：

```bash
pnpm docs:dev
```

## 🏗️ 项目结构

```
naruto-vue-ui/
├── src/                    # 源代码
│   ├── components/         # 组件目录
│   │   ├── button/         # Button 组件
│   │   │   ├── button.vue  # 组件文件
│   │   │   └── index.ts    # 导出文件
│   │   └── index.ts        # 组件统一导出
│   ├── demo/               # 开发示例
│   │   ├── App.vue
│   │   └── main.ts
│   ├── install.ts          # 安装函数
│   └── index.ts            # 入口文件
├── docs/                   # VitePress 文档
│   ├── .vitepress/         # VitePress 配置
│   ├── components/         # 组件文档
│   └── guide/              # 指南文档
├── scripts/                # 脚本文件
│   ├── create-component.js # 组件生成脚本
│   ├── publish.sh          # 发布脚本（Linux/Mac）
│   ├── publish.cmd          # 发布脚本（Windows）
│   └── prepublish-check.js # 发布前检查
├── dist/                   # 构建输出
├── vite.config.ts          # Vite 开发配置
├── vite.config.lib.ts      # Vite 构建配置
└── package.json
```

## 🤝 贡献

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

MIT License

## 🔗 相关链接

- [Vue 3 文档](https://cn.vuejs.org/)
- [Element Plus 文档](https://element-plus.org/)
- [Vite 文档](https://cn.vitejs.dev/)
- [VitePress 文档](https://vitepress.dev/)

## 💡 常见问题

### Q: 如何自定义主题？

A: 可以通过覆盖 Element Plus 的 CSS 变量来自定义主题，或者使用 Element Plus 的主题定制工具。

### Q: 支持 SSR 吗？

A: 支持。组件库使用 Vue 3 编写，可以在 SSR 环境中使用。

### Q: 如何按需引入？

A: 直接导入需要的组件即可，例如：`import { NarutoButton } from 'naruto-vue-ui'`

### Q: 如何贡献新组件？

A: 使用 `pnpm create:component ComponentName` 创建组件模板，然后实现功能并提交 PR。

---

Made with ❤️ by Naruto Vue UI Team