第一时间捕获有价值的信号
学习如何使用 Flask 和 Vue.js 构建一个支持 RESTful API 的 CRUD Web 应用程序。本文提供详细的环境搭建和项目实践指南,助你快速上手全栈开发。
核心内容
使用 Vue 和 Flask 实现一个简单的实现 CRUD 功能的 Web 应用程序,后端支持 RESTful REST API 。
环境搭建
操作系统: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
快速上手
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