Naruto Vue UI

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

✨ 特性

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

📦 安装

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

# 使用 npm
npm install naruto-vue-ui

# 使用 yarn
yarn add naruto-vue-ui

🚀 快速开始

完整引入

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

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')

按需引入

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

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

🛠️ 开发

环境要求

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

安装依赖

pnpm install

开发模式

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

pnpm dev

构建组件库

# 构建组件库
pnpm build:lib

# 构建文档
pnpm build:docs

文档开发

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

# 构建文档
pnpm docs:build

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

📝 创建新组件

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

pnpm create:component ComponentName

脚本会自动：

• 创建组件目录和文件
• 生成组件模板代码
• 更新组件导出
• 创建文档模板
• 更新 VitePress 配置

例如：

pnpm create:component Input

会创建 Input 组件，包括：

• src/components/input/input.vue - 组件文件
• src/components/input/index.ts - 导出文件
• docs/components/input.md - 文档文件

📦 发布流程

本项目使用 Changesets 管理版本和变更日志。

使用 Changeset 发布（推荐）

1. 创建变更集

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

pnpm changeset

这会引导你：

• 选择变更类型（patch/minor/major）
• 输入变更描述
• 生成变更集文件到 .changeset/ 目录

2. 提交变更集

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

3. 更新版本

当准备发布时，运行：

pnpm version-packages

这会：

• 根据变更集更新版本号
• 生成 CHANGELOG.md
• 更新 package.json 版本

4. 发布

pnpm release

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

传统发布方式（备选）

方式一：使用 npm scripts

# 发布补丁版本 (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

方式二：手动发布

# 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 已更新
• [ ] 所有更改已提交

📚 文档

完整的组件文档请访问：文档地址

本地查看文档：

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 文档
• Element Plus 文档
• Vite 文档
• VitePress 文档

💡 常见问题

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