Laravel+vueにCoreUIを乗せて管理画面を作る

Larvel+vue.jsで管理画面を作成します。
デザイン知識が乏しいのでCoreUIのFree版でUIをサクッと作ってみる。

# CoreUIとは
そもそもCoreUIとは、VueとBootstrapで作られた管理画面UIのフレームワークです。
Free版でも十分な部品がありますが、有料のProにすると毎回作るのが面倒なカレンダーやdatepickerなどの部品やプレミアムサポートもついてます。
ライセンスはMIT
https://coreui.io/index.html

# Laravelをインストール

[公式ガイド](https://laravel.com/docs/5.6/installation)通りにインストールします。

```
Laravel:5.6
vue:2.5.7（Laraelに付属しているバージョン）
```

http://localhost  でwelcomeページが出ることを確認

### SPA用のviewを作成
- `resources/views/app.blade.php` を新規作成します。

```html:app.blade.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', '管理画面') }}</title>

        <link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>

        <script>
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}"
            };
        </script>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>
```
 

### webの向き先をSPAにする
- `/routes/web.php`を下記に書き換える。

```php:web.php
Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');
```

これにより全てのwebアクセスがapp.blade.phpに向きます。

### エイリアス設定


```php:webpack.mix.js
mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/assets/js'
    }
  },
})
```

# CoreUIを乗せる

- CoreUIのVue Versionからgit cloneもしくはダウンロードします。
 - https://github.com/mrholek/CoreUI-Vue

- ダウンロードすると下記ディレクトリ構成になっているので、 `Vue_Full_Project` を使用します。

 ```
 CoreUI-Vue/
├── Vue_Full_Project/
├── Vue_Starter/
```

- CoreUIのVue_Full_ProjectからLaravelのディレクトリへソースをコピーします。

|CoreUI|Laravel|
|:---|:---|
|Vue_Full_Project/src/*|resources/assets/js/.|
|Vue_Full_Project/scss/*|resources/assets/sass/.|
|Vue_Full_Project/static/*|resources/assets/static (新規作成)|

- resources/assets/js/app.jsを削除して、同ディレクトリにあるmain.jsをapp.jsにリネームします。
- app.jsのimportファイル名を変更します。

```js:app.js
 import App from './Main'
```
 
- resources/assets/js/App.vueをMain.vueにリネームします。

- resources/assets/js/Main.vue内のscssディレクトリ名をsassに変更します。

```vuejs:Main.vue

<style lang="sass">
  // Import Main styles for this application
  @import '../sass/style';
</style>
```

- resources/sass/core/_variables.scss内のimageパスを変更します。

```sass:_variables.scss
$navbar-brand-logo:                   url('../static/img/logo.png') !default;

$navbar-brand-minimized-logo:         url('../static/img/logo-symbol.png') !default;
```

## npmでモジュールインストール
Laravelのプロジェクトにpackage.jsonがあるのでnode_moduleをインストール

```bash:
npm install
```

routingはjs側で行うのでvue-routerやCoreUIに必要なモジュールをインストール

```bash:
npm install bootstrap-vue --save
npm install vue-chartjs --save
npm install vue-router --save
npm install chart.js --save
npm install vue-loader --save
npm install css-loader --save
npm install flag-icon-css --save
npm install font-awesome --save
npm install simple-line-icons --save
```

動作確認

```bash:
composer dump-autoload

npm run watch
```