2022-10-17发表3 分钟读完 (大约482个字)

Flask × Vue 开发实践

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

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

环境搭建

操作系统：Ubuntu 18.04

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

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）

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

? 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