この文書はplayframeworkとvuejsを使うときに私が最初にやったことを記録するためのメモです。playframeworkは5年くらい経験がありますが、vuejsは初心者です。考え違いなどあると思いますが、見つけたら適宜修正します。
playframeworkでvuejsを使おうと思って、調べるとplay-vue-webpackというのが見つかります。試してみると、結局vuejsは8080ポート、playframeworkは9000ポートを使っています。sbt runでnodejsとplayframeworkが同時に起動できるのは良いと思います。あと、distでまとめてコンパイルできるようですが、私はvuejsはWEBサーバ側に置くつもりなのでそこにメリットを感じません。一方、build.sbtで色々やっているようで、これだと、vuejs、playframeworkのそれぞれでバージョンアップがあっても、双方にメンテが入る可能性が高そうです。そこで、playframeworkとvuejsを別々に考えていくことにします。
-
前提
- java8、sbt、nodejs、npmは適度に新しいものがインストールされているものとします。
- OSはubuntuを使っています。
playframeworkの準備
名前は適当に設定して、それ以外は、デフォルトのまま。
http://localhost:9000 で確認後、playframeworkは停止させます。
sbt new playframework/play-scala-seed.g8
cd [プロジェクト名]
sbt run
vue-cliのインストール(最初だけ)
webpackを使いたいのでcliをインストールしておきます。
sudo npm install --global vue-cli
vuejsのインストール
playframeworkとvuejsは同じディレクトリの方が便利なので、1で決めたディレクトリにcdしてから以下の作業をする。
http://localhost:8080 で確認。
vue init webpack [vuejsの格納ディレクトリ名]
cd [vuejsの格納ディレクトリ名]
npm run dev
IDEの準備
最後に、私はeclipseで開発するので、./project/plugin.sbtにsbteclipseを追加して、sbt eclipseでインポートできるようにします。