本教程回答了這么一個(gè)問題， "我怎么把 Vue.js 集成到 Flask中?" 因?yàn)槟阏陂喿x本教程，因此我假設(shè)您知道 Flask 是一個(gè)為快速 Web 開發(fā)而構(gòu)建的 Python 微框架。如果您不熟悉 Flask，或者您認(rèn)為我可能要說保溫瓶，那么我建議在繼續(xù)本教程之前，您先閱讀一下這里。

Vue.js 是用于構(gòu)建用戶界面的漸進(jìn)式框架。如果您不熟悉它，可以在這里上閱讀有關(guān)內(nèi)容。

現(xiàn)在您已經(jīng)熟悉了 Flask 和 Vue.js，我們可以開始了。

Flask設(shè)置

讓我們先安裝幾個(gè)依賴：

pip install --user cookiecutter

Cookiecutter 是一個(gè)很棒的命令行工具，用來快速引導(dǎo)項(xiàng)目模板。 我們正在使用 cookiecutter，所以我們不需要花費(fèi)太多時(shí)間來配置項(xiàng)目。 請(qǐng)記住, Flask 并不像 Django 一樣包含電池, 因此必須在項(xiàng)目的初始設(shè)置中投入大量工作。

現(xiàn)在您已經(jīng)安裝了Cookiecutter, 我們需要抓取一個(gè)項(xiàng)目模板。 對(duì)于這個(gè)教程, 我們只需要一個(gè)簡(jiǎn)單的 Flask API。運(yùn)行以下命令:

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

您應(yīng)該得到以下輸出：

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

應(yīng)該創(chuàng)建一個(gè)名為 flask-vuejs-tutorial 的文件夾。 導(dǎo)航到該文件夾，您應(yīng)該看到以下結(jié)構(gòu)：

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

很美麗，不是嗎 ?

在繼續(xù)之前，我們需要設(shè)置一個(gè)虛擬環(huán)境。執(zhí)行:

python -m venv venv

現(xiàn)在，您可以使用喜歡的IDE /文本編輯器打開項(xiàng)目文件夾。在繼續(xù)下一步之前，請(qǐng)記住激活虛擬環(huán)境。
現(xiàn)在我們可以安裝依賴項(xiàng)。執(zhí)行：

pip install -r requirements.txt

完成后，打開 app/config.py。您會(huì)注意到，此API模板使用了postgres數(shù)據(jù)庫連接。 如果您不介意，可以使用必要的憑據(jù)設(shè)置postgres db。否則，請(qǐng)使用以下代碼行代替該文件夾的內(nèi)容：

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 }

我們已經(jīng)刪除了所有的 postgres 配置，以支持 sqlite 的配置。如果您要使用 postgres，請(qǐng)保持 conf.py 文件不變。
現(xiàn)在我們需要導(dǎo)出 Flask 應(yīng)用程序。執(zhí)行:

export FLASK_APP=wsgi:app

現(xiàn)在我們已經(jīng)完成了 Flask 的 API 的設(shè)置，執(zhí)行:

flask run

然后在瀏覽器上打開 http://127.0.0.1:5000/example。您應(yīng)該能看到以下內(nèi)容：

{"message": "Success"}

Vue.js設(shè)置

現(xiàn)在我們的 API 已經(jīng)準(zhǔn)備就緒，我們可以繼續(xù)引導(dǎo)vue應(yīng)用程序了。
我們需要做的第一件事是安裝 vue cli。執(zhí)行:

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

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

vue --version

在項(xiàng)目文件夾的根目錄中運(yùn)行:

vue create web

我選擇 default (babel, eslint) 作為預(yù)設(shè)，并選擇 yarn 作為我的包裹管理器。如果您熟悉node項(xiàng)目，則可以繼續(xù)并選擇您的首選選項(xiàng)。如果沒有，請(qǐng)遵循本教程的默認(rèn)設(shè)置。
現(xiàn)在導(dǎo)航到新建的 web 文件夾并運(yùn)行：

yarn serve # OR npm run serve

如果導(dǎo)航到http://localhost:8080/, 您應(yīng)該可看到 Welcome to Your Vue.js App 文本。

現(xiàn)在我們準(zhǔn)備開始集成。

在 Web 文件夾中，創(chuàng)建一個(gè)名為 vue.config.js 的文件并粘貼以下內(nèi)容：

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定義了一些配置。我們只對(duì)三個(gè)字段感興趣: assetsDir, baseUrl, outputDir。
讓我們從 outputDir 開始。
此文件夾保存已構(gòu)建的 Vue 文件的位置，即將保存將加載 Vue 應(yīng)用程序的 index.html 的文件夾。如果您觀察這提供的路徑, 您將會(huì)注意到該文件夾位于flask應(yīng)用程序的 app 模塊內(nèi)部。
assetsDir 保存用于存放靜態(tài)文件(css, js 等)的文件夾。 注意 它是相對(duì)于 outputDir 字段中提供的值的。
最后, baseUrl 字段將在 index.html 中保存靜態(tài)文件的路徑前綴。 您可以檢查 這個(gè) 以了解有關(guān)其他配置選項(xiàng)的