LaravelでVueファイルを使う

Bladeに直接Vueを使用した記述をするのはよろしくなさそうなので、.vueファイルをつくって,vueを利用する部分を外に分離しました。
（bladeファイルのhtml部に@clickやv-on:click等のイベントを記載しても効かなかった...ただしv-ifや、script部にvueを使った記述は有効な様子）

うまくいかない動作があることはともかく、vueファイルに分離する事自体は、多分、コンポーネントとして真っ当な記述の方法だと思います。

構成は以下のようなイメージ。

メインページ(blade.php)  
┗vueファイル（.vue）

vueファイルを作る

以下にファイルを作成する。
resource/js/components/hoge.vue

vueファイルの登録

resource/js/app.jsにvueの利用を宣言。
これでhtml部分にhogeタグが使える。

Vue.component('hoge', require('./components/hoge.vue').default); 

blade側

html部分にタグを設定

<hoge></hoge>

ビルド

npm run dev 

このコマンドはnode.jsのパッケージ管理ツール。 npmをつかってdevというスクリプトをrunする。（あってる？）

npmはnode.jsとセットで提供されるため、npmを使いたいがためにnode.jsをインストールすることがある（ほんと？） ちなみにnode.jsとはサーバ側で動くjsの実行エンジン・実行環境のこと。

runのコマンドで使えるスクリプトはpackage.jsonに記述されている。

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
    略・・・
},

webpackで何かしている様子。
webpackは配信用にリソースをまとめるためのツールらしい。
webpackもnode.jsについてくるものらしい。
スクリプトの引数になっているconfigファイルとか追っていけば、どこかのファイルをまとめてどこかに出力する、見たいなことが書いてあるんじゃないでしょうか。（間違えてたらごめんなさい）

もうちょっと具体的な想像をすると、webpackでまとめられたjsファイルがpublicとかの参照可能なファイルに置かれるんだと思います。

想像するくらいならソース読めというツッコミは無しで。

余談

スクリプト言語の良いところはデバッグのしやすさだと思っていましたが、ビルドするようになるとクライアント側で動いているソースが分かりにくくなってしまうのが残念なところ。

いちおう、Chromeのvueデバッグ用ツールがあるみたいなのでメモしておきます。 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd