如何把Vue集成到Flask中

如何把Vue集成到Flask中？針對這個問題，今天小編總結了這篇文章，希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。

Vue.js 是用于構建用戶界面的漸進式框架。如果您不熟悉它，可以在這里上閱讀有關內容。

現在您已經熟悉了 Flask 和 Vue.js，我們可以開始了。

Flask設置

讓我們先安裝幾個依賴：

(猜你喜歡：如何部署vue+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 的文件夾。 導航到該文件夾，您應該看到以下結構：

(猜你喜歡：七步教你搭建一個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

很美麗，不是嗎 ?

在繼續之前，我們需要設置一個虛擬環境。執行:

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 中保存靜態文件的路徑前綴。 您可以檢查 這個 以了解有關其他配置選項的更多信息。
現在運行:

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 -

關于把Vue集成到Flask中的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。