跑通最简单的Vue3+Python前后端分离项目

前端 Vue 发请求 → 后端 Python 接收 → 返回数据 → 前端展示。

一、前置环境

前端用：Node.js

后端用：Python 3.8+

1.1 项目结构

在项目里建立两个文件夹：

|------backend # Python后端（提供接口）

|------frontend # vue前端（页面展示）

1.2 确认安装成功

Vue 前端是基于 Node.js/npm 运行的

python 复制代码

python --version 
node --version 
npm --version

二、搭建Python后端

2.1 终端进入backend文件夹

cd backend

2.2 创建虚拟环境

python 复制代码

>>>python -m venv de_env 执行命令，backend 里会多出个 de_env 文件夹。

>>>de_env\Scripts\activate 激活虚拟环境

>>>deactivate 退出虚拟环境

Scripts ------ n. 脚本；符号系统；原稿；手稿

2.3 安装后端依赖

pip install fastapi uvicorn

2.4 写后端代码（唯一main.py文件）

python 复制代码

# 导入FastAPI框架
from fastapi import FastAPI
# 解决跨域（前端访问后端必备）
from fastapi.middleware.cors import CORSMiddleware

# 创建后端应用
app = FastAPI()

# 配置跨域（允许前端访问）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 【核心】写一个接口：前端访问这个地址，返回一句话
@app.get("/api/hello")
def hello():
    return {"message": "我是Python后端！成功连接Vue前端啦～"}

2.5 启动后端服务

uvicorn main:app --reload

三、搭建Vue前端

3.1 新建终端，创建 Vue 项目

python 复制代码

# 1. 创建Vue项目
npm create vite@latest frontend -- --template vue

这说明 Vue3 + Vite 项目已经成功启动， 接下来，在终端里按 Ctrl + C 停止当前服务，进入后续步骤。

3.2 进入前端文件夹 + 安装依赖

python 复制代码

# 2. 进入前端文件夹
cd frontend 
# 3. 安装依赖 ------（装 Vue 核心，必做）
npm install
# 4. 安装请求工具（前端发请求用）
npm install axios

3.3 修改 Vue 代码（调用后端接口）

打开 src/App.vue，全选删除，复制下面代码：

python 复制代码

<template>
  <div class="box">
    <h1>Vue + Python 前后端项目</h1>
    <!-- 展示后端返回的数据 -->
    <h2>{{ msg }}</h2>
  </div>
</template>

<script setup>
// 导入请求工具
import axios from 'axios'
import { ref } from 'vue'

// 定义变量，接收后端数据
const msg = ref('正在连接后端...')

// 发送请求，访问Python后端接口
axios.get('http://localhost:8000/api/hello')
  .then(res => {
    // 请求成功，把后端数据赋值给变量
    msg.value = res.data.message
  })
  .catch(err => {
    msg.value = '连接后端失败！'
    console.log(err)
  })
</script>

<style scoped>
.box {
  text-align: center;
  margin-top: 100px;
}
</style>

App.vue = 整个 Vue 项目的是所有页面的起点，浏览器打开你的 Vue 项目，第一个加载、永远显示的就是它！

核心作用：

容器：承载所有子页面

公共布局：存放导航、页脚等全局组件

路由出口：实现页面切换

全局管理：统一管理配置、状态

App.vue 是 Vue 项目的根入口，是所有页面的容器，全局布局的载体。

3.4 启动前端

python 复制代码

npm run dev

3.5 注意

要保持后端终端运行， 保持前端终端运行， 浏览器打开前端地址：http://localhost:5173

3.6 后续的进入

backend 终端 >> 进入虚拟环境de_env：de_env\Scripts\activate >> uvicorn main:app --reload

frontend 终端 >> npm run dev 启动前端

3.7 后续进阶

现在我们已经完成一个最简单的Vue+Python前后端分离项目，熟记代码编写位置，是后续进阶开发的关键。

1. Vue前端

src/views/ → 写页面（首页、函数绘图页、设置页）

src/components/ → 写公共组件（按钮、输入框、绘图面板）

src/api/ → 写后端请求（调用 Python 接口）

src/router/index.js → 写路由（页面切换）

App.vue → 只放导航 + 路由出口（不写业务）

2. Python后端

现在我们只有 1 个 main.py，后续项目会拆分模块：

backend/routers/ → 写接口（函数计算、数据返回）

backend/main.py → 总入口（启动服务、注册路由）

backend/utils/ → 写工具函数（函数计算逻辑）