这一次给大家分享一下，如何使用Vue和Flask开发一个基本的CRUD应用程序。
首先，我会使用Vue CLI搭建一个新的Vue应用程序，然后通过Python和Flask支持的后端RESTful API执行基本的CRUD操作。
主要依赖软件包:
- Vue v2.5.2
- Vue CLI v2.9.3
- Node v10.3.0
- npm v6.1.0
- Flask v1.0.2
- Python v3.6.5
一、Flask服务端程序开发
创建一个新的工程目录：
代码语言：javascript复制$ mkdir flask-vue-crud
$ cd flask-vue-crud在flask-vue-crud目录中，创建一个名为server的新目录。然后，在server目录中创建并激活一个虚拟环境:
代码语言：javascript复制$ mkdir server && cd server
$ python -m venv env
$ source venv/bin/activate安装Flask-CORS跨域扩展插件：
代码语言：javascript复制(venv)$ pip install Flask==1.0.2 Flask-Cors==3.0.4在server目录中，新建app.py文件后，编写代码：
代码语言：javascript复制from flask import Flask, jsonify
from flask_cors import CORS
# configuration
DEBUG = True
# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)
# enable CORS
CORS(app)
# sanity check route
@app.route('/ping', methods=['GET'])
def ping_pong():
return jsonify('pong!')
if __name__ == '__main__':
app.run()运行app：
代码语言：javascript复制(venv)$ python app.py运行成功后，在浏览器打开http://localhost:5000/ping。您应该看到:
代码语言：javascript复制"pong!"回到终端，按Ctrl C关闭服务器，然后导航回项目根目录。接下来，让我们将注意力转向前端并设置Vue。
Vue前端程序开发
我们将使用功能强大的Vue CLI生成一个定制的项目样板。全局安装：
代码语言：javascript复制$ npm install -g @vue/cli然后在flask-vue-crud目录中运行以下命令，用webpack配置初始化一个名为client的新Vue项目:
代码语言：javascript复制$ vue create client运行命令后，将看到下面这样的结果：
代码语言：javascript复制? Please pick a preset:(User arrow keys)
> default(babel,eslint)
Manually select features选择defaualt回车，等待环境初始化完成。
前端项目的目录结构如下：
代码语言：javascript复制├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── store.js
├── router.js运行开发服务器：
代码语言：javascript复制$ npm run serve在你喜欢的浏览器中打开http://localhost:8080。您应该看到以下内容:
