136 lines
2.8 KiB
Markdown
136 lines
2.8 KiB
Markdown
# 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
|