
どうもです。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の書いてあるファイルを変更してくれ!おやすみー!