当前位置: 首页 > news >正文

三天速通 Vue+Flask+SQLite 项目+阿里云轻量应用级服务器【宝塔面板】①

前言

文章性质:实操记录 💻

本期内容:这篇文章主要记录了搭建 Vue3.0 前端和 Flask 后端的大致流程。

下期预告:下篇文章将会具体说明如何把项目挂到阿里云轻量应用级服务器【宝塔面板】。

冷知识+1:小伙伴们不经意的 点赞 👍🏻 与 收藏 ✨ 可以让作者更有创作动力! 

目录

一、用 Vue 脚手架搭建项目

1. 安装 Node.js

2. 安装 Vue 脚手架

3. 创建 Vue 项目

4. 运行 Vue 项目

5. 安装相关依赖包

6. 动态添加路由

二、用 Flask 框架搭建项目

1. 安装 Flask 框架

2. 创建 Flask 项目

3. PyCharm 创建 Flask 项目(可选)

4. 运行 Flask 项目

5. 创建 SQLite 数据库

① app.py

② database.py

③ 创建 SQLite 数据库

相关博客

相关附件

1. app.py

2. extension.py

3. database.py


一、用 Vue 脚手架搭建项目

1. 安装 Node.js

首先,需要大家前往官网下载并安装相应版本的 Node.js【点击跳转官网】

验证 Node.js 是否安装成功:使用 Win+R 快捷键打开 cmd 命令运行窗口,执行 node -v 和 npm -v 命令。

2. 安装 Vue 脚手架

使用 Win+R 快捷键打开 cmd 命令运行窗口,执行 npm install -g @vue/cli 命令:

npm install -g @vue/cli

验证 Vue 是否安装成功:使用 Win+R 快捷键打开 cmd 命令运行窗口,执行 vue -v 命令。

3. 创建 Vue 项目

在项目文件夹的根目录下执行 vue create myapp-frontend 命令,其中 myapp-frontend 为自定义的前端项目名称:

vue create myapp-frontend

注意:在创建项目的过程中,需要选择是创建 Vue2.0 项目还是 Vue3.0 项目,大家根据需求自行选择即可。

4. 运行 Vue 项目

方式Ⅰ:在刚刚创建的 myapp-frontend 文件夹下,在终端运行 npm run serve 命令以启动项目:

cd myapp-frontend
npm run serve

方式Ⅱ:直接在 PyCharm 页面右上角的 Run/Debug Cconfigurations 中配置:

5. 安装相关依赖包

在刚刚创建的 myapp-frontend 文件夹下,在终端运行 npm install 命令,进行相关依赖包安装:

npm install element-plus
npm install --save axios
npm install vue-router

6. 动态添加路由

在刚刚创建的 myapp-frontend 文件夹下,在终端运行 vue add router 命令:

vue add router<
http://www.lryc.cn/news/621838.html

相关文章:

  • 【Unity3D实例-功能-拔枪】角色拔枪(一)动态创建武器
  • 非中文语音视频自动生成中文字幕的完整实现方案
  • 【HarmonyOS】鸿蒙应用迁移实战指南
  • STM32传感器模块编程实践(十四)DIY语音+满溢检测智能垃圾桶模型
  • 开源 Arkts 鸿蒙应用 开发(十五)自定义绘图控件--仪表盘
  • 17.3 删除购物车商品
  • 【科研绘图系列】R语言绘制多种饼图
  • 20day-人工智能-机器学习-线性回归
  • 超高车辆碰撞预警系统如何帮助提升城市立交隧道安全?
  • 【机器学习深度学习】生成式评测
  • 金融项目高可用分布式TCC-Transaction(开源框架)
  • 服装企业客户满意度调查:民安智库的市场调研赋能实践(北京市场调查)
  • 汽车行业 AI 视觉检测方案(二):守护车身密封质量
  • 指针类型:解引用与运算的关键
  • 电子电气架构 --- 探索软件定义汽车(SDV)的技术革新
  • 基于多模型的零售销售预测实战指南
  • Java 大视界 -- 基于 Java 的大数据可视化在城市交通拥堵治理与出行效率提升中的应用(398)
  • 【java】对word文件设置只读权限
  • 英文PDF翻译成中文怎么做?试试PDF翻译工具
  • Canal 技术解析与实践指南
  • ffmpeg 安装、配置与使用完全指南
  • 【python实用小脚本-187】Python一键批量改PDF文字:拖进来秒出新文件——再也不用Acrobat来回导
  • fastdds.ignore_local_endpoints 属性
  • PDF Replacer:高效便捷的PDF文档内容替换专家
  • 基于 Spring AI + Ollama + MCP Client 打造纯本地化大模型应用
  • JavaScript(JS)DOM(四)
  • 大模型微调分布式训练-大模型压缩训练(知识蒸馏)-大模型推理部署(分布式推理与量化部署)-大模型评估测试(OpenCompass)
  • MuMu模拟器Pro Mac 安卓手机平板模拟器(Mac中文)
  • 代码随想录Day51:图论(岛屿数量 深搜广搜、岛屿的最大面积)
  • 解决量化模型中的 NaN 问题:为何非量化层应选用 FP32?(41)