站長資訊網(wǎng)
本教程回答了這么一個(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)的
