Django-Vue3-Admin 项目教程

1. 项目的目录结构及介绍

Django-Vue3-Admin 项目的目录结构如下：

django-vue3-admin/
├── backend/
│   ├── conf/
│   ├── docker_env/
│   ├── web/
│   ├── manage.py
│   ├── requirements.txt
│   └── ...
├── web/
│   ├── public/
│   ├── src/
│   ├── .env.development
│   ├── .env.production
│   ├── package.json
│   ├── vite.config.ts
│   └── ...
├── docker-compose.yml
├── README.md
├── README.zh.md
└── ...

目录结构介绍

• backend/: 后端代码目录，包含 Django 项目的主要代码。

  • conf/: 配置文件目录，包含环境配置文件。
  • docker_env/: Docker 环境配置目录。
  • web/: 前端代码目录，包含 Vue3 项目的主要代码。
  • manage.py: Django 项目的管理脚本。
  • requirements.txt: Python 依赖包列表。

• web/: 前端代码目录，包含 Vue3 项目的主要代码。

  • public/: 公共资源目录。
  • src/: 源代码目录，包含 Vue3 项目的所有源代码。
  • .env.development: 开发环境配置文件。
  • .env.production: 生产环境配置文件。
  • package.json: 前端项目的依赖包列表。
  • vite.config.ts: Vite 配置文件。

• docker-compose.yml: Docker Compose 配置文件，用于一键启动项目。

• README.md: 项目英文介绍文档。

• README.zh.md: 项目中文介绍文档。

2. 项目的启动文件介绍

后端启动文件

• manage.py: Django 项目的管理脚本，用于启动 Django 服务器、执行数据库迁移等操作。

# 启动 Django 服务器
python3 manage.py runserver 0.0.0.0:8000

# 使用 Uvicorn 启动
uvicorn application.asgi:application --port 8000 --host 0.0.0.0 --workers 8

前端启动文件

• package.json: 包含项目的启动命令。

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产环境
npm run build

3. 项目的配置文件介绍

后端配置文件

• conf/env.example.py: 环境配置文件模板，需要复制并重命名为 env.py，并在其中配置数据库信息。

# 示例配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_database_user',
        'PASSWORD': 'your_database_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

前端配置文件

• .env.development: 开发环境配置文件，包含开发服务器的端口等信息。

# 示例配置
VITE_PORT=8080
VITE_BASE_URL=http://localhost:8000

• .env.production: 生产环境配置文件，包含生产环境的配置信息。

# 示例配置
VITE_PORT=80
VITE_BASE_URL=https://yourdomain.com

通过以上配置文件，可以灵活地调整项目的运行环境和参数。