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

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

一、前置环境

前端用：Node.js

后端用：Python 3.8+

1.1 项目结构

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

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

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

1.2 确认安装成功

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

python –version
node –version
npm –version

二、搭建Python后端

2.1 终端进入backend文件夹

cd backend

2.2 创建虚拟环境

>>>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文件）

# 导入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 项目

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

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

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

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

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

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

<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 启动前端

npm run dev

3.5 注意

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

3.6 后续的进入

3.7 后续进阶

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

1. Vue前端

2. Python后端

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