如何在 Flask 中集成 Vue.js ？

type

status

date

slug

summary

Flask 设置

让我们先安装几个依赖：

Cookiecutter 是一个很棒的命令行工具，用来快速引导项目模板。我们正在使用 cookiecutter，所以我们不需要花费太多时间来配置项目。请记住，Flask 并不像 Django 一样包含电池 , 因此必须在项目的初始设置中投入大量工作。

现在您已经安装了 Cookiecutter, 我们需要抓取一个项目模板。对于这个教程，我们只需要一个简单的 Flask API。运行以下命令:

您应该得到以下输出：

应该创建一个名为 flask-vuejs-tutorial 的文件夹。导航到该文件夹，您应该看到以下结构：

很美丽，不是吗 😃?

在继续之前，我们需要设置一个虚拟环境。执行:

现在，您可以使用喜欢的 IDE / 文本编辑器打开项目文件夹。在继续下一步之前，请记住激活虚拟环境。现在我们可以安装依赖项。执行：

完成后，打开 app/config.py。您会注意到，此 API 模板使用了 postgres 数据库连接。如果您不介意，可以使用必要的凭据设置 postgres db。否则，请使用以下代码行代替该文件夹的内容：

我们已经删除了所有的 postgres 配置，以支持 sqlite 的配置。如果您要使用 postgres，请保持 conf.py 文件不变。现在我们需要导出 Flask 应用程序。执行:

现在我们已经完成了 Flask 的 API 的设置，执行:

然后在浏览器上打开 http://127.0.0.1:5000/example。您应该能看到以下内容：

Vue.js 设置#

现在我们的 API 已经准备就绪，我们可以继续引导 vue 应用程序了。我们需要做的第一件事是安装 vue cli。执行:

一旦安装完成后，您可以使用以下命令检查版本是否正确 (3.x)：

在项目文件夹的根目录中运行:

我选择 default (babel, eslint) 作为预设，并选择 yarn 作为我的包裹管理器。如果您熟悉 node 项目，则可以继续并选择您的首选选项。如果没有，请遵循本教程的默认设置。现在导航到新建的 web 文件夹并运行：

如果导航到 http://localhost:8080/, 您应该可看到 Welcome to Your Vue.js App 文本。

现在我们准备开始集成。

在 Web 文件夹中，创建一个名为 vue.config.js 的文件并粘贴以下内容：

在这里，为 Vue cl i 定义了一些配置。我们只对三个字段感兴趣: assetsDir, baseUrl, outputDir。让我们从 outputDir 开始。此文件夹保存已构建的 Vue 文件的位置，即将保存将加载 Vue 应用程序的 index.html 的文件夹。如果您观察这提供的路径，您将会注意到该文件夹位于 flask 应用程序的 app 模块内部。 assetsDir 保存用于存放静态文件 (css, js 等) 的文件夹。注意它是相对于 outputDir 字段中提供的值的。最后， baseUrl 字段将在 index.html 中保存静态文件的路径前缀。您可以检查这个以了解有关其他配置选项的更多信息。现在运行:

如果打开 app 文件夹，您会注意到已经创建了两个新文件夹，即 templates 和 static。它们包含内置的 vue 文件。现在在 app 文件夹中创建一个 views.py 文件并粘贴以下内容：

现在，这是怎么回事呢？好吧，现在我们创建一个名为 sample_page 的 Flask 蓝图 (blueprint)，并添加路由。这条路由将渲染我们的 Vue 应用。

打开 __init__.py 文件并在 app = f.flask 下添加以下几行:

在这里，我们正在注册之前创建的蓝图 (blueprint)。我们为蓝图 (blueprint) 指定了 url 前缀，以便于可以从 /views/sample 访问我们的 vue 应用程序。

真相时刻到啦。

打开 http://127.0.0.1:5000/views/sample，您应该能看到以下内容: