Laravel 5.6 + Vue.js の設定

index:

概要:
環境とか
インスト
設定方法
Github

概要:

Laravel 5.6で、Vue.js を使用する場合の設定
についてメモです。

=> Vue.component を使用いていないので、
　推奨される方法では無いかもしれませんが
　正常動作を、確認できた部分のみ。記載したいと思います

環境とか

php7.1
Laravel 5.6
Vue.js

インスト

composer.phar create-project --prefer-dist laravel/laravel lara56 "5.6.*"
cd lara56
npm install
npm run dev

設定方法

=> 参考ページで、Vue.component
　を使用した例がありましたが。
bladeの、子テンプレートに Vue.jsを書くと
JSエラーが、出力されたり。回避できなかったので
対策方法みたいな。

・　resources\assets\js\app.js

require('./bootstrap');

=>bootstrap 以外を、削除
vue.js の定義等を、消す

・npm run dev　の再実行。
public\js\app.js が生成されるはず。
vue.js なし。

・ blade ,親template
=> vue.js読みます

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

resources/views/Layout/base2.blade.php

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

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body style="background: #FFF; ">
<!-- conte-mid -->
<div class="container" id="id_main_conte">
    <nav class="navbar navbar-default">
        <a class="navbar-brand" href="{{ url('/tasks') }}">
            タスク一覧
        </a>
        <a class="navbar-brand" href="{{ url('/tasks/create') }}">
            新規作成
        </a>
    </nav>
    <p>[ base2 ]</p>
    <div id="app">
        @yield('content')
    </div>
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}?A1"></script>
</body>
</html>

・子, template
resources/views/tasks/test2.blade.php
=> Larabel の場合、blade にvue.js の変数( {{name}} みたいな)を書くと、
レンダー時、エラーとなりますが。 @を変数の前につけると。エラーでないようです。
@{{ name }}　みたいな。

=>vue.js は、親テンプレで、読み込み
　vue インスタンス(new Vue )を、定義

=> v-for, v-on など、動作確認できました。

@extends('layouts.base2')

@section('title', 'タスク一覧')

@section('content')

    <div class="panel panel-default">
        <div class="panel-heading">
            一覧
        </div>
        <div class="panel-body">
        </div>
    </div>
    <hr />
    <div>
    <!-- vue -->
    <h1>vue test22:</h1>
    <div id="app_test2">
        こんにちは @{{ name }}.<br />
        <ul>
            <li v-for="(item, i) in list" :key="item">@{{ item }}
                <button @click="list.splice(i, 1)">remove</button>
            </li>
        </ul>        
        <!--
        <button @click="addItem">add</button>
        -->
        <button class="btn btn-primary" v-on:click="addItem">登録-2</button>
    </div>
    <!-- -->
    <script>
    var app = new Vue({
        el: '#app_test2',
        data: {
            name: 'World 355',
            message: 'msg, 123',
            counter: 0,
            list: ['Apple', 'Banana', 'Strawberry'],            
        },
        methods: {
            addItem: function() {
                this.list.push('Orange' + (++this.counter).toString())
            }
        },        
    });
    </script>    
@endsection