如何在 flask 中集成 vue.js ？ | python优质外文翻译 | python 技术论坛-金年会app官方网

本教程回答了这么一个问题， "我怎么把 vue.js 集成到 flask中?" 因为你正在阅读本教程，因此我假设您知道 flask 是一个为快速 web 开发而构建的 python 微框架。如果您不熟悉 flask，或者您认为我可能要说保温瓶，那么我建议在继续本教程之前，您先阅读一下。

vue.js 是用于构建用户界面的渐进式框架。如果您不熟悉它，可以在上阅读有关内容。

现在您已经熟悉了 flask 和 vue.js，我们可以开始了。

flask设置

让我们先安装几个依赖：

pip install --user cookiecutter

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

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

cookiecutter gh:mobidevke/cookiecutter-flask-api-starter

您应该得到以下输出：

repo_name [api-starter]: flask-vuejs-tutorial
api_name [api]: api
version [1.0.0]: 1.0.0

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

├── app
│   ├── config.py
│   ├── factory.py
│   ├── __init__.py
│   ├── models
│   │   ├── base.py
│   │   ├── database.py
│   │   ├── datastore.py
│   │   └── __init__.py
│   ├── resources
│   │   ├── example.py
│   │   └── __init__.py
│   └── utils.py
├── pytest.ini
├── readme.md
├── requirements.txt
├── settings.py
├── tests
│   ├── conftest.py
│   ├── __init__.py
│   ├── test_app.py
│   ├── test_models.py
│   ├── test_resources.py
│   └── utils.py
├── unit-tests.sh
└── wsgi.py

很美丽，不是吗 😃?

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

python -m venv venv

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

pip install -r requirements.txt

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

import os
class config:
    error_404_help = false
    secret_key = os.getenv('app_secret', 'secret key')
    sqlalchemy_database_uri = 'sqlite:///tutorial.db'
    sqlalchemy_track_modifications = false
    doc_username = 'api'
    doc_password = 'password'
class devconfig(config):
    debug = true
class testconfig(config):
    sqlalchemy_database_uri = 'sqlite://'
    testing = true
    debug = true
class prodconfig(config):
    debug = false
config = {
    'development': devconfig,
    'testing': testconfig,
    'production': prodconfig
}

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

export flask_app=wsgi:app

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

flask run

然后在浏览器上打开 。您应该能看到以下内容：

{"message": "success"}

vue.js设置

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

npm install -g @vue/cli
# or
yarn global add @vue/cli

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

vue --version

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

vue create web

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

yarn serve
# or
npm run serve

如果导航到, 您应该可看到 welcome to your vue.js app 文本。

现在我们准备开始集成。

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

const path = require('path');
module.exports = {
  assetsdir: '../static',
  baseurl: '',
  publicpath: undefined,
  outputdir: path.resolve(__dirname, '../app/templates'),
  runtimecompiler: undefined,
  productionsourcemap: undefined,
  parallel: undefined,
  css: undefined
};

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

yarn build
# or
npm run build

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

from flask import blueprint, render_template, abort
from jinja2 import templatenotfound
sample_page = blueprint('sample_page', 'sample_page', template_folder='templates')
@sample_page.route('/sample')
def get_sample():
    try:
        return render_template('index.html')
    except templatenotfound:
        abort(404)

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

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

.....
app = f.flask
from .views import sample_page
app.register_blueprint(sample_page, url_prefix='/views')

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

真相时刻到啦。

打开 ， 您应该能看到以下内容:

如果您检查日志, 将看到正确加载了内置资源:

 * serving flask app "wsgi:app"
 * environment: production
   warning: do not use the development server in a production environment.
   use a production wsgi server instead.
 * debug mode: off
 * running on http://127.0.0.1:5000/ (press ctrl c to quit)
127.0.0.1 - - [24/may/2019 20:45:02] "get /views/sample http/1.1" 200 -
127.0.0.1 - - [24/may/2019 20:45:02] "get /static/css/app.e2713bb0.css http/1.1" 200 -
127.0.0.1 - - [24/may/2019 20:45:02] "get /static/js/chunk-vendors.b10d6c99.js http/1.1" 200 -
127.0.0.1 - - [24/may/2019 20:45:02] "get /static/js/app.c249faaa.js http/1.1" 200 -
127.0.0.1 - - [24/may/2019 20:45:02] "get /static/img/logo.82b9c7a5.png http/1.1" 200 -
127.0.0.1 - - [24/may/2019 20:45:02] "get /views/favicon.ico http/1.1" 404 -

您已经成功将flask与vuejs集成 😄。

这篇教程的源码可以在这里找到： .

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 cc 协议，如果我们的工作有侵犯到您的权益，请及时联系金年会app官方网。

原文地址：

译文地址：https://learnku.com/python/t/38868