# @trapar-waves/vue-tailwind

[![npm version](https://img.shields.io/npm/v/@trapar-waves/vue-tailwind)](https://www.npmjs.com/package/@trapar-waves/vue-tailwind)
[![npm downloads](https://img.shields.io/npm/dm/@trapar-waves/vue-tailwind)](https://www.npmjs.com/package/@trapar-waves/vue-tailwind)
[![License](https://img.shields.io/github/license/Trapar-waves/vue-tailwind)](https://github.com/Trapar-waves/vue-tailwind/blob/main/LICENSE)
[![Last commit](https://img.shields.io/github/last-commit/Trapar-waves/vue-tailwind)](https://github.com/Trapar-waves/vue-tailwind/commits/main)
[![CI Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/vue-tailwind/release.yml?label=CI)](https://github.com/Trapar-waves/vue-tailwind/actions/workflows/release.yml)
[![Renovate](https://img.shields.io/badge/renovate-enabled-blue)](https://renovatebot.com/)

[English](../README.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)

> 一个用于快速前端开发的Vue 3项目模板，集成了Tailwind CSS和现代开发工具。

## ✨ 特性

- **Vue 3**: 利用Vue的最新特性构建用户界面。
- **Tailwind CSS v4**: 实用优先的CSS框架，用于快速UI开发。
- **TypeScript**: 强类型检查，提升代码质量和开发体验。
- **Rsbuild**: 快速高效的现代Web开发构建工具。
- **@vueuse/core**: 重要的Vue组合式API工具集。
- **Iconify 集成**: 通过Tailwind CSS轻松使用Iconify图标。
- **ESLint & Antfu 配置**: 强制代码风格和最佳实践。
- **PostCSS**: 使用`@tailwindcss/postcss`实现最佳的Tailwind集成。

## 💻 技术栈

- **框架**: [Vue 3](https://v3.vuejs.org/)
- **样式**: [Tailwind CSS v4](https://tailwindcss.com/)
- **状态管理**: [VueUse](https://vueuse.org/)
- **构建工具**: [Rsbuild](https://rsbuild.dev/)
- **语言**: [TypeScript](https://www.typescriptlang.org/)
- **代码检查**: [ESLint](https://eslint.org/) 与 [Antfu's Config](https://github.com/antfu/eslint-config)
- **图标**: [Iconify](https://iconify.design/) 与 [Tailwind 插件](https://docs.iconify.design/)

完整依赖列表参见 [package.json](./package.json)。

## 🚀 快速开始

### 前提条件

- Node.js (推荐 >= 18.x)
- 包管理器 (npm, yarn, 或 pnpm)

```bash
node -v
npm -v # 或 yarn -v / pnpm -v
```

### 创建项目

使用模板创建新项目:

```bash
pnpm create trapar-waves
```

### 安装依赖

进入项目目录并安装依赖:

```bash
# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install
```

### 开发

启动开发服务器:

```bash
# 使用 npm
npm run dev

# 使用 yarn
yarn dev

# 使用 pnpm
pnpm dev
```

### 构建

创建生产构建:

```bash
# 使用 npm
npm run build

# 使用 yarn
yarn build

# 使用 pnpm
pnpm build
```

### 预览

本地预览生产构建:

```bash
# 使用 npm
npm run preview

# 使用 yarn
yarn preview

# 使用 pnpm
pnpm preview
```

## 🧪 代码检查

使用ESLint检查代码:

```bash
# 使用 npm
npm run lint

# 使用 yarn
yarn lint

# 使用 pnpm
pnpm lint
```

## 🤝 贡献

欢迎贡献！您可以通过以下方式参与:

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 发起 Pull Request

请确保您的代码遵循项目风格指南并通过所有测试。

## 👤 作者

**Rikka**

- 邮箱: [admin@rikka.cc](mailto:admin@rikka.cc)
- GitHub: [Muromi-Rikka](https://github.com/Muromi-Rikka)

## 📄 许可证

本项目采用 MIT 许可证 - 详情见 [LICENSE](./LICENSE) 文件。

## 🔗 链接

- **仓库**: [https://github.com/Trapar-waves/vue-tailwind](https://github.com/Trapar-waves/vue-tailwind)
- **主页**: [https://github.com/Trapar-waves/vue-tailwind](https://github.com/Trapar-waves/vue-tailwind)
- **问题**: [https://github.com/Trapar-waves/vue-tailwind/issues](https://github.com/Trapar-waves/vue-tailwind/issues)