PHP
laravel
vue.js

LaravelとVue.jsを使って開発するための初期設定

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
    1. <head>内
      • <meta name="csrf-token" content="{{ csrf_token() }}">
      • <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    2. <body>内
      • <div id="app"> <example-component></example-component> </div>
    3. <body>最終行
      • <script src=" {{ mix('js/app.js') }} "></script>

Laravelのデバッグ用のサーバーを起動

ローカルサーバーを立ち上げる。
ただし、動き続けるので、ターミナルは、もう1つ犠牲に・・・

start-server.sh
$ php artisan serve

Vue.js関連ファイル

  • JS
    resources/js/
  • SASS
    resources/sass/

最後に

色々書いたものの、ターミナルを2つも占有してしまう(npm run watch/php artisan server)ことを考えると、Dockerで専用の環境を提供した方がいろいろ良さそうな気がしてきた・・・