LaravelMixチュートリアル Vue.js導入まで

LaravelMixを使ってみようとしたけど、Laravel公式のドキュメントだと全然わからず、、

https://readouble.com/laravel/8.x/ja/mix.html

LaravelMix公式のドキュメントを見ることに。

https://readouble.com/laravel/8.x/ja/mix.html

事前準備

Laravel + Docker環境

https://lightwill.hatenablog.com/entry/2022/01/20/150821

nodeJSが入ってないので入れる

docker exec -it laravel_docker-app-1 /bin/bash
curl -sL https://deb.nodesource.com/setup_16.x -o setup.sh
sh setup.sh
apt-get install -y nodejs
npm install -g npm

チュートリアル

npm install

途中で固まったり、、時間がかかる

JS、CSSを適当に編集

vi resources/js/app.js

alert('Hello World');

vi resources/css/app.css

body {
    color: red;
}

npx mix

以下が作成される
public/js/app.js
public/css/app.css
webpack.mix.jsに書いてある

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', []);

適当にviewをつくって、JSとCSSを読み込んで確認してみる。

<link rel="stylesheet" href="/css/app.css" />
<script src="/js/app.js"></script>

npx mix watch

で変更があったら自動でコンパイルして反映してくれる

Vue.js導入

LaravelMixのドキュメントだと説明が足りない、、

https://laravel-mix.com/docs/6.0/vue

事前にvue関連をインストール

npm install vue vue-router vuex vue-template-compiler vue-loader --save-dev

LaravelMixのドキュメントを参考にwebpack.mix.jsとapp.jsを編集、Alert.vueを作成

bladeに以下を追加

<div id="app">
    <alert></alert>
</div>

npx mix watchしてるのにJSやCSSの変更が反映されない！

ブラウザをスーパーリロードしないと反映されない、、

webpack.mix.jsに.version()を追記

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', []).version();

すると、
<link rel="stylesheet" href="{{mix('css/app.css')}}" />
<script src="{{mix('js/app.js')}}"></script>
が
<link rel="stylesheet" href="/css/app.css?id=709141171a3f4976580d" />
<script src="/js/app.js?id=184b0a397007d2da2e91"></script>
になって、スーパーリロードする必要がなくなる。