どうもです。Vue.jsを仕事で使うことがあったので、覚えたことを記事にして行きたいと思います。というわけで、第1回目はLaravelMixでVue.jsを使う超簡単なサンプルを作って行きたいと思います。
- Laravel6系のインストールが済んでいる
- Nodeのインストールが済んでいる
- LaravelMixでapp.js以外のファイルを出力したい
- HelloWorldしたい
前提条件のLaravelインストールやNodeのインストールは今後の記事のネタとして、また機会を見て書いて行きたいと思います！
LaravelMixとは？
知ってる範囲で簡略化すると、Webpackという、散らかりがちなフロントエンドのファイル（JSやCSS)などをやろうと思えば1ファイルで管理できるツールですが、これを使いやすいように予め設定しておいてくれているのがLaravelMixです。この記事では、LaravelMixでVue.js使ったJavaScriptをコンパイルしてHelloWorldするのが目的なので、この程度の理解でOKです。
LaravelMixの有効化
インストールと書こうかと思いましたが、Laravelインストールした時点で、LaravelMixを使う為のレシピがpackage.jsonに書いてあるので、Nodeがインストールされているのが前提ですが、コマンドを叩くだけでOKです。コマンドは下記です。
npm install
LaravelでViewファイルを作成
JavaScriptを動作させるためのViewファイルを用意します。こんな感じです。コメントにはファイルへのパスを書いてます。laravelはプロジェクトの根っこフォルダです。プロジェクトルートディレクトリって自分は読んでます。
// laravel/resouces/test.blade.php <html> <head> </head> <body> <div id="test"> </div> </body> </html>
LaravelでViewへのルートを敷く
ルートを敷くっていう表現が自分的にはしっくり来るので書いてます。このページにアクセスする為に、どんなURIを設定しますか？ということになります。web.phpで設定できます。
// laravel/routes/web.php
Route::get('/vue', function () {
return view('test');
});
// /vueにした場合
// http://example.com/vue
// でアクセスすると、さっき書いたViewが表示されるようになります。
コメントの通りなので、vue以外の名前にすれば、ドメイン以下が変わります。面白いので試してみてください。
Laravel内にJavaScriptファイルをつくる
次にJavaScriptファイルを作って行きますが、
laravel/resources/jsに自分は筋っぽいのでファイルを作るようにしてます。
// laravel/resources/js/vuetest.js
import Vue from 'vue'
const ex = new Vue({
el: '#test',
data: {
say: 'hoooooooo おおおおおおおおおおおおおおおおおお'
}
});
こんな感じっす。import VueでVue.jsを読み込んでます。
JavaScriptのビルド先を設定する
デフォルト設定のままビルドすると、app.jsしかビルドされないので、新しく追加したvuetest.jsのビルド先を設定します。webpack.mix.jsに設定します。
// laravel/webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/vuetest.js', 'public/js'); // これ追加
これでpublic/jsに出力します。
JavaScriptをビルドする
dosか何かでlaravelのプロジェクトルートディレクトリまで移動して、何れかのコマンドでJavaScriptをビルドします。
| npm run dev | 開発用としてビルドします。1回だけです。 |
| npm run watch | 開発用としてビルドしますが、ファイルに更新がある度にビルドします。 |
| npm run prod | 本番用として圧縮してビルドします。 |
npm run watchで変更のたびにビルドだと重い場合はnpm run watch-pollとすると、定期的にビルドが行われるので、こちらを使いましょう。ちなみにコマンドは、package.json見れば、書いてあります。
待望のVue.jsでHelloWorld
やぁ！お付き合い頂きありがとう！待望のHelloWorldだよ！というわけでBladeファイル変更してやりましょう。
<html>
<head>
</head>
<body>
<div id="test">
@{{say}}
</div>
</body>
<script src="{{asset('js/vuetest.js')}}"></script>
</html>
出る文字、hello worldじゃないけど、気になるならVueの書いてあるファイルを変更してくれ！おやすみー！
