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+

安装依赖

pnpm install

启动开发服务器

pnpm dev

访问 http://localhost:5173 查看项目。

构建生产版本

pnpm build

预览生产构建

pnpm preview

📁 项目结构

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

🎨 使用 shadcn-vue 组件

添加新组件

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

例如添加 Card 组件：

pnpm dlx shadcn-vue@latest add card

使用组件

<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 文档 了解可用组件
2. 阅读 Vue 3 文档 学习 Vue 3 特性
3. 查看 Tailwind CSS 文档 学习样式系统
4. 探索 Vite 文档 了解构建工具特性

📄 许可证

MIT License