如何把Vue集成到Flask中？針對這個問題，今天小編總結了這篇文章，希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務連平,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220Vue.js 是用于構建用戶界面的漸進式框架。如果您不熟悉它，可以在這里上閱讀有關內容。
現(xiàn)在您已經(jīng)熟悉了 Flask 和 Vue.js，我們可以開始了。
讓我們先安裝幾個依賴：
(猜你喜歡：如何部署vue+flask生產(chǎn)環(huán)境)
pip install --user cookiecutter
Cookiecutter 是一個很棒的命令行工具，用來快速引導項目模板。 我們正在使用 cookiecutter，所以我們不需要花費太多時間來配置項目。 請記住, Flask 并不像 Django 一樣包含電池, 因此必須在項目的初始設置中投入大量工作。
現(xiàn)在您已經(jīng)安裝了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
應該創(chuàng)建一個名為 flask-vuejs-tutorial 的文件夾。 導航到該文件夾，您應該看到以下結構：
(猜你喜歡：七步教你搭建一個Vue Flask項目)
├── 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ù)之前，我們需要設置一個虛擬環(huán)境。執(zhí)行:
python -m venv venv
現(xiàn)在，您可以使用喜歡的IDE /文本編輯器打開項目文件夾。在繼續(xù)下一步之前，請記住激活虛擬環(huán)境。
現(xiàn)在我們可以安裝依賴項。執(zhí)行：
pip install -r requirements.txt
完成后，打開 app/config.py。您會注意到，此API模板使用了postgres數(shù)據(jù)庫連接。 如果您不介意，可以使用必要的憑據(jù)設置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
}我們已經(jīng)刪除了所有的 postgres 配置，以支持 sqlite 的配置。如果您要使用 postgres，請保持 conf.py 文件不變。
現(xiàn)在我們需要導出 Flask 應用程序。執(zhí)行:
export FLASK_APP=wsgi:app
現(xiàn)在我們已經(jīng)完成了 Flask 的 API 的設置，執(zhí)行:
flask run
然后在瀏覽器上打開 http://127.0.0.1:5000/example。您應該能看到以下內容：
{"message": "Success"}現(xiàn)在我們的 API 已經(jīng)準備就緒，我們可以繼續(xù)引導vue應用程序了。
我們需要做的第一件事是安裝 vue cli。執(zhí)行:
npm install -g @vue/cli # OR yarn global add @vue/cli
一旦安裝完成后, 您可以使用以下命令檢查版本是否正確(3.x)：
vue --version
在項目文件夾的根目錄中運行:
vue create web
我選擇 default (babel, eslint) 作為預設，并選擇 yarn 作為我的包裹管理器。如果您熟悉node項目，則可以繼續(xù)并選擇您的選選項。如果沒有，請遵循本教程的默認設置。
現(xiàn)在導航到新建的 web 文件夾并運行：
yarn serve # OR npm run serve
如果導航到http://localhost:8080/, 您應該可看到 Welcome to Your Vue.js App 文本。
現(xiàn)在我們準備開始集成。
在 Web 文件夾中，創(chuàng)建一個名為 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 保存用于存放靜態(tài)文件(css, js 等)的文件夾。 注意 它是相對于 outputDir 字段中提供的值的。
最后, baseUrl 字段將在 index.html 中保存靜態(tài)文件的路徑前綴。 您可以檢查 這個 以了解有關其他配置選項的更多信息。
現(xiàn)在運行:
yarn build # OR npm run build
如果打開 app 文件夾, 您會注意到已經(jīng)創(chuàng)建了兩個新文件夾, 即templates 和 static。 它們包含內置的vue文件。
現(xiàn)在在app 文件夾中創(chuàng)建一個 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)現(xiàn)在，這是怎么回事呢？
好吧，現(xiàn)在我們創(chuàng)建一個名為 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')
在這里, 我們正在注冊之前創(chuàng)建的藍圖(blueprint)。
我們?yōu)樗{圖(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 -
關于把Vue集成到Flask中的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
