環境構築
プロジェクト内でnpm installで利用可能（ver 5.6以降？デフォルトでpackage.jsonに設定してある）
※レンタルサーバーの場合はnode.js入れる必要がある。
$ npm install
実装してみる
とりあえず、welcome.blade.phpに設定してみます。
resources/views/welcome.blade.php
<html lang="{{ app()->getLocale() }}">
<head>
～
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
～
</head>
<body>
～
<div id="app">
<example-component></example-component>
</div>
～
<script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>
①head内でcsrfトークンの設定、cssのリンク
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
②body内でコンポーネントの設定
vueのコードはresources/assets/js/app.jsに書いてあります。example-componentはデフォルトで設定してあるコンポーネント
<div id="app">
<example-component></example-component>
</div>
③body閉じタグ直前でjsファイルへのリンク
<script src="{{ asset('js/app.js') }}" defer></script>
動かしてみる
コンパイルしてページを開くと表示されているはずです。
$ npm run dev
npm run dev … minifyされない
npm run prod … minifyされる
npm run watch … 対象ファイルを監視して変更があれば自動でコンパイルしてくれる