Python
Vue.js
vue-cli
responder

Responder + Vue.jsプロジェクト作成手順


TL;DR

最近responderというPython製の非同期処理が売りのWebフレームワークを知ったので、Vue.jsと組み合わせてプロジェクトを作成した手順を紹介します。

完成したものはこちら

https://github.com/KeisukeToyota/responder-vue-sample


プロジェクト作成


Responder側

まずはディレクトリを作成してpipenvで環境を作っていきます。

$ mkdir responder-vue-sample

$ cd responder-vue-sample
$ pipenv --python 3.7

Pipfileを以下のように編集

[[source]]

name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]
asgiref = "==2.3.2"
responder = "*"

[requires]
python_version = "3.7"

responder以外にasgirefPipfileにバージョンを固定して記述しています。

asgirefresponderの依存パッケージでresponderをインストールすれば自動的にインストールされるのですが、記事投稿時そのままでは3.0.0が入ってしまいVue.jsのビルド済みファイルが入るstaticディレクトリ配下のファイルを正しく読み込めないため2.3.2で固定しています。

以下のコマンドでライブラリをインストールします。

$ pipenv install


サーバープログラム

プロジェクト直下にapp.pyを作成してstatic/index.htmlを表示するだけのコードを記述します。


app.pyj

import responder

api = responder.API()

if __name__ == '__main__':
api.add_route('/', static=True)
api.run()



Vue.js側

まずvue-cliをグローバルにインストールします。

$ npm install -g @vue/cli

インストール後、先程作ったプロジェクト直下にVue.jsのプロジェクトを作っていきます。

カレントディレクトリの指定以外はお好みで大丈夫です。

$ vue create .

Vue CLI v3.5.1
? Generate project in current directory? (Y/n) Y
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features

Vue.jsのプロジェクトの作成ができたら、ビルドしたファイルをstaticに吐くようにpackage.jsonを編集します。


package.json

{

"name": "responder-vue-sample",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
+ "build": "vue-cli-service build --dest static",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

次にベースURLを/からstaticに変更するためにvue.config.jsを作成してpublicPathを変更します。


vue.config.js

module.exports = {

publicPath: "static"
}

最終的に以下のようなファイル構成になるかと思います。

$ tree -L 1

tree -L 1
.
├── Pipfile
├── Pipfile.lock
├── README.md
├── app.py
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
├── static
├── templates
├── vue.config.js
└── yarn.lock


ビルドと実行

では実際にビルドしてからサーバープログラムを起動してresponderからVue.jsが呼べているか確認していきます。

$ pipenv run responder build # or yarn build

$ pipenv run python app.py

これでlocalhost:5042にアクセスして以下のようにVue.jsのホーム画面が出たら終了です。お疲れ様でした。

スクリーンショット 2019-03-30 0.16.12.png