站長資訊網
本教程回答了這么一個問題， "我怎么把 Vue.js 集成到 Flask中?" 因為你正在閱讀本教程，因此我假設您知道 Flask 是一個為快速 Web 開發而構建的 Python 微框架。如果您不熟悉 Flask，或者您認為我可能要說保溫瓶，那么我建議在繼續本教程之前，您先閱讀一下這里。
Vue.js 是用于構建用戶界面的漸進式框架。如果您不熟悉它，可以在這里上閱讀有關內容。
現在您已經熟悉了 Flask 和 Vue.js，我們可以開始了。
Flask設置
讓我們先安裝幾個依賴：
pip install --user cookiecutter
Cookiecutter 是一個很棒的命令行工具，用來快速引導項目模板。 我們正在使用 cookiecutter，所以我們不需要花費太多時間來配置項目。 請記住, Flask 并不像 Django 一樣包含電池, 因此必須在項目的初始設置中投入大量工作。
現在您已經安裝了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
然后在瀏覽器上打開 http://127.0.0.1:5000/example。您應該能看到以下內容：
{"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
如果導航到http://localhost:8080/, 您應該可看到 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 中保存靜態文件的路徑前綴。 您可以檢查 這個 以了解有關其他配置選項的
