三天速通 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<