Vibe Draw 开源项目教程

1. 项目目录结构及介绍

Vibe Draw 的目录结构如下：

vibe-draw/
├── backend/          # 后端代码目录
│   ├── .env.example  # 环境变量示例文件
│   ├── ...
│   └── Dockerfile    # Docker 配置文件
├── frontend/         # 前端代码目录
│   ├── public/
│   ├── src/
│   ├── ...
│   └── package.json  # 前端项目配置文件
├── .gitattributes     # Git 属性配置文件
├── .gitignore        # Git 忽略文件
├── LICENSE           # 项目许可证文件
├── README.md         # 项目说明文件
└── ...

• backend/: 包含项目的后端代码，使用 FastAPI 框架构建。
• frontend/: 包含项目的前端代码，使用了 Next.js & React。
• .env.example: 后端环境变量配置文件的示例。
• .gitattributes: 定义如何处理项目中的不同文件类型的 Git 属性。
• .gitignore: 定义哪些文件和目录应该被 Git 忽略。
• LICENSE: 项目使用的许可证信息，本项目采用 AGPL-3.0 许可。
• README.md: 项目的基本信息和说明。

2. 项目的启动文件介绍

后端启动

后端项目使用 Docker 进行容器化部署。首先需要确保已经配置好 Docker 环境。启动后端服务的步骤如下：

1. 复制 .env.example 文件为 .env 并填写相关 API 密钥。
2. 运行 docker-compose up 命令启动服务。

前端启动

前端项目使用 npm 管理依赖和脚本。启动前端服务的步骤如下：

1. 切换到 frontend 目录。
2. 运行 npm install 安装依赖。
3. 运行 npm run dev 启动开发服务器。

3. 项目的配置文件介绍

后端配置文件

后端配置主要通过 .env 文件进行，这个文件包含了所有需要配置的环境变量。例如：

DATABASE_URL="postgresql://user:password@localhost/dbname"
API_KEY="your_api_key_here"
...

确保在 .env 文件中填入正确的 API 密钥和数据库连接信息。

前端配置文件

前端配置主要在 frontend/package.json 文件中进行。此文件包含了前端项目的所有依赖项和启动脚本。例如：

{
  "name": "vibe-draw",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    ...
  },
  "dependencies": {
    "next": "^10.0.0",
    "react": "^17.0.0",
    ...
  },
  ...
}

确保在使用前已经正确安装了所有依赖项。