# shadcn-vue 模板项目

一个基于 Vue 3 + TypeScript + Vite + shadcn-vue 的现代化前端开发模板。

## ✨ 特性

- 🚀 **Vue 3** - 使用 Composition API 和 `<script setup>` 语法
- 🔷 **TypeScript** - 完整的类型支持
- ⚡ **Vite** - 极速的开发体验
- 🎨 **shadcn-vue** - 美观且可定制的 UI 组件库
- 🎯 **Tailwind CSS** - 实用优先的 CSS 框架
- 📦 **pnpm** - 快速、节省磁盘空间的包管理器
- 🔧 **ESLint + Prettier** - 代码质量和格式化
- 🎪 **Reka UI** - 无样式的可访问性组件

## 🛠️ 技术栈

- **框架**: Vue 3.4+
- **构建工具**: Vite 7+
- **语言**: TypeScript 5+
- **UI 库**: shadcn-vue
- **样式**: Tailwind CSS
- **包管理**: pnpm
- **代码规范**: ESLint + Prettier

## 🚀 快速开始

### 环境要求

- Node.js 18+
- pnpm 8+

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

访问 [http://localhost:5173](http://localhost:5173) 查看项目。

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

## 📁 项目结构

```
src/
├── components/
│   ├── ui/           # shadcn-vue UI 组件
│   └── HelloWorld.vue
├── lib/
│   └── utils.ts      # 工具函数
├── App.vue           # 根组件
└── main.ts          # 入口文件
```

## 🎨 使用 shadcn-vue 组件

### 添加新组件

```bash
pnpm dlx shadcn-vue@latest add [component-name]
```

例如添加 Card 组件：

```bash
pnpm dlx shadcn-vue@latest add card
```

### 使用组件

```vue
<script setup lang="ts">
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>标题</CardTitle>
    </CardHeader>
    <CardContent>
      <Button>点击我</Button>
    </CardContent>
  </Card>
</template>
```

## 🔧 开发工具

项目已配置了以下 VS Code 扩展推荐：

- **Vue.volar** - Vue 3 官方插件
- **ESLint** - 代码质量检测
- **Prettier** - 代码格式化
- **Tailwind CSS IntelliSense** - Tailwind 智能提示
- **Auto Import** - 自动导入
- **Path Intellisense** - 路径自动补全
- **GitLens** - Git 增强工具

## 📝 可用脚本

- `pnpm dev` - 启动开发服务器
- `pnpm build` - 构建生产版本
- `pnpm preview` - 预览生产构建
- `pnpm lint` - 运行 ESLint 检查
- `pnpm format` - 运行 Prettier 格式化

## 🎯 下一步

1. 查看 [shadcn-vue 文档](https://www.shadcn-vue.com/) 了解可用组件
2. 阅读 [Vue 3 文档](https://vuejs.org/) 学习 Vue 3 特性
3. 查看 [Tailwind CSS 文档](https://tailwindcss.com/) 学习样式系统
4. 探索 [Vite 文档](https://vitejs.dev/) 了解构建工具特性

## 📄 许可证

MIT License