LaravelとVue.jsを使ってプロジェクトを作成してみる
どちらも便利なフレームワークなんだけど、共存させたらどの程度便利なのか、それとも不便になるところがあるのかを確認してみたいと思ったので、便利だったときのために、その手順をメモ。
Laravelでプロジェクトを作成
laravel-install.sh
$ composer create-project "laravel/laravel" laravel-vue
Vue.jsのインストール
最近のLaravelには、最初からVue.jsがpackage.jsonに入っているので、インストールは下記コマンドだけ。
vue.js-install.sh
$ cd laravel-vue
$ cat package.json | grep vue
"vue": "^2.5.17"
$ npm install
Vue.jsのコンポーネントの準備
vue.js-preparation.sh
$ npm run dev
$ ls public/js/app.js
$ ls public/css/app.css
assetの監視設定
これをしておくことで、assetを変更すると自動的にコンパイルしてくれるようになる。
ただし、動き続けるので、ターミナルは1つ犠牲に・・・
watch-script.sh
$ npm run watch
Bladeテンプレートの修正
- welcome.blade.php
- <head>内
- <meta name="csrf-token" content="{{ csrf_token() }}">
- <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
- <body>内
- <div id="app"> <example-component></example-component> </div>
- <body>最終行
- <script src=" {{ mix('js/app.js') }} "></script> ※ Laravelをディレクトリー配下に設置する場合は、mix()だとおかしなことになるので、その場合は、asset()を使う。
- <head>内
Laravelのデバッグ用のサーバーを起動
ローカルサーバーを立ち上げる。
ただし、動き続けるので、ターミナルは、もう1つ犠牲に・・・
start-server.sh
$ php artisan serve
Vue.js関連ファイル
- JS
resources/js/ - SASS
resources/sass/
最後に
色々書いたものの、ターミナルを2つも占有してしまう(npm run watch/php artisan server)ことを考えると、Dockerで専用の環境を提供した方がいろいろ良さそうな気がしてきた・・・
変更履歴
- 2018/12/12: mix()の問題を見つけたのでコメントを追加。