跳到主要内容

项目模板

Vibe CLI 提供了多种精心设计的项目模板，帮助你快速启动不同类型的 SaaS 应用。每个模板都包含了最佳实践、现代化的技术栈和完整的项目结构。

🚀 快速开始​

bash
# 查看可用模板
vibe templates list

# 使用特定模板创建项目
vibe create my-app --template=ai-saas

📦 可用模板​

🤖 AI SaaS 模板​

专为 AI 驱动的 SaaS 应用设计，集成了 AI 服务、用户认证、支付系统等功能。

适用场景：

  • AI 写作工具
  • 图片生成应用
  • 聊天机器人
  • 数据分析平台
  • 智能推荐系统

内置功能：

  • 🤖 OpenAI/Anthropic API 集成
  • 🔐 用户认证 (Clerk)
  • 💳 订阅付费 (Stripe)
  • 📊 使用量统计
  • 🎨 现代化 UI (Tailwind CSS)
bash
vibe create my-ai-app --template=ai-saas

🏢 基础 SaaS 模板​

通用的 SaaS 应用模板，包含了大多数 SaaS 应用需要的核心功能。

适用场景：

  • 项目管理工具
  • CRM 系统
  • 团队协作平台
  • 数据仪表板
  • 内容管理系统

内置功能：

  • 👥 用户管理系统
  • 🏢 多租户支持
  • 📊 仪表板界面
  • 🔔 通知系统
  • 📱 响应式设计
bash
vibe create my-saas --template=basic-saas

🛒 电商模板​

完整的电商解决方案，包含商品管理、订单处理、支付集成等功能。

适用场景：

  • 在线商店
  • 数字产品销售
  • 订阅盒子服务
  • B2B 电商平台
  • 市场平台

内置功能：

  • 🛍️ 商品目录管理
  • 🛒 购物车系统
  • 💳 多种支付方式
  • 📦 订单管理
  • 👤 客户账户系统
bash
vibe create my-store --template=e-commerce

🏗️ 模板架构​

所有模板都遵循统一的项目架构，确保代码的可维护性和可扩展性：

project-name/
├── client/                  # 前端应用
│   ├── components/          # React 组件
│   │   ├── ui/             # 基础 UI 组件
│   │   ├── layout/         # 布局组件
│   │   └── features/       # 功能组件
│   ├── pages/              # 页面文件
│   ├── hooks/              # 自定义 Hooks
│   ├── services/           # API 服务
│   ├── utils/              # 工具函数
│   └── styles/             # 样式文件
├── server/                 # 后端应用
│   ├── api/                # API 路由
│   ├── middleware/         # 中间件
│   ├── services/           # 业务逻辑
│   ├── models/             # 数据模型
│   └── utils/              # 工具函数
├── types/                  # 类型定义
├── docs/                   # 项目文档
├── tests/                  # 测试文件
└── config/                 # 配置文件

🛠️ 技术栈​

前端技术栈​

技术版本用途
Next.js14+React 框架
React18+UI 库
TypeScript5+类型安全
Tailwind CSS3+样式框架
shadcn/ui最新UI 组件库

后端技术栈​

技术版本用途
Node.js18+运行时
Next.js API14+API 路由
Prisma5+ORM
PostgreSQL15+数据库
Redis7+缓存

开发工具​

工具用途
ESLint代码检查
Prettier代码格式化
HuskyGit 钩子
Jest单元测试
PlaywrightE2E 测试

🎨 设计系统​

所有模板都包含了完整的设计系统：

颜色主题​

css
:root {
  /* 主色调 */
  --primary: 220 14% 96%;
  --primary-foreground: 220 9% 46%;
  
  /* 次要色调 */
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 9% 46%;
  
  /* 强调色 */
  --accent: 220 14% 96%;
  --accent-foreground: 220 9% 46%;
  
  /* 状态色 */
  --destructive: 0 62% 30%;
  --destructive-foreground: 0 85% 97%;
}

组件库​

  • Button - 按钮组件，支持多种变体
  • Input - 输入框组件，包含验证状态
  • Card - 卡片组件，用于内容展示
  • Dialog - 对话框组件，支持模态和非模态
  • Table - 表格组件，支持排序和分页
  • Form - 表单组件，集成验证逻辑

布局系统​

  • Header - 顶部导航栏
  • Sidebar - 侧边栏导航
  • Footer - 页面底部
  • Container - 内容容器
  • Grid - 网格布局系统

🔧 自定义模板​

你也可以创建自己的模板：

1. 创建模板目录​

bash
mkdir -p ~/.vibe/templates/my-template
cd ~/.vibe/templates/my-template

2. 添加模板配置​

json
template.json
{
  "name": "my-template",
  "displayName": "我的自定义模板",
  "description": "自定义 SaaS 模板",
  "version": "1.0.0",
  "tags": ["custom", "saas"],
  "integrations": ["auth", "database"],
  "features": {
    "typescript": true,
    "tailwind": true,
    "eslint": true
  }
}

3. 使用自定义模板​

bash
vibe create my-app --template=my-template

📚 最佳实践​

1. 选择合适的模板​

  • AI 应用 → 选择 ai-saas 模板
  • 通用 SaaS → 选择 basic-saas 模板
  • 电商应用 → 选择 e-commerce 模板

2. 项目结构​

  • 保持清晰的目录结构
  • 按功能模块组织代码
  • 使用 TypeScript 提高代码质量

3. 代码规范​

  • 遵循 ESLint 规则
  • 使用 Prettier 格式化代码
  • 编写有意义的注释

4. 测试覆盖​

  • 编写单元测试
  • 添加集成测试
  • 使用 E2E 测试验证关键流程

🎯 下一步​

选择合适的模板后，你可以：