vue+Flask项目创建过程笔记

最新推荐文章于 2024-10-18 12:50:08 发布

Coach-XP

最新推荐文章于 2024-10-18 12:50:08 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

分类专栏：全栈文章标签： vue python

本文链接：https://blog.csdn.net/weixin_45766122/article/details/107598837

本文记录了使用Vue和Flask创建项目的详细步骤，包括环境配置、前端和后端的创建、前后端调用及项目启动。在前端，选用@vue/cli 4.4.6版本，并使用axios作为请求库；后端则采用Python 3.8.5和Flask，通过虚拟环境管理。最后，介绍了如何打包前端和启动后端服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感谢图拉丁的踩坑与整理

环境

vue -V查看vue版本
@vue/cli 4.4.6
npm install -g @vue/cli

python --version查看python版本
python 3.8.5
python在官网安装executable执行版本，安装即可使用，不用配置环境变量

前端创建

在项目根目录下运行命令vue create frontend
选中router和babel，其他默认
配置config
创建vue.config.js

module.exports = {
   
   
	assetsDir: 'static',
	devServer: {
   
   
		proxy: 'http://localhost:5000/' //后端地址
	}
}

安装axios
npm install --save axios
axios是请求库

后端创建

创建虚拟环境
pipenv install
启动虚拟环境
pipenv shell
在虚拟环境下配置flask
pip install Flask
在项目根目录下添加app.py代码

from flask import Flask, render_template, jsonify
from random import *
from flask_cors import CORS 
#CORS允许前后端跨域访问
# 指定了静态和模板文件夹来用前端包指向 /dist 文件夹，在根文件夹中运行 Flask 服务
app = Flask(__name__,
    static_folder ="./frontend/dist/static",
    template_folder ="./frontend/dist"