VueJSとLaravelを使用してSPAアプリケーションを構築する(Part.02)

##はじめに

今回の記事の間に私たちが一緒にやることは：

- Laravelをインストールする。
- Laravel Mixをインストールし、セットアップする。
- Vue-router、vuex、axiosなどの必要なライブラリをインストールする。
- 最初のVueコンポーネントを設定する。

##1.Laravelをインストールしてサーバーを実行する

Windowsを使用している場合、`Xampp + Composer`がインストールされています（Laravelバージョンのサーバー要件によりXamppバージョンを選択してください。）
UbuntuまたはLinuxシステムを使用している場合は、`Nginx + PHP + MySQL`をインストールすることをお勧めします。
これで、Laravelに次のコマンドをインストールする：

```sh
composer create-project --prefer-dist laravel/laravel forum-spa;
```
私はLaravel最新バージョンをインストールします5.7です。下位バージョンは任意にインストールできます（ただし、バージョン5.3以前では、bootstrap.js設定ファイルはわずかに異なり、5.3にはLaravel mixがまだありません）。

次に、プロジェクトディレクトリに移動し、アプリケーションを実行します。

```sh
cd forum-spa
php artisan serve 
```
`http://localhost:8000`でアプリを開いて実行します。

バックエンドを簡素化するために、シリーズ全体が`php artisan serve`コマンドを使用してサーバーを実行しますが、仮想ホストを構成すれば、ぜんぜん問題ない。

`php artisan serve`を使用している場合は、このコマンドを実行しているコマンドラインがオフになっていないことに注意してください。

##2.2. Laravel Mixをインストールし、ウェルカムビューを設定する。

次に、package.jsonファイルを開き、以下を参照してください：

```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を実行して以上のライブラリをインストールすることです。

```sh
npm install
```
OK、ライブラリをインストールした後、Laravelで設定されたVueJSアプリケーションを実行するために、ウェルカムのデフォルトビューを変更する。
**resources/views/welcome.blade.php**ファイルを開き、コードを変更してください：

```html
<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>
```
次の実行：

```sh
npm run watch
```
次に、**http://localhost:8000**をリフレッシュすると、**resource/js/components/ExampleComponent.vue**ファイルの内容が次のように表示されました。
![p2-1.png](https://qiita-image-store.s3.amazonaws.com/0/149434/87be8cbb-3bb9-60e1-197b-849b3a9088d8.png)
どのように**laravel mix**はファイルをビルドしましたか？プロジェクトのルートディレクトリにある`webpack.mix.js`ファイルを開き、以下を使用します。

```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）の処理について研究します。