##はじめに
今回の記事の間に私たちが一緒にやることは：
- Laravelをインストールする。
- Laravel Mixをインストールし、セットアップする。
- Vue-router、vuex、axiosなどの必要なライブラリをインストールする。
- 最初のVueコンポーネントを設定する。
##1.Laravelをインストールしてサーバーを実行する
Windowsを使用している場合、Xampp + Composerがインストールされています（Laravelバージョンのサーバー要件によりXamppバージョンを選択してください。）
UbuntuまたはLinuxシステムを使用している場合は、Nginx + PHP + MySQLをインストールすることをお勧めします。
これで、Laravelに次のコマンドをインストールする：
composer create-project --prefer-dist laravel/laravel forum-spa;
私はLaravel最新バージョンをインストールします5.7です。下位バージョンは任意にインストールできます（ただし、バージョン5.3以前では、bootstrap.js設定ファイルはわずかに異なり、5.3にはLaravel mixがまだありません）。
次に、プロジェクトディレクトリに移動し、アプリケーションを実行します。
cd forum-spa
php artisan serve
http://localhost:8000でアプリを開いて実行します。
バックエンドを簡素化するために、シリーズ全体がphp artisan serveコマンドを使用してサーバーを実行しますが、仮想ホストを構成すれば、ぜんぜん問題ない。
php artisan serveを使用している場合は、このコマンドを実行しているコマンドラインがオフになっていないことに注意してください。
##2.2. Laravel Mixをインストールし、ウェルカムビューを設定する。
次に、package.jsonファイルを開き、以下を参照してください：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env 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": "cross-env 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.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7"
}
}
このファイルを見て、Laravelはlaravel-mix、vue、axios、jquery、bootstrapなどのライブラリとlodash（配列操作用）、popperjsを設定しました。
次の簡単な作業は、npm installを実行して以上のライブラリをインストールすることです。
npm install
OK、ライブラリをインストールした後、Laravelで設定されたVueJSアプリケーションを実行するために、ウェルカムのデフォルトビューを変更する。
resources/views/welcome.blade.phpファイルを開き、コードを変更してください：
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}">
<title>Forum webdev.mediado.jp</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
次の実行：
npm run watch
次に、http://localhost:8000**をリフレッシュすると、**resource/js/components/ExampleComponent.vue**ファイルの内容が次のように表示されました。
どのようにlaravel mix**はファイルをビルドしましたか？プロジェクトのルートディレクトリにあるwebpack.mix.jsファイルを開き、以下を使用します。
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
ご覧のように、Laravelはresources/js/app.jsファイルをビルドし、resources/js/app.js => public/js、resources/sass/app.scss => public/css。これは最後の2つのターゲットファイルです。それで2つのファイルをwelcome.blade.phpビューで宣言しました。
##まとめ
それでは最初のセットアップを完了しました。
次に、VueJSとLaravelを共有する際に、vue-routerとのルーティング、コンポーネントの作成、ルーティングエラー（404）の処理について研究します。