今まで Vue CLI 2.x を使ってVueプロジェクトを作成していたのですが、最新の Vue CLI 3 を使ってみました。
2.x とはインストール方法やディレクトリ構成、設定ファイルなど異なることが多かったので、備忘録として書き残しておきます。
＊参考
＊目次
- Vue CLI 3 のインストール
- Vue router の導入
- Bootstrap Vue の導入
- Flaskとの連携
＊環境
- MacOS
- vue/cli 3.7.0
- vue-router 3.0.6
- bootstrap-vue 2.0.0-rc.19
＊Vue CLI 3 のインストール
ターミナルで下記コマンドを実行してインストールします。$ npm install -g @vue/cli
プロジェクトを作成します。
createコマンドの後ろは任意のプロジェクト名に適宜変えてください。いくつか質問されますが、基本的にEnterを押すだけで大丈夫です。
$ vue create flask-vue-app
作成されたディレクトリに入り、サーバーを起動します。
$ cd flask-vue-app/
$ npm run serve
下記にアクセスするとVueのサンプル画面が表示されます。
http://localhost:8080/
ちなみに、プロジェクト作成と同時に Git が入っていて、自動生成されたソースが
masterの最初のコミットに追加されています。＊Vue router の導入
2.x版ではプロジェクト作成時に Vue router を自動で入れるか選択できたのですが、今回はできないようでしたので手動で入れました。下記コマンドを実行して
vue-routerをインストールします。$ npm install --save-dev vue-router
src/router/index.jsを新規作成します。（プロジェクト作成時にサンプルとして
HelloWorld.vueが存在している前提で書いています）<index.js>
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
src/main.jsにvue-routerを追加します。<main.js>
import Vue from 'vue'
import App from './App.vue'
import router from './router' <-- 追加
Vue.config.productionTip = false
new Vue({
router, <-- 追加
render: h => h(App),
}).$mount('#app')
下記にアクセスして
HelloWorld.vueが表示されることを確認します。http://localhost:8080/
＊Bootstrap Vue の導入
Vue用の Bootstrap が用意されているので、今回はこれを使います。下記コマンドを実行してインストールします。
$ npm install bootstrap-vue
src/main.jsに bootstrap-vue を追加します。<main.js>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// ------- ↓追加ここから -------
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
// ------- ↑追加ここまで -------
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
コンポーネント内で
<b-navbar>などを使うと Bootstrap Vue が適用されます。＊Flaskとの連携
フロントエンドとサーバーサイドそれぞれでサーバーを起動すれば、axiosを使って簡単に通信できるのですが、Flaskサーバーのみを起動してVueと通信できるようにしました。プロジェクト配下は下記構成にしました。
clientディレクトリに作成したVueプロジェクトを配置、backendディレクトリにPython3系の仮想環境を作成していることを前提としています。flask-vue-app
├── backend
│ ├── app.py
│ └── env
├── client
│ ├── README.md
│ ├── babel.config.js
│ ├── dist
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── src
│ └── vue.config.js
└── requirements.txt
client/vue.config.jsを新規作成します。http://localhost:5000はFlask側で起動するサーバーを指定しています。<vue.config.js>
module.exports = {
assetsDir: 'static',
devServer: {
proxy: 'http://localhost:5000'
}
}
backend/app.pyを下記に修正します。Vueのビルドファイルを参照するようにしています。
ビルドファイルは
npm run buildを実行することで新規作成されます。<backend/app.py>
# -*- coding: utf-8 -*-
from flask import Flask, render_template
DEBUG = True
app = Flask(__name__,
static_folder='../client/dist/static', <-- 追加
template_folder='../client/dist' <-- 追加
)
app.config.from_object(__name__)
# -------- ↓追加ここから --------
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
return render_template('index.html')
# -------- ↑追加ここまで --------
if __name__ == '__main__':
app.run()
Vueをビルドします。
distディレクトリが新規作成され、その中にビルドファイルが作成されます。./client $ npm run build
Flask側のサーバーを起動します。
./backend $ python app.py
下記にアクセスして画面が表示されれば正常に連携できています。
http://localhost:5000/
＊所感
Vue CLI 3版はbuildの設定ファイルがデフォルトで作成されなかったり、vue-routerを自分で入れなければいけなかったり、少し手間が増えた気がしました。私のやり方が悪いかもしれないので、もう少し調べていきたいと思います。サーバーサイド側を Python を使って実装することが多いのですが、Flask と Vue を連携させるための資料が少なく調べるのに時間がかかりましたが、勉強になりました。
App Engine などへデプロイするときにも連携の設定は必要なので覚えておこうと思います。
Sign up here with your email
ConversionConversion EmoticonEmoticon