背景
バイト先で自分はReactを書いていたんだけど，これからはVue使うことになったらしい
ハンズオンしてほしいって頼まれたけど，Vueほぼやったことなかったので，基本的な使い方とかWebpackとの連携とかを半日ぐらい勉強した
よし資料作るかってなったら，そういえばバイト先PHP使ってること思い出して，これはLaravelとLaravel-Mix使うやつやんと気付く
ハンズオンで学んだ内容でそのままスムーズに移行できるように，Laravelを立ち上げて触ってみることにしたけど，何回か躓いたので備忘録
環境
- Windows 10
- PHP 7.3.1
- Composer 1.8.3
- Node 10.14.2
- Yarn 1.12.3
- Google Chrome
- VSCode
Laravelでプロジェクト作成
PHPとComposerを入れる
各々，公式サイトから落としてくる（てか入ってなかったんか...）
パスを通しておく
Laravel入れる
composer global require "laravel/installer=~1.1"でグローバルにLaravelいれる
これでLaravelコマンドが使えるようになった
プロジェクトを作って依存パッケージを入れる
laravel new xxxx でプロジェクトフォルダ（xxxx）作る
xxxx 内で composer install して依存パッケージを入れようとするが，上手くいかない
これは，composer.lock と composer.json に書かれたパッケージのバージョンが違うためらしい
composer updateでうまく行った
今後はこれを基本的に使えば良さそう
Laravel起動
php artisan serveしてサーバを起動！動いた
localhost:8000にブラウザでアクセスするも，Whoopsって表示されてる...
あ～.envファイルをコピーする必要があるんだった
PowerShellでcp .env.example .envした
（ちなみにPowerShellだとcp -p .env.example .envは動かなかった）
気を取り直して，php artisan serveしたら動いた🎉
今回使うフォルダたち
resources/js/: Vueのファイルも入ってるcomponents/ExampleComponent.vue
sass/: SCSSファイルが入ってるviews/: テンプレートのPHPファイルが入ってるwelcome.blade.php
public/: 最終的にServeされるファイルが入ってる（出力されてる）routes/: ウェブページやAPIのルーティング周りが書かれているweb.php
webpack.mix.js
CSRFトークン
コンソールでCSRFトークンの記述ねえぞって怒られてるから，welcome.blade.phpのheadタグ内に
<meta name="csrf-token" content="{{ csrf_token() }}">
書いておく
Vue動かす
準備
- Chrome拡張のVue.js devtools
- VSCodeの設定で
formatOnSaveをtrueにする - VSCode拡張の以下2つを入れる
xxxx内でyarnして依存モジュールを入れる
npm-scripts
package.jsonを見ると，主なコマンドは以下の4つ
prod: 1回productionビルドdev: 1回developmentビルドwatch: ファイルが更新されるたびにdevelopmentビルド（ブラウザリロード必要）hot: HMR．ファイルが更新されるたびにdevビルド（ブラウザリロード不要）
Routingを変えてみる
viewsにindex.blade.phpを作成
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Laravel</title> <meta name="csrf-token" content="{{ csrf_token() }}" /> </head> <body> <div id="app"> <example-component></example-component> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
routes/web.php内に，ブラウザで/にアクセスした時，welcomeのテンプレートを返すことが書かれてるので，indexに変更する
Route::get('/', function () {
return view('index');
});
もう一度サーバを起動してアクセスし直すとindex.blade.phpの内容が表示されてる
開発してみる
とりあえずyarn watchしてみる
resources/js/components/ExampleComponent.vueを編集すると，自動でビルドされる
ブラウザをリロードするとコンポーネントが更新されている
これで開発はできそう
HMR(Hot Module Replacement) する
yarn hotしてみたけど，.vueファイル変更保存しても反映されない！
調べたら，なんかIssueたってた
LaravelとVueを連携するためにLaravel-Mix（Webpackのラッパー）で通信してるけど，そこの連携がうまく行ってないっぽい
webpack.mix.jsに以下を追記
Mix.listen('configReady', webpackConfig => { if (Mix.isUsing('hmr')) { // Remove leading '/' from entry keys webpackConfig.entry = Object.keys(webpackConfig.entry).reduce( (entries, entry) => { entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry] return entries }, {} ) // Remove leading '/' from ExtractTextPlugin instances webpackConfig.plugins.forEach(plugin => { if (plugin.constructor.name === 'ExtractTextPlugin') { plugin.filename = plugin.filename.replace(/^\//, '') } }) } })
もう一回yarn hotしてブラウザで開いたらコンソールでHMRが有効化されていることが確認できた
.vueファイルを変更して保存すると，ブラウザのリロード無しで反映されるようになった🎉
とりあえず最低限は動いてるかな
HMRが動いたので今日はここまで
