環境

python: 3.8.0
yarn: 1.16.0
npm: 6.9.0
@vue/cli 4.0.4
pipenv, version 2018.11.26

フロントエンド側

まずはフロントエンド側のvue.jsのセットアップから。

$ mkdir rootdir
$ cd rootdir
$ npm install -g @vue/cli
$ vue create frontend
# 色々と聞かれる。

$ cd frontend
# ここからは、必要なプラグイン・パッケージなどを入れておく。
# ルータを入れる。ヒストリーモードはonに。
$ vue add router

# sassのバンドルに必要。ないと、このパッケージを入れてくれと表示されるので、入れないでやってみてもいいだろう。
$ yarn add sass-loader node-sass --dev

# フロントエンドだけで確認もできる
$ yarn serve

自分は基本的にnpmを使う派だが、vue.jsはcreateするとyarnで作ってくれる模様。なので、yarnも混じってる。yarnの正しい使い方はよく知らないので、今度調べる。

vue createならnpmも選べることに気づいた。vue uiで作ると、yarnになるのか？それとも選べたかな？記憶が怪しい。

.vueファイルを監視して、ビルドもできる。frontend/package.jsonのscriptsにコマンドを追記すればいい。

{
    ...,
    "scripts": {
        ...,
        "watch": "vue-cli-service build --watch"
    }
}

これで、

$ cd frontend
$ npm run watch
# または
# $ yarn watch

としておくだけで、変更を検知してビルドしてくれる。エラーの表示も親切だと思う。

バックエンド側

続いて、バックエンド側であるFlaskの設定。pipenvを使っている。

$ cd rootdir
# ルートフォルダに`run.py`を作るので、ルートフォルダにPipfileを置く。
# ぶっちゃけ全て`backend`フォルダに作っても問題はない。
# 3.8がリリースされていたので、これを使ってみる。
$ pipenv install --python 3.8.0
$ pipenv install flask
$ touch run.py

そして、run.pyに次のような内容を書き込む。

# -*- coding: utf-8 -*-

from flask import Flask, render_template, jsonify
from random import randint

# vueはcreateしたフォルダ中のdistにバンドルしたファイルを作成するので、
# テンプレートとスタティックフォルダをそちらに指定する。
app = Flask(__name__,
            static_url_path='',
            static_folder="./frontend/dist",
            template_folder="./frontend/dist")

# 基本的にfrontend側でルートを処理するので、全て渡す。
@app.route('/')
@app.route('/<path:path>')
def index(path=None):
    return render_template("index.html")

# 一応バックエンド的なものを書いて置く。大きくなるなら分離するべき。
@app.route('/api/randint')
def random_number():
    response = {'randint': randint(0, 100_000)}
    return jsonify(response)

あとはFlask的実行を行えばいい。

$ cd rootdir
$ FLASK_APP=run.py FLASK_ENV=development pipenv run flask run

フロントエンド側の最後に書いたvueのwatchと併用すればホットリロードができる。やったね。

Dockerでポータブルにしたい。

flask+vuejsの環境構築

環境

フロントエンド側

バックエンド側

参考