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

news/2024/4/27 3:04:25

我完全是参考的这个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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/11138.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

client-go中ListAndWatch机制,informer源码详解

文章首发地址&#xff1a; 学一下 (suxueit.com)https://suxueit.com/article_detail/s9UMb44BWZdDRfKqFv22 先上一张&#xff0c;不知道是那个大佬画的图 简单描述一下流程 client-go封装部分 以pod为例 、先List所有的Pod资源&#xff0c;然后通过已经获取的pod资源的最大版…

vue2高德地图选点

<template><el-dialog :title"!dataForm.id ? 新建 : isDetail ? 详情 : 编辑" :close-on-click-modal"false" :visible.sync"show" class"rv-dialog rv-dialog_center" lock-scroll width"74%" :before-close&q…

发车,易安联签约某新能源汽车领军品牌,为科技创新保驾护航

近日&#xff0c;易安联成功签约某新能源汽车领军品牌&#xff0c;为其 数十万终端用户 建立一个全新的 安全、便捷、高效一体化的零信任终端安全办公平台。 随着新能源汽车行业的高速发展&#xff0c;战略布局的不断扩大&#xff0c;技术创新不断引领其市场价值走向高点&am…

抖音视频关键词批量采集工具|无水印视频爬虫提取软件

抖音视频关键词批量采集工具&#xff1a; 我们很高兴地介绍最新推出的抖音视频关键词批量采集工具&#xff0c;该工具集成了多项强大功能&#xff0c;让您轻松实现视频内容的批量提取和下载。以下是详细的功能解析和操作说明&#xff1a; 主要功能&#xff1a; 关键词批量提取…

6个免费的ChatGPT网站

AI 大模型的出现给时代带来了深远的影响&#xff1a; 改变了产业格局&#xff1a;AI 大模型的发展推动了人工智能技术在各行业的广泛应用&#xff0c;改变了传统产业的运作方式&#xff0c;促进了新兴产业的崛起&#xff0c;如智能驾驶、医疗健康、金融科技等。提升了科学研究…

基于51单片机的智能晾衣架设计资料(论文+源码+仿真)

目录 1、资料内容 2、整体架构流程 3、主控单元设计 4、LCD液晶显示 5、仿真图 6、程序 资料下载地址&#xff1a;基于51单片机的智能晾衣架设计资料(论文源码仿真) 1、资料内容 2、整体架构流程 为了实现晾衣自身能够完成对外界数据的采集与分析&#xff0c;集成控制环节我们采…