Vue.js 与 Flask/Django 后端配合：构建现代 Web 应用的最佳实践

Vue.js 与 Flask/Django 后端配合：构建现代 Web 应用的最佳实践

在现代 Web 开发中，前后端分离的架构已经成为主流。Vue.js 作为一个渐进式 JavaScript 框架，因其灵活性和易用性而广受欢迎。而 Flask 和 Django 则是 Python 生态中两个非常流行的 Web 框架。本文将详细介绍如何将 Vue.js 与 Flask 或 Django 后端配合使用，构建一个功能强大且高效的 Web 应用。

一、项目结构设计

在开始开发之前，设计一个合理的项目结构是非常重要的。以下是一个推荐的项目结构：

my_project/
├── backend/
│   ├── app/
│   │   ├── __init__.py
│   │   ├── models.py
│   │   ├── views.py
│   │   └── ...
│   ├── venv/
│   ├── requirements.txt
│   └── run.py
└── frontend/
    ├── public/
    ├── src/
    │   ├── assets/
    │   ├── components/
    │   ├── views/
    │   ├── App.vue
    │   ├── main.js
    │   └── ...
    ├── package.json
    └── vue.config.js

二、后端开发

1. Flask 后端开发

首先，创建一个虚拟环境并安装 Flask：

cd backend
python -m venv venv
source venv/bin/activate  # Windows 用户使用 venv\Scripts\activate
pip install Flask

创建 run.py 文件并初始化 Flask 应用：

from app import create_app

app = create_app()

if __name__ == '__main__':
    app.run(debug=True)

在 app 目录下创建 __init__.py 文件：

from flask import Flask
from flask_cors import CORS

def create_app():
    app