Flask × Vue 开发实践

使用 Vue 和 Flask 实现一个简单的实现 CRUD 功能的 Web 应用程序,后端支持 RESTful REST API 。

我的新书《LangChain编程从入门到实践》 已经开售!推荐正在学习AI应用开发的朋友购买阅读!
LangChain编程从入门到实践

环境搭建

操作系统:Ubuntu 18.04

后端环境( Flask v1.1.1 Python v3.8.0 )

1
2
3
4
5
6
7
mkdir flask-vue-demo
cd flask-vue-demo
pyenv local 3.8.0
python -m venv venv
source venv/bin/activate
pip install Flask Flask-Cors
pip list

前端环境(Node v13.2.0 npm v6.13.1 Vue CLI v4.1.1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
sudo apt install nodejs
node -v # 8.10.0
sudo apt install npm
npm -v # 3.5.2
npm config set registry http://registry.npm.taobao.org/
npm config list
# 默认使用 apt 安装的 node 和 npm 版本比较老,需要更新一下对应的版本
sudo npm install -g npm
# node 更新,顺便一提 n 模块是一款更简单好用的 Node 版本管理工具(类似python 的 pyenv),所以使用 n 来管理
# n stable 安装最新的稳定版
# n lts 安装最新的 TLS 版
# n 6.9.0 安装特定的 v6.9.0 版本
# n latest 安装最新发行版
sudo npm install -g n
sudo n latest

exec "$SHELL"
node -v # 13.2.0
npm -v # 6.13.1
npm install -g @vue/cli
vue -V

快速上手

1
2
3
mkdir server && cd server && touch app.py
cd ..
vue create client
1
2
3
4
5
6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Vuex, Linter
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) N

参考链接

Developing a Single Page App with Flask and Vue.js

2019 年如何搭建你的 Vue 项目

一份超级详细的Vue-cli3.0使用教程[赶紧来试试!]

作者

莫尔索

发布于

2022-10-17

更新于

2024-05-24

许可协议

评论