python vue flask_Python构建RESTful网络服务[Flask篇：用Flask+Vue.js打造全栈单页面应用]...

前言

本来在着手写关于使用Flask构建RESTful网络服务的文章，正好看到一篇相关文章，提供了一个Flask+vue构建全栈单页面应用的例子，觉得不错，就在此分享给大家。

作者Oleg Agapov ，似乎是俄语使用者，不过这篇文章是用英文写的，文风细致友好，可以一读。考虑到一些朋友不方便查看外网，特此翻译并转载到知乎专栏。以下是全文及几条网友问答翻译。

注意：阅读本文需要一点点的Flask知识和一点点的Vue知识(只要你看过任何一点点新建一个Flask应用且看过任何一点点新建一个Vue应用的文章，就满足了本条要求)

另外：Python构建RESTful网络服务[Django篇]没有完结，仍在连载中，见专栏更新。

用Flask+Vue.js打造全栈单页面应用

在本教程中，我将向您展示如何将Vue.js单页面应用程序与Flask后端整合起来。

基本上，如果你只想在Flask模板中使用Vue.js库，那么问题不大。唯一值得注意是Jinja(模板引擎)使用双花括号来渲染变量，而Vue插值也使用双花括号，解决这问题可以见这里https://github.com/yymm/flask-vuejs。

而本文要说的是另一种情况：我需要一个使用Vue.js构建的单页面应用程序(使用单页面组件、history模式的vue-router和其他优秀特性)，并通过Flask服务器提供服务。简而言之，应该是这样工作的：Flask伺服一个index.html，这是我的Vue.js应用入口文件

使用Webpack进行前端工程化开发

可以从SPA访问Flask的API端点

使用Node.js运行前端项目时，也可以访问Flask的API端点

这种情况该怎么办呢？听起来是不是很有趣，说干就干吧！

客户端

我使用vue-cli生成基本的Vue.js应用程序。如果你还没有安装Vue.js，只要运行:

$ npm install -g vue-cli

客户端和后端代码将被分别放到不同的文件夹。初始化前端部分运行如下:

$ mkdir flaskvue

$ cd flaskvue

$ vue init webpack frontend

通过安装向导，按如下设置是:Vue build — Runtime only #仅在运行时构建

Install vue-router? — Yes # 使用vue-router提供的前端路由

Use ESLint to lint your code? — Yes # 使用ESLint检查代码

Pick an ESLint preset — Standard # 设置ESLint为标准模式

Setup unit tests with Karma + Mocha? — No # 不使用Karma + Mocha进行单元测试

Setup e2e tests with Nightwatch? — No # 不使用Nightwatch进行端对端测试

下一步：

$ cd frontend

$ npm install

# after installation

$ npm run dev

启动Vue.js应用开发服务器。让我们先来添加一些页面。

添加 Home.vue 和 About.vue 到 frontend/src/components 文件夹。简单填写一下，就像这样:

// Home.vue

Home page

// About.vue

About

现在要构建前端路由，前端应用要知道怎么处理我们我们在浏览器地址栏中填写地址。在frontend/src/router/index.js文件中填写如下内容来渲染我们的新组件:

import Vue from 'vue'

import Router from 'vue-router'

const routerOptions = [

{ path: '/', component: 'Home' },

{ path: '/about', component: 'About' }

]

const routes = routerOptions.map(rout