# vue3-tailwind-vite-shadcn

**Repository Path**: lawrencexu2012/vue3-tailwind-vite-shadcn

## Basic Information

- **Project Name**: vue3-tailwind-vite-shadcn
- **Description**: Vue 3 + TailwindCSS + shadcn/vue + Vite 模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-09-22
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TailwindCSS + shadcn/vue + Vite 模板

这是一个基础模板，可以在FunctionCat中进行设置、配置、扩展和部署。它包括：

- Vue 3
- TypeScript
- TailwindCSS
- shadcn/vue 组件
- Vite 构建工具

## 功能特性

- 🚀 现代化的 Vue 和 TypeScript
- 🎨 TailwindCSS 样式定制和主题
- 🧱 预配置的 shadcn/vue 组件
- ⚡ Vite 快速开发和构建
- 📁 遵循最佳实践的文件结构
- 🌙 Light/Dark 模式支持
- 📱 完全响应式设计
- 🎯 支持 FunctionCat 部署

## 开始使用

1. 克隆此模板
2. 安装依赖:
   ```bash
   npm install
   ```
3. 启动开发服务器:
   ```bash
   npm run dev
   ```

## 项目结构

```
.
├── src/
│   ├── assets/           # 静态资源
│   ├── components/       # Vue 组件
│   │   └── ui/           # shadcn/vue 组件
│   ├── lib/              # 工具函数
│   ├── App.vue           # 主应用组件
│   ├── main.ts          # 入口文件
│   └── index.css         # 全局样式
├── components.json       # shadcn/vue 配置
├── vite.config.ts        # Vite 配置
├── tsconfig.json         # TypeScript 配置
├── tsconfig.app.json     # TypeScript App配置
└── package.json          # 依赖和脚本
```

## Light/Dark 模式

此模板内置了 Light 和 Dark 主题支持：

- 自动检测系统主题偏好
- 头部有切换按钮
- 可完全自定义配色方案

要自定义主题颜色，请修改 `src/index.css` 中的 CSS 变量。

## 响应式设计

模板完全响应式，在所有设备尺寸上都能正常工作：

- 移动优先的方法
- 响应式网格布局
- 自适应组件
- 触摸友好的导航

## 可用脚本

- `npm run dev` - 启动开发服务器
- `npm run build` - 构建生产版本
- `npm run preview` - 预览生产构建
- `npm run lint` - 运行 ESLint

## 添加 shadcn/vue 组件

您可以使用 CLI 添加更多 shadcn/vue 组件：

```bash
npx shadcn-vue@latest add button
```

## 部署

此模板已准备好在 FunctionCat 上部署。只需按照 FunctionCat 平台中的标准部署流程操作即可。

## 自定义

- 在 `src/components/` 中添加新组件
- 在 `src/lib/utils.ts` 中扩展工具函数
- 在 `src/index.css` 中更新全局样式

## 通过AI开发
可以尝试类似下面的prompt
```
请根据这个模板。
参考 llms_courses.txt 来创建一个新的系统。

1）根据用户输入<user_input>，定义spec.md文件。
2）要求尽量功能简单，UI 美观，风格年轻化。
3）统一新系统的标识，head, favicon 等
4）请实现 spec 的内容。

<user_input>
创建一个图书管理系统，并部署到函数猫。
</user_input>
```
用上面的 prompt, 将user_input里面的内容换成你想要的。