Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part1

#はじめに
本記事は、Vue CLIとLaravelに加えてVuetifyを使ってTodoリストを作るチュートリアルです
Vuetifyは各自採用するかは決めていただければと思います。
本記事にはVuetifyの記載が多く登場しますが、Vuetifyを使わずにこのチュートリアルを進められる方はVuetifyの部分は無視してもらい
自身でマークアップを行ってください。
また、本チュートリアルは[こちら](https://qiita.com/MasahiroHarada/items/2597bd6973a45f92e1e8)の記事を参考にさせて頂き制作しました

#このチュートリアルで学べること
- Vue CLIとLaravelを利用した開発の流れ
- Vue(SPA)での開発
- LaravelとVueでの認証周りのあれこれ
- Vuexの活用方法
- Vue Routerの活用方法

#このチュートリアルの対象者
- Laravelの基本を学んだ方
- Vueの基本を学んだ方
- Vue CLIとLaravelで何か作ってみたい方

#バージョン
Vue CLI - 4.0.5
laravel - 7.0.4

#Vue CLI × Laravelの環境構築
まずはLaravelでアプリケーションを作成していきます
コマンドにて下記を実行
`$ laravel new VueTodo`
作ったアプリケーションに移動します
`$ cd VueTodo`
次にVue CLIをLaravelに作っていきます
`$ vue create client`
Manualyを選択
![スクリーンショット 2020-03-15 16.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/e419edff-8758-48b8-1d2f-998529d2dfe2.png)
RouterとVuexを選択
![スクリーンショット 2020-03-15 16.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/1b13e1db-26b1-dccd-1a86-e3a226122033.png)
historyモードを使用するのでyを押してEnter
![スクリーンショット 2020-03-15 16.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/9950a4a6-4447-3096-b492-51464f80fbaf.png)
今回はエラー防止のみのESLintを使用するのでそのままEnter
![スクリーンショット 2020-03-15 16.29.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/81dfa813-8fd8-efb0-5581-b5bc5912b97a.png)
保存時にLintを実行するため、そのままEnter
![スクリーンショット 2020-03-15 16.29.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/c48d0a8a-d056-78c2-774c-2cd1236ecd05.png)
package.jsonで管理するため、In `package.json`を選択してEnter
![スクリーンショット 2020-03-15 16.29.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/a44b4236-75d1-bb9d-09bc-a0dc9b6bbe23.png)
今回の設定を今回は特に保存しないので、nを押してEnter
![スクリーンショット 2020-03-15 16.43.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489941/43560bcc-64fb-dad9-113b-19f99b85cec8.png)
これでLaravelにclientと言う名前でVue CLIが構築されます
ここまでで、LaravelとVue CLIの準備は完了


#proxyの設定を行う
Vue CLIとLaravel間ではドメインが違うため、お互いに通信を行うための設定が必要です
今回はproxyを使います
Vue CLIの機能を使いproxyの設定をすることができます。

clientディレクトリに`vue.config.js`ファイルを作成
下記を追加
これによりVue CLIからの通信は http://127.0.0.1:8000 に変換され同一ドメインでの通信が可能になります
(ここのパスは環境によって変わるため、`$ php artisan serve`をした際にアクセスできるLaravel側の自身の環境に書き換えてください)

```vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8000'
            }
        }
    }
}
```

#RouteServiceProviderの変更
`app/Http/Providers/RouteServiceProvider`の`mapApiRoutes()`メソッドの変更を行います
デフォルトでは下記のようになっています

```RouteServiceProvider.php
    protected function mapApiRoutes()
    {
        Route::prefix('api')
             ->middleware('api')  //・・・①
             ->namespace($this->namespace)
             ->group(base_path('routes/api.php'));
    }
```
①の部分がデフォルトではapiとなっています
このmiddlewareの設定を下記のように書き換えます

```RouteServiceProider.php
    protected function mapApiRoutes()
    {
        Route::prefix('api')
             ->middleware('web')
             ->namespace($this->namespace)
             ->group(base_path('routes/api.php'));
    }
```

何故ここを書き換えるのかと言うと
apiとwebでは適応されるmiddlewareが違います
apiのmiddlewareはCSFRトークンやセッションなどのmiddlewareが含まれていません
ただ今回の場合は、Laravelのセッションの認証をするためにセッションや、クッキーを必要とするため
webに変更しています
従来のAPIとしてLaravelを利用する場合は、apiのデフォルトのままで大丈夫です

#axiosのインストール
コマンドにて下記を実行
`$ npm install　axios`

`clietn/src/main.js`にてaxiosをuseする

```main.js
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

Vue.config.productionTip = false

Vue.use(axios);

new Vue({ 
    render: h => h(App)
}).$mount('#app')


```

#Vue Routeのセットアップ

Vue Routerセットアップを行います
すでにVue CLIの作成時にRouterを導入してるのでインストールは不要です
`client/src/router`と言うディレクトリがRouterのファイルになります

`client/src/index.js`のファイル名をわかりやすい様にリネームし、`router.js`と変更し
`router.js`に下記に書き換えてください

```router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        //今は空にしておく
    ]
})
```
`router.js`の作成が完了したら、`main.js`にて下記を追加

```main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router/router';    //追加
import axios from 'axios';

Vue.use(axios);

new Vue({
    router,    //追加
    render: h => h(App)
}).$mount('#app')
```

これでVue Routerのセットアップは完了です

#Vuexのセットアップ

こちらも、Vue CLIの作成時にインストールしているのでインストールは不要です

`client/src/store`がVuexのファイルになります
こちらも、わかりやすい様にリネームして`store.js`として、新規ファイルで`auth.js`を作成してください
作成したら`store.js`を下記に書き換えてください

```store.js
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './auth';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        auth
    }
})
```
`auth.js`にも下記を追加

```auth.js
import axios from 'axios';    //axiosを今後使うので読み込んでます

const state = {
}

const getters = {
}

const mutations = {
}

const actions = {
}

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}
```

`main.js`に下記を追加する

```main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router/router';
import store from './store/store';    //追加
import axios from 'axios';

Vue.use(axios);

new Vue({
    router,
    store,    //追加
    render: h => h(App)
}).$mount('#app')
```

以上でVuexのセットアップは終了です

#Vue Metaのインストール
Vue Metaを導入することでVueのscript内でheadのlang設定やtitleなどの設定を行えるようになります
今後使っていくので使い方等は追々説明しますので、ここではインストールとセットアップのみ手順にしたがって行ってください

コマンドにて下記を実行
`$ npm install vue-meta`

`main.js`にて下記を追加する

```main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router/router';
import store from './store/store';
import axios from 'axios';
import VueMeta from 'vue-meta';    //追加

Vue.use(axios);
Vue.use(VueMeta, { refreshOnceOnNavigation: true });    //追加

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
```

#Vuetifyの導入

※Vuetifyを使わない方はここを飛ばしてもらってOKです

`$ cd client`に移動して下記コマンドを実行
`$ vue add vuetify`
コマンドを実行することで`client/plugins`に`vuetify.js`が作成されていることを確認してください
また、`main.js`に自動的に追加されていることも確認してください(追加されていない場合は追加してください)

```main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router/router';
import store from './store/store';
import vuetify from './plugins/vuetify';    //追加されている
import axios from 'axios';
import VueMeta from 'vue-meta';

Vue.use(axios);
Vue.use(VueMeta, { refreshOnceOnNavigation: true });    //追加

new Vue({
    router,
    vuetify,    //追加されている
    store,
    render: h => h(App)
}).$mount('#app')
```

#終わりに
以上でVue CLIとLaravelで今回必要な物のインストールやセットアップなどの環境の構築が終わりました
次回は、今回のTodoリストで使うUserのテーブルとTodoを管理する２つのテーブルのマイグレーションの作成から始めようと思います

次のパートはこちら→[Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part2](https://qiita.com/Kyu-Taro/items/8deef5b9be76c091b0cb)