这篇教程Flask-Vue前后端分离的全过程讲解写得很实用，希望能帮到您。
最近学习了一下前后端分离技术，前端用的是Vue，后段用的是Flask。 vue官网：开源的 Javascript 框架，vue是一套构建用户界面的渐进式框架，Vue采用自底向上的增量开发设计。vue是轻量级的，有很多独立的功能和库。 vue.js满足当前webapp项目的开发需求，MVVM框架诞生，而Vue.js便是这样一种js框架。两大核心：数据驱动和组件化。 Flask：用Python实现，是一个web框架，属于微框架。
1、主要依赖版本- Python : V3.6.4
- Vue: V2.9.6
- Vue-CLI: V2.9.6
- node: v10.6.0
- npm: V6.1.0
- Flask: V1.0.2
- Flask-Cors: V3.0.6
- bootstrap: V4.0.0（最新版4.1.2不兼容）
以下项目的创建都是在Python虚拟环境和npm局部安装的，只有Vue-CLI是全局安装的。 npm ls -g --depth 0 查找npm全局安装的包
2、构建Python虚拟环境防止依赖的混乱，首先创建虚拟环境。 Mac:code hubo$ mkdir flask-vue-crudMac:code hubo$ cd flask-vue-crud/Mac:flask-vue-crud$ python -m venv venvMac:flask-vue-crud$ source venv/bin/activate(venv) Mac:flask-vue-crud hubo$ lsvenv 第一行创建flask-vue-crud文件夹，第三行创建python虚拟环境python3.3版本可以通过venv模块，python2版本可以使用virtualenv模块。 第四行激活虚拟环境。 - Windows：source venv/Scripts/activate.bat
- Linux：source venv/bin/activate
3、创建Flask项目首先安装Flask和Flask-CORS扩展。 Flask—CORS： 如果使用不同的协议，或者请求来自于其他的 IP 地址或域名或端口，就需要用到 Cross Origin Resource Sharing （CORS），这正是 Flask-CORS 扩展帮我们做到的。实际环境中只配置来自前端应用所在的域的请求。 (venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors 然后在根目录下创建app.py文件： from flask import Flask, jsonifyfrom flask_cors import CORSapp = Flask(__name__)CORS(app)@app.route('/', methods=['GET'])def ping_pong(): return jsonify('Hello World!') #（jsonify返回一个json格式的数据）if __name__ == '__main__': app.run()然后执行： (venv) Mac:flask-vue-crud hubo$ python app.py 打开浏览器，输入http://localhost:5000/ping，会看到输出 Hello World！
目前Flask环境已经配置好，并且已经创建了一个Flask小Demo。
4、Vue SetupVue CLI：官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 首先全局安装vue Cli：npm install -g(全局安装)，npm下载的国外的依赖，可以使用淘宝的cnpm。 下载淘宝的cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 使用npm或cnom下载vue cli (venv) Mac:flask-vue-crud hubo$ npm insatll -g vue-cli 查看安装成功 接下来通过webpack初始化一个新的Vue项目client： Mac:flask-vue-crud hubo$ vue init webpack client? Project name client? Project description A Vue.js project? Author hubo <1290259791@qq.com>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Airbnb? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) npm 主要写代码的位置：/flask-vue-crud/client/src/，目录结构如下所示： .├── App.vue├── assets│ └── logo.png├── components│ ├── HelloWorld.vue│ └── Ping.vue├── main.js└── router └── index.js 各个目录的意思： | 名字 | 作用 |
|---|
| main.js | app 的入口，它会加载和初始化 Vue 和根组件 | | App.vue | 根组件 - 其他组件的入口 | | assets | 静态文件如图片和字体等都放在这里 | | components | UI 组件放在这里 | | router | URL 同组件的映射关系在这里定义 |
client/src/components/HelloWord.vue是自动生成的单文件组件，有三部分组成： template: 组件的 HTML 内容script: 组件的逻辑代码（Javascript）style: 组件的样式（CSS）
运行该程序： (venv) Mac:flask-vue-crud hubo$ cd client/(venv) Mac:client hubo$ lsREADME.md index.html package.jsonbuild node_modules srcconfig package-lock.json static(venv) Mac:client hubo$ npm run dev 启动dev 访问http://localhost:8080 能看到前端页面
5、添加一个新组件创建client/src/components/Ping.vue: <template> <div> <p>{{ msg }}</p> </div></template><script>export default { name: 'Ping', data() { return { msg: 'Hello!', }; },};</script>更新client/src/router/index.js，映射/ping到Ping组件： import Vue from 'vue';import Router from 'vue-router';import HelloWorld from '@/components/HelloWorld';import Ping from '@/components/Ping';Vue.use(Router);export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, { path: '/ping', name: 'Ping', component: Ping, }, ], mode: 'history',});上面的mode: 'history’是为了让 URL 变成http://localhost：8080/ping的形式。如果，不加该设置，默认的 URL 为http://localhost:8080/#/ping的形式。 访问http://localhost:8080/ping 能看到Hello!
6、连接前后段通过axios发送AJAX请求，安装axios： |
