Laravel vuecli最短レシピ（ついでにvuetify導入）


本記事はうるる [Advent Calendar 2019](https://adventar.org/calendars/4548)  16日目の記事です。
# はじめに

laravel×vuecliでまとまった記事がなかったのでまとめた
#### 要件
- vuecliの雛形をそのまま使用できるようにする
- 今回はLaravel Mixは使わない

というのもvuecliに新機能が追加されてもLaravel Mixが対応するのが遅いと使えないというデメリットがあるから
なるべくvueは独立させてlaravelに依存しないようにしたい

### 構成

<img width="502" alt="スクリーンショット 2019-12-15 23.57.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264517/409cce9d-89d0-f7f1-fb89-894876f3c9f5.png">

### ざっくり解説
frontendディレクトリがvuecliプロジェクト
frontendで`npm run build`すると
`resources/views/spa/app.blade.php`が作成される



# Laravelのプロジェクトを作成する
```
composer create-project laravel/laravel sampleApp --prefer-dist "5.5.*"
```


# Laravel Mixの削除
今回はlaravelの初期で入っているLaravel Mixを使わないのでそれらを削除する

```
rm -rf package.json webpack.mix.js yarn.lock resources/assets
```

# Vue CLIのインストール
Vue CLIをインストールしてVue CLIを使ってフロントエンドのプロジェクトを作成する
vueRouter使用する

```
npm install -g @vue/cli
vue create frontend
```

frontendディレクトリに移動する
frontend/src/app/とするための作業

```
cd frontend
mv src app
mkdir src
mv app src
```


それに伴う変更
### src/app/views/Home.vueの編集

```
import HelloWorld from "@/app/components/HelloWorld.vue"
```

### vue.config.jsファイルを作る


```
touch vue.config.js
```

### vue.config.js
```
module.exports = {
  // アセットはLaravelの `public` の `app` ディレクトリ配下に作成されるようにする.
  outputDir: '../public/app',
  
  
  // app配下にjs, cssなどが置かれるので、publicPathを調整する
  publicPath: '/app',
  
  
  pages: {
  // appのエントリポイント、テンプレート、出力先を調整
    app: {
      entry: 'src/app/main.js',
      template: 'templates/base.html',
      filename: '../../resources/views/spa/app.blade.php',
    },
  },
};
```
これで`npm run build`するとbladeの出力とアセットの出力がされる

Vue CLIの`pages`では、アセット(js, cssなど)をテンプレートに自動注入する設定を`pages.＜アプリ名＞.template`で指定することができる
laravelの`public/index.html`をアセット注入用のテンプレートとして使用する

```
mkdir templates
mv public/index.html templates/base.html
```

これでvue側の設定は完了


### laravelのルーティングをいじっておく
コントローラーを作る

```
php artisan make:controller SpaController
```

```
<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;


class SpaController extends Controller
{
    public function app()
    {
        return view('spa/test');
    }
}
```

### ルーティングもいじる
routes/web.php

```
Route::get('/app', 'SpaController@app');
```

Laravelのルーティングに合わせてvueCliのrouter.jsも編集する
frontend/src/app/router.jsの編集

```
export default new Router({
  mode: 'history',
  base: '/test/', // ←修正
```

ここまででlaravel vuecli の連携は終わり

```
npm run build
```

http://vuetest.test/test
これでvueが表示できたらここまで成功


今回は実装しないがVueとLaravel間でAPIの結合は定番の`axios`でできる




# 番外編（vuetify導入）

```
npm install vuetify
```

### base.htmlのheadに追加

```
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
```

### とりあえず確認のためApp.vueをvuetify対応に書き換える

```
<template>
  <v-app id="inspire">
    <v-btn>button</v-btn>
  </v-app>
</template>


<script>
export default {
  data: () => ({
  }),
  props: {
    source: String
  },
  methods: {
  }


};
</script>
```

### Main.js編集

```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuetify from 'vuetify' // ←追加
import 'vuetify/dist/vuetify.min.css' // ←追加
Vue.use(Vuetify) // ←追加
const vuetify = new Vuetify(); //←追加

Vue.config.productionTip = false

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

vuetifyの導入も簡単ですね


# まとめ
大好きなvuecliをそのままそっくりlaravelに入れることができました
実際に会社の業務で０からプロジェクトを作ることがないのでいい経験になりました
特にエントリーポイントを意識したことがなかったので学びが多かったです

# 参照
https://github.com/kenfdev/laravel-with-vue-cli