【入門】Laravel×Vue.js①〜セットアップ編〜


#はじめに
**PHPのフレームワークであるLaravel**で作成したアプリケーションに
**JavaScriptのフレームワークであるVue.js**を連携させる方法について説明します。

#Node.jsのインストール
Node.jsのパッケージ管理ツールnpmを使うので、
Vue.jsを利用するためにはNode.jsが必要です。

まず、[https://nodejs.org/ja/](https://nodejs.org/ja/)からインストールしましょう
推奨版、最新版どちらでも構わないので、インストールしてください。
<img width="1440" alt="スクリーンショット 2019-12-21 3.22.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429676/b4e82afc-3b89-eb73-d6ee-782609e67ec5.png">

#Vue.jsをアプリケーションへインストールする
インストールするパッケージ一覧が記述されている`package.json`を変更した後、
`npm`を使ってVue.jsをインストール、ビルドします。

##package.jsonの変更
package.jsonにはインストールするパッケージがリストとして記述されています。
Vue.js関連のパッケージは`vue`、`vue-template-compiler`です。

```json-doc:package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "tar": "^4.4.8",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "node-sass": "^4.12.0",
        "quill": "^1.3.6"
    }
}
```

##Vue.jsのインストール
上のパッケージをインストールしましょう

```:ターミナル
$ npm install
```

##Vue.jsのビルド
インストールしただけではVue.jsは使えないので、ビルドしていきましょう

```:ターミナル
$ npm run dev
```

#コンポーネントの登録
作成されたコンポーネントをしましょう

```javascript:resources/app.js
require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});
```


```js:
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
```
上記の記述で`resources/js/components/ExampleComponent.vue`を
`example-component`という名前で登録します

##ビルド
Vue.js関連のファイルを変更した時はビルドしなければ、変更は反映されません。

```:ターミナル
$ npm run dev
```

#コンポーネント
サンプルのコンポーネントを確認しましょう
ない場合は手動で作成してください

```html:resources/js/components/ExampleComponent.vue
<template>
	<div class="row justify-content-center">
		<div class="col-md-8">
			<div class="card">
				<div class="card-header">Example Component</div>
				<div class="card_body">
					I'm an example component.
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		mouted() {
			console.log('Component moundted.')
		}
	}
</script>
```

内容については関係ないので、今回は説明を省きます。
単純なことなので、時間がある時に一度見てください。

#ビューファイルでテンプレートを参照する
コンポーネントをビューファイルで参照する方法について説明します。
適当なファイルに挿入して見てください

```html:resources/views/****.blade.php
<head>
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
    <meta name="csrf-token" content="{{csrf_token()}}">
</head>
<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('/js/app.js')  }}"></script>
```

###スタイルシート
```html:
<link href="{{ mix('/css/app.css')  }}" rel="stylesheet" type="text/css">
```

`link`タグでスタイルシートを参照しています
しかし、スタイルシートは`resources/css`、`public/css`に２つあります。
そのため、`mix('/css/app.css")`で２つのスタイルシートをまとめて読み込むことができます
　
###CSRFトークン
```html:
<meta name="csrf-token" content="{{csrf_token()}}">
```

LaravelでVue.jsを利用する時はCSRFトークンを利用することが推奨されています。
特に理由がない場合は記述しましょう

###コンポーネントの参照

```html:
<div id="app">
    <example-component></example-component>
</div>
```

コンポーネントは`id="app"`の領域で使用できます
`example-component`タグで上で作成したコンポーネントを呼び出します。

###スクリプトファイル

```html:
<script src="{{ mix('/js/app.js')  }}"></script>
```

スタイルシートと同様に、`mix('/css/app.css")`で２つのスクリプトファイルをまとめて読み込んでいます。
**必ず`<example-component>`の下に記述してください。**

##動作確認
最後に動作確認をしましょう
忘れずにビルドしましょう

```:ターミナル
$ npm run dev
```

上記のような内容が表示されれば完了です！！


**疑問、気になるところがございましたら、質問、コメントよろしくお願いします！！！**