laravel Vue.js で最初にやる設定

laravelのバージョンは5.6

###apache
DocumentRootの変更とAllowOverride設定を変更する。
再起動必要

```httpd.conf
DocumentRoot "/var/www/html/sample/public"

<Directory "/var/www/html/sample/public">
    AllowOverride All
</Directory>
```

###タイムゾーン設定
```config/app.php
'timezone' => 'Asia/Tokyo',
'locale' => 'jp',
'fallback_locale' => 'ja',
```

###DB設定
DB_HOSTやDB_DATABASEの右側を変更する。

```config\database.php
    'connections' => [

        'sqlite' => [
            'driver' => 'sqlite',
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
        ],

        'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],
```

下記は /api/todosの例

#ルーティング設定
```routes\api.php
Route::resource('todos', 'Api\TodosController')
    ->only(['index', 'show', 'store']);
```

ルーティング設定がうまくいかない場合は、下記を試す。正しく設定されている場合は画面にUsersと表示される。
表示されない場合はapacheの設定が漏れていないかなど確認する。

```routes\api.php
Route::get('users', function()
{
    return 'Users!';
});
```

#コントローラーの作成
```
php artisan make:controller Api/TodosController
```
必要なメソッドを追加する。

#モデルの作成
```
php artisan make:model Todo
```

#リソースの作成
```
php artisan make:resource TodoResource
```

#ログ設定
```\.env
LOG_CHANNEL=daily
```
`storage/logs/laravel-YYYY-MM-DD.log`に出力される。
ログレベルを変更には`config\logging.php`を修正する。


#SQLログ設定
```app\Providers\EventServiceProvider.php
    public function register()
    {
        DB::listen(
            function($query) {
                Log::debug("SQL LOG::", [$query->sql, $query->bindings, $query->time]);
            }
        );
    }
```

#環境設定フィルから不要な定義削除
`.env`フィルの設定を見直す。

todosテーブルを作成して、Postmanで動作確認する。

#ルーター
公式ルータのvue-router.jsをインストール
[vue-router.js](https://router.vuejs.org/ja/installation.html)


```resources/assets/js/app.js
// vueとvue-routerを定義する
import Vue from 'vue'
import VueRouter from 'vue-router'

// vue-routerを宣言する
Vue.use(VueRouter);

// routingを設定する
const router = new VueRouter({
    mode: 'history',
    routes: [
        // TOPページ
        { path: '/', component: require('./components/top/Top.vue') },
        // TODO検索
        { path: '/todo', component: require('./components/todo/SearchComponent.vue') },
    ]
});

const app = new Vue({
    router,
}).$mount('#app');
```
#http
vue-resourceは非推奨な感じになったので、axiosをインストールする。

[vue-resourceは非推奨](https://jp.vuejs.org/2016/11/03/retiring-vue-resource/)
[axios](https://github.com/axios/axios)

```
npm install axios --save
```

```javascript
mounted() {
    axios.get("/api/todos")
        .then(response => {
            console.log("yes!!!!!!!!!!!!");
        })
}
```

#コンポーネント作成
```resources\assets\js\components\todo\SearchComponent.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">TODO Component</div>

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

        <div>
            <table>
                <thead>
                <tr>
                    <th>
                        名前
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="todo in todos">
                     <td>{{ todo['name'] }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                todos : []
             }
        },
        mounted() {
            console.log('Todo Component')

            axios.get("/api/todos")
                .then(response => {
                debugger;
                    this.$set(this, 'todos', response.data.data)
                    console.log("yes!!!!!!!!!!!!");
                }, this)

        }
    }
</script>
```

`npm run dev`して、画面から動作確認する。

#vuetifyをインストールする。
```
npm install vuetify --save
```

マテリアルデザイン用アイコンもインストールする。

```
npm install @mdi/font
```

外枠のテンプレートは必ず`<v-app id="app">`のようなv-appタグで囲む必要がある。
このタグで囲まないとボタン(color="success")などのスタイルが適用されない。

```
<v-app id="app">
    <p>
        <router-link to="/todo">Go to Todo</router-link>
        <router-link to="/">Go to Top</router-link>
    </p>

    <div class="container">
        <router-view></router-view>
    </div>
</v-app>
```