はじめに

今回の環境構築は、へっぽこな筆者が個人的に良いと思うLaravel + vueの構築を(主に自分用に)まとめてみたものです。
もっといい構築方法があるよ！という方は是非教えていただきたいです

フレームワークの環境構築に主眼を置いているので、homesteadやlaradockなどの話はしません。あしからず。

TL;DR

Laravel インストール　composer create-project --prefer-dist laravel/laravel projectName "5.5.*"
Modelsディレクトリの作成と修正
Laravel ライブラリ導入　composer require --dev barryvdh/laravel-debugbar codedungeon/phpunit-result-printer barryvdh/laravel-ide-helper
vue環境構築　yarn install

Laravelの環境構築

Laravelのインストールと動作確認

インストール

composer create-project --prefer-dist laravel/laravel projectName "5.5.*"

動作確認

$ cd projectName 
$ php artisan serve

以下のようになればOK

Modelsディレクトリの作成

デフォルトでは/app直下にModelが配置されるようになっているが、Modelが増えていくとあまりにも見づらいため予めapp/Modelsディレクトリを作成する。
新しくModelを作成するときは

php artisan make:model Models/Hoge

のようにすると、app/Models以下に配置できる。
(デフォルト生成ディレクトリを設定できそうなものだが見つけられていない…)

注意点として、もともと配置されているUser.php関連で以下の修正が必要。

User.phpの移動とnamespace変更

User.php

// 「Models\」を追加
namespace Models\App;

User.php使用箇所の修正

/app/Http/Controllers/Auth/RegisterController.php

// 「Models\」を追加
use App\Models\User;

/config/auth.php

'providers' => [
    'users' => [
        'driver' => 'eloquent',
        // 「Models\」を追加
        'model' => App\Models\User::class,
    ],

/config/services.php

    'stripe' => [
        // 「Models\」を追加
        'model' => App\Models\User::class,
        'key' => env('STRIPE_KEY'),
        'secret' => env('STRIPE_SECRET'),
    ],

便利ライブラリのインストール

いつでも使える汎用的な便利ライブラリをインストールする。

barryvdh/laravel-debugbar

超必須
これがないとやってられないレベルで便利です。
詳しい使い方は割愛しますが、

変数が見れたり
クエリが見れたり
実行時間が見れたり

本当にいろんなことが出来ます。

codedungeon/phpunit-result-printer

PHPUnitでテストするならないと辛い。
PHPUnitデフォルトではテスト結果の出力が貧弱だが、これを入れると以下のように見やすく表示してくれる。

barryvdh/laravel-ide-helper

PHPStromを使用しているのなら100%インストール
補完が効かないところも効くようにしてくれる。

インストール

$ composer require --dev barryvdh/laravel-debugbar codedungeon/phpunit-result-printer barryvdh/laravel-ide-helper

Vueの環境構築

Laravel-mix環境の構築

$ yarn install

これで終了！
これだけでvueやsassのトランスパイルなどが行えるようになる。便利！
laravel-mixのカスタマイズは一例だけ挙げておく。結局ドキュメント参照が一番早い。

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

//本番環境だけキャッシュ回避。
//その場合は<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
//のようにmix関数で読み込むようにする。
if (mix.inProduction()) {
    mix.version();
}

vue-cliでの環境構築

Laravel5.5のmixはバージョンが古く、最新バージョンを使おうとするとloaderあたりでめちゃくちゃ大変なことになったことがあるので、個人的にはvueだけ別プロジェクトにしてしまうのをよくやっている。(ベストプラクティスだとは到底思えないが…)

vueプロジェクトの作成

普通にcliで作成してもいいが、折角なのでvue uiで作成してみる。

まずはvue-cliをグローバルインストール

$ npm install -g @vue/cli

そのあとにvue uiを起動する

$ vue ui

すると以下のような画面が表示される。(デフォルトは白です。設定で変更可能)

その後、作成タブからプロジェクトのディレクトリ設置場所を選択する。あとは指示に従っていけば作成できると思う。
プリセット選択で手動を選択した場合は、以下のように必要なものを選択する。

最後に設定をして作成完了。

動作確認など

プロジェクト作成後、左のメニューのタスクからserveを選択する。
タスクの実行ボタンを押すと実際にnpm scriptsが走る。

完了後アプリを開くボタンを押して以下のように表示されていればOK

個人的にvue uiを使いたいと思う理由が、バンドル後の情報を事細かに表示してくれるから。

標準的な回線での読み込み速度やアセットのファイルサイズの表示

ライブラリ毎のファイルサイズの表示

Laravelとの併用

これもベストプラクティスだとは到底思えないが、vue側でバンドルしたものをpublicにコピーしている。

まずはコピー用のライブラリをインストール

$ yarn add --dev cpx

その後、npm scriptsの編集

package.json

  "scripts": {
    "build": "vue-cli-service build",
    "laravel": "yarn build && yarn copy", //追加
    "copy": "cpx dist/js/* ../ProjectName/public/js/ &cpx dist/css/* ../ProjectName/public/css/"  //追加
  }

あとはblade側で読み込むようにすればOK

改善したいこと

まだvagrantやdockerの知見がないので、プロジェクト作成時にこれらを自動でやってくれるように設定したい。
LaravelにRepositryパターンを導入したい。
Laravel5.5のvueの扱いをどうするか…
- laravel-mixを使いたいけれど、少し古かったりvue-cliに比べて不便だったり(テストとか)する。
- ただvue-cliだと連携が面倒…(キャッシュ対策がめんどくさいとか)

最後に

冒頭にも書きましたが、もっといい方法があるよ！という方は教えていただけると幸いです

Laravel5.5 + vue の環境構築