跳转到正文
莫尔索随笔
返回

Flask 与 Vue.js 实践:从零构建 CRUD Web 应用

预计 1 分钟

第一时间捕获有价值的信号

学习如何使用 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

参考链接

Developing a Single Page App with Flask and Vue.js

2019 年如何搭建你的 Vue 项目

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