Laravel5.6インストール〜Vue.jsを使えるようにするまで

経緯

Laravel + Vue.jsの検索で、情報は沢山出てくるものの、
何故かVue.jsが上手く動かず苦労したので、ひとまず流れをメモっておく。
以下Macでの手順です。

手順

Laravel5.6のインストール

今回はcomposerでインストールするので、下記をインストールしておく。

  • composer

下記のようにインストールする。

# 現時点で最新が5.6なので、下記で5.6がイントールされる
composer create-project --prefer-dist laravel/laravel blog

# 明示的にVerを意識したい場合は下記のようにインストール(Laravel5.5の例)
composer create-project --prefer-dist laravel/laravel blog "5.5.*"

Vue.jsのインストール

npmが入っていることが前提なので、下記をインストールしておく

  • Homebrew
  • Nodebrew
  • Node.js

下記のようにインストールする。

# プロジェクトフォルダに移動
cd blog

# Vue.js他、必要なライブラリのインストール
npm install

途中で「UNMET PEER DEPENDENCY」が出たら、依存関係のパッケージをインストールする。

npm install 'パッケージ名'

vueファイルの作成

今回は元から用意されているVueファイルを使用する。
「ExampleComponent.vue」というファイル名で
/resources/assets/js/components/配下に設置されているはず。
今回これは特にいじる必要はない。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

app.jsに記述追加

/resources/assets/js/app.js
に記述を追加していくが、今回はこれも初期状態で良い。

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

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

bladeの作成

ファイル名は「~.blade.php」
今回は、/resource/viewsの配下に「testvue.blade.php」で作成する。

Vue.componentの第一引数に指定してあったexample-componentを元にしたタグ名を埋め込むことで、そこにテンプレートを表示できるようにしているらしい。

<script src="{{ asset('js/app.js') }}" defer></script>で読み込みに行っているのは、/public/js配下のapp.jsらしい。

/resource/assets/js/app.jsを編集すると、ビルドした時に変更が/public/js/app.jsに反映されるらしい。

なので、/resource/assets/js/app.jsをリネームしたりするとビルドした時に、Laravel Mixから怒られる。逆も然り。

<!doctype 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">

        <title>Vue.js In Laravel5.6</title>

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div id="app">
                    <example-component></example-component>
                </div>
            </div>
        </div>
    </body>
</html>

ビルド

ビルドしないと反映されないので。
/resource/assets/js/app.jsを編集すると、ビルドした時に変更が/public/js/app.jsに反映されるらしい。
そして、読み込みは/public/js/app.jsにしに行ってるみたいなので、ビルドしないと変更が反映されてこない。

コマンドは下記。
なんども実行するのは面倒なので、弄りつつ、動作確認したい時はwatchでやっとけばいい気がする。

# 一回のみビルド
npm run dev

# 変更されたリソースがあった時に自動でビルド
npm run watch

ルーティング

/routes/web.phpを下記のように編集する。
すると初期表示されるページが、上で作成したものに切り替わる。

Route::get('/', function () {
    return view('testvue');
});

動作確認

ローカルで動作させて確認する。
動作環境はXAMPPでもMAMPでもVagrantで仮想環境作ってもなんでもいいが、下記が便利。
ビルドインサーバーが起動して、簡単な動作確認ができるっぽい。
ctl + c で中断すると停止できる。

php artisan serve

画面

下記のような感じで画面が表示されればOK。スクリーンショット 2018-04-01 17.00.20.png

参考

npm installしたときに出てるやつ

Laravel5でVue.jsを使ってみる

Laravelのartisanコマンドまとめ

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.