html5怎么改为vue_使用 Flask 和 Vue.js 来构建全栈单页应用

点击上方“Python编程与实战”，选择“置顶公众号”

第一时间获取 Python 技术干货！

阅读文本大概需要 18 分钟。

在这个教程中，我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来。

简单的来说，如果想在 Flask 中使用 Vue 框架是没有什么问题的。但在实际中存在一个明显的问题就是 Flask 的模版引擎 Jija 和 Vue 一样使用双花括号来渲染，

对于 Jinja 模板和 Vue 的语法冲突问题，这里有一个很好的解决方案 (https://github.com/yymm/flask-vuejs)。

做一个用 Vue.js 做前端 (用单页组件，HTML5 历史模式的「vue-router」，以及其他好的特性)，用 Flask 做后端的单页应用怎么样？

简单地说，这个应用应该是这样的：

• Flask 用来驱动一个包含 Vue.js app 的 index.html

• 前端开发过程中我用到 Webpack 和它提供的所有酷的特性

• Flask 有我能从 SPA 访问到的 API 端口

• 在我开发前端时，我能运行 Node.js 来访问 api 端口

听起来很有意思吧？我们开始吧。

客户端

为了生成基本的 Vue.js 文件结构，我将使用 vue-cli。如果你没有安装它，请运行下边的命令：

npm install -g vue-cli

客户端和后端代码将会被拆分到不同的文件夹中， 请运行下边命令初始化前端部分：

$

下边是安装过程中我的设置：

• Vue build --- Runtime only

• Install vue-router? --- Yes

• Use ESLint to lint your code? --- Yes

• Pick an ESLint preset --- Standard

• Setup unit tests with Karma + Mocha? --- No

• Setup e2e tests with Nightwatch? --- No

下一步：

$

到这里，你应该安装好 Vue.js 了吧！那就让我们添加一些页面。

在 frontend/src/components 文件夹中添加 Home.vue 和 About.vue 两个文件。并添加如下内容到对应的文件中：

// Home.vue文件的内容