背景
バイト先で自分は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が動いたので今日はここまで