# fastapi-vue3-demo

**Repository Path**: xiaolinlu/fastapi-vue3-demo

## Basic Information

- **Project Name**: fastapi-vue3-demo
- **Description**: 提供一个结合 FastAPI 和 Vue 3 的简单示例，这个示例包含一个前端页面用于展示和添加任务，以及一个后端 API 来处理任务的增删改查操作。
    
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-04-18
- **Last Updated**: 2025-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Luxiaolin's  从零开始AI编程项目系列(1) 

### python+fastapi+vue3构建简单的web应用 

下面为你提供一个结合 FastAPI 和 Vue 3 的简单示例，这个示例包含一个前端页面用于展示和添加任务，以及一个后端 API 来处理任务的增删改查操作。 项目结构

## 项目概述

本项目结合了 FastAPI 作为后端服务，Vue 作为前端框架，构建一个完整的 Web 应用。

## 项目结构

```plaintext
fastapi-vue/
├── README.md
├── README2.md
├── backend/
│   ├── __pycache__/
│   ├── main.py
│   ├── requirements.txt
│   └── routes.py
└── frontend/
    ├── .vite/
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── src/
    └── vite.config.js
```

## 后端运行步骤

1.  进入后端目录：`cd backend`
2.  安装依赖：`pip install -r requirements.txt`
3.  启动服务：`uvicorn main:app --reload`

## 前端运行步骤

1.  进入前端目录：`cd frontend`
2.  安装依赖：`npm install --registry=https://registry.npmmirror.com`
3.  启动开发服务器：`npm run dev`

## 构建与部署

### 前端构建

在前端目录下运行：`npm run build`

### 部署建议

可以使用 Nginx 部署前端静态文件，使用 Gunicorn 或 Uvicorn 部署后端服务。

## 依赖说明

### 后端依赖

详见 `backend/requirements.txt` 文件。

### 前端依赖

详见 `frontend/package.json` 文件。