Integrieren Sie Vue in Flask

Dieses Tutorial beantwortet die Frage: „Wie integriere ich Vue.js in Flask?“ Da Sie dieses Tutorial lesen, gehe ich davon aus, dass Sie es wissen dass Flask ein Python-Mikroframework ist, das für die schnelle Webentwicklung entwickelt wurde. Wenn Sie neu bei Flask sind oder glauben, ich spreche von einer Thermoskanne, empfehle ich Ihnen, dies zu lesen, bevor Sie mit diesem Tutorial fortfahren.

Vue.js ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Wenn Sie damit noch nicht vertraut sind, können Sie es hier nachlesen.

Da Sie nun mit Flask und Vue.js vertraut sind, können wir loslegen.

Flask-Einstellungen

Lass uns zuerst ein paar Abhängigkeiten installieren:

pip install --user cookiecutter

Cookiecutter ist ein großartiges Befehlszeilentool zum schnellen Bootstrapping von Projektvorlagen. Wir verwenden Cookiecutter, sodass wir nicht zu viel Zeit mit der Konfiguration des Projekts verbringen müssen. Bedenken Sie, dass Flask keine Batterien enthält wie Django, sodass viel Arbeit in die Ersteinrichtung Ihres Projekts gesteckt werden muss.

Da Sie nun Cookiecutter installiert haben, müssen wir uns eine Projektvorlage besorgen. Für dieses Tutorial benötigen wir nur eine einfache Flask-API. Führen Sie den folgenden Befehl aus:

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

Sie sollten die folgende Ausgabe erhalten:

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

Ein Ordner mit dem Namen flask-vuejs-tutorial sollte erstellt werden. Navigieren Sie zu dem Ordner und Sie sollten die folgende Struktur sehen:

├── 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

Wunderschön, nicht wahr?

Bevor wir fortfahren, müssen wir eine virtuelle Umgebung einrichten. Ausführen:

python -m venv venv

Jetzt können Sie den Projektordner mit Ihrem bevorzugten IDE-/Texteditor öffnen. Denken Sie daran, die virtuelle Umgebung zu aktivieren, bevor Sie mit dem nächsten Schritt fortfahren.
Jetzt können wir Abhängigkeiten installieren. Ausführung:

pip install -r requirements.txt

Nach Abschluss öffnen app/config.py. Sie werden feststellen, dass diese API-Vorlage eine Postgres-Datenbankverbindung verwendet. Wenn es Ihnen nichts ausmacht, können Sie die Postgres-Datenbank mit den erforderlichen Anmeldeinformationen einrichten. Andernfalls ersetzen Sie den Inhalt dieses Ordners durch die folgende Codezeile:

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
}

Wir haben alle Postgres-Konfigurationen zugunsten der SQLite-Konfiguration entfernt. Wenn Sie Postgres verwenden, lassen Sie die Datei conf.py unverändert.
Jetzt müssen wir die Flask-Anwendung exportieren. Ausführen:

export FLASK_APP=wsgi:app

Nachdem wir nun die Einstellungen der Flask-API abgeschlossen haben, führen Sie Folgendes aus:

flask run

und öffnen Sie http://127.0.0.1:5000/example im Browser. Sie sollten Folgendes sehen:

{"message": "Success"}

Vue.js-Einstellungen

Da unsere API nun bereit ist, können wir mit dem Bootstrapping der Vue-Anwendung fortfahren.
Als erstes müssen wir Vue CLI installieren. Führen Sie aus:

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

Sobald die Installation abgeschlossen ist, können Sie mit dem folgenden Befehl überprüfen, ob die Version korrekt ist (3.x):

vue --version

Im Stammverzeichnis des Projektordners ausführen:

vue create web

Ich habe default (babel, eslint) als Standard und yarn als meinen Paketmanager ausgewählt. Wenn Sie mit Node-Projekten vertraut sind, können Sie Ihre bevorzugte Option auswählen. Wenn nicht, befolgen Sie die Standardeinstellungen für dieses Tutorial.
Navigieren Sie nun zum neu erstellten Ordner web und führen Sie Folgendes aus:

yarn serve
# OR
npm run serve

Wenn Sie zu http://localhost:8080/ navigieren, sollte Willkommen bei Your Vue angezeigt werden .js App-Text.

Jetzt sind wir bereit, mit der Integration zu beginnen.

Erstellen Sie im Webordner eine Datei mit dem Namen vue.config.js und fügen Sie den folgenden Inhalt ein:

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
};

Hier werden einige Konfigurationen für Vue cl i definiert. Uns interessieren nur drei Felder: assetsDir, baseUrl, outputDir.
Beginnen wir mit Ausgabeverzeichnis.
Dieser Ordner enthält den Speicherort der erstellten Vue-Dateien, d. h. den Ordner, der das index.html enthält, das die Vue-Anwendung lädt. Wenn Sie den angegebenen Pfad beachten, werden Sie feststellen, dass sich der Ordner im app-Modul der Flask-Anwendung befindet.
assetsDir Speichern Sie den Ordner, der zum Speichern statischer Dateien (CSS, JS usw.) verwendet wird. Beachten Sie, dass relativ zu dem im Feld outputDir angegebenen Wert ist.
Schließlich enthält das Feld baseUrl das Pfadpräfix der statischen Datei in index.html. Sie können dies überprüfen, um mehr über andere Konfigurationsoptionen zu erfahren.
Jetzt ausführen:

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应用程序。

真相时刻到啦。

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

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

 * 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集成 

推荐教程：《Python教程》

Das obige ist der detaillierte Inhalt vonIntegrieren Sie Vue in Flask. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!