00000基础搭建vue+flask前后端分离项目

我完全是参考的这个vue3+flask前后端分离环境速建_flask vue3-CSDN博客

安装了node_js(添加了环境变量)

环境变量

把原来的镜像源换成了淘宝镜像源 npm config set registry https://registry.npmmirror.com/

查看版本证明安装成功 npm - v

安装npm install -g @vue/cli (打开cmd在里边输入,没有管在哪个目录)

安装axios

npm install --save axios

在项目的根目录(前端的文件夹内)/test_fandb/vue_flask

新建一个文件夹/test_fandb/vue/flask,

就是项目的路径 在文件路径全选删去,输入cmd

打开该目录的终端

终端里执行vue create frontend

cd frontend

npm run serve

去访问http://localhost:8080/

在终端 CTRL+C停止服务

vscode打开我们刚刚创建的/test_fandb/vue_flask

修改frontend/src/components/HelloWorld.vue文件

完成一个最简单和后端交互例子

删去<div>里边的一堆超链接

<script>里边修改

又重新在fonted目录打开一个终端

使用npm run build(打包命令)

前端vue项目打包生成dist 文件夹,dist文件夹中就是打包好的静态文件

一切正常的话即可在frontend/dist 下看到生成的部署文件

后端

在项目文件夹vue_flask

新建后端文件夹back_end

并在该新建文件夹下创建templates、static文件夹和app.py文件

我是直接对下面这个面板操作的

将前端生成的/public/index.html复制到templates

js、css(在dist目录下)和img(没有则新建个img目录)复制到static下

img没有,可以不弄

favicon.ico需放入static/img下

修改后端的index.html

<%= BASE_URL %>是根目录/

在后端的app.py文件里写入(之前不小心创建成了文件夹)

现在打开2个终端

在后端目录 启动终端输入python app.py

在前端目录启动终端输入npm run serve

相关推荐
MengMeng_10231 分钟前
soc平台告警分析思路及chrome插件
前端·chrome·安全威胁分析
落落落洛克4 分钟前
WAIC 2026收官复盘:国产AI打通大模型、智能体、物理机器人全产业闭环
前端
小时代的大玩家13 分钟前
HarmonyOS新特性-沉浸光感在叠叠消小游戏中的落地实践
前端·harmonyos
hunterandroid15 分钟前
[鸿蒙从零到一] ArkUI 状态管理实战:从 @State 到 @Provide 与 @Consume
前端
Hilaku16 分钟前
为什么很多人觉得前端很简单?
前端·javascript·程序员
hunterandroid18 分钟前
[鸿蒙从零到一] ArkUI 列表与网格实战:List、Grid 与 LazyForEach
前端
李明卫杭州20 分钟前
Vue2 数组响应式为什么总"不更新"?深入源码对比 Vue3 的 Proxy 改造
前端·javascript·vue.js
索西引擎26 分钟前
【React】useReducer 与 useState 的比较研究:复杂状态管理场景下的选型
前端·react.js·前端框架
hunterandroid30 分钟前
前台服务适配与线上排查:通知权限、启动限制和任务保活
android·前端
我是大卫42 分钟前
【图】React源码解析-从“上帝视角”俯瞰React的认知框架
前端·react.js·源码