Edited at

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をディレクトリー配下に設置する場合は、mix()だとおかしなことになるので、その場合は、asset()を使う。






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()の問題を見つけたのでコメントを追加。