Laravel + SQLite + Vue.js + Pug + Stylusの環境構築をサクッと行う

## やること
- LaravelでVue.js環境構築
- DBをSQLiteに設定(laradockとかだとMySQLとか使えばいいと思います。)
- Vue.jsをPugとStylusでかけるように設定する。


## Laravelのインストール
まずLaravelの環境構築いつものやつ

```bash
❯ mkdir Laravel-test && cd Laravel-test 
❯ composer create-project --prefer-dist laravel/laravel ./
❯ yarn install 
```

## SQLiteの設定
設定と起動のいらない`SQLite`でDB構築は簡単で、テスト環境に需要があると思いました。

`.env`を編集します。

```
DB_CONNECTION=sqlite
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=homestead
# DB_USERNAME=homestead
# DB_PASSWORD=secret
```
以下のコマンドを実行
`❯ touch database/database.sqlite`
`❯ php artisan migrate`
終了です。
</details>

## Vue.jsの設定
とりあえず、`welcome.blade.php`にVue.jsで書いたモノが見える形になればゴールだと思います。
追記するものは、以下です。

```html:welcome.blade.php
...
<!-- <head>の中に追加 -->
<meta name="csrf-token" content="{{ csrf_token() }}">
...
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
...
<!-- </body>の手前に追加 -->
<div id="app">
    <example-component></example-component>
</div>
<script src=" {{ asset('js/app.js') }} "></script>
...
```
Vue.jsの準備が整いました。

## サーバと自動ビルド(watch)を起動
テキストエディタ`VSCode`使ってるんですけど
ターミナルを2つ使用して2つのコマンドを同時に起動させている状態にします。

- `❯ php artisan serve`
- `❯ yarn watch`

あとはブラウザで`localhost:8000`にアクセスして下にスクロールするとデフォルトのVue.jsの結果が見えるはずです。
※リロードは自分でしないといけなくてちょっと面倒。もっといい方法(hotを使うとか)は、あります。

とりあえず、普通のVue.jsはここまでで完了です٩( 'ω' )و
お疲れ様です。

## Vue.jsにPugとStylusを導入
ここからは、番外編みたいな感じです。
Vue.jsのtemplateの中にPugとStylusを使えるようにします！

### PugとStylusインストール
```
❯ yarn add -D pug pug-plain-loader
❯ yarn add -D stylus stylus-loader
```

### Webpackの設定変更
```js:webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .webpackConfig({
  module: {
    rules: [{
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    },{
      test: /\.styl(us)?$/,
      loader: 'style-loader',
    }],
  }
});
```

終わりです。

## Vue.jsのコード
```vue:ExampleComponent.vue
<template lang="pug">
    div.container
        div.row.justify-content-center
            div.col-md-8
                div.card
                    div.card-header Example Component
                    div.card-body I'm an example component.ccc

</template>

<style lang="stylus">
.card-header
    color: tomato
</style>


<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

```

### 表示結果
<img width="960" alt="スクリーンショット 2019-03-02 11.12.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/5fda9dac-b0a0-015f-cb1a-41bb39541631.png">

ここまで本当にお疲れ様です。
たのしいLaravel + Vue.jsライフでフルスタックなエンジニア体感しちゃいましょう！
もっと頑張るぞー！٩(ˊᗜˋ*)و

## おまけ
他にもVue.jsに入れたいものがあれば[Vue.js公式](https://vue-loader.vuejs.org/guide/pre-processors.html)にやり方のってます。
これをみたりググったりして追加していけばいいと思います。


## 感想
LaravelがデフォルトでVue.jsをインストールする仕様になっているとは驚きました！
そしてVue.jsのtemplateをPugとStylusで書けるのもとても便利で驚きました！
(´⊙ω⊙`)
<details><summary>ちなみに</summary>PugとStylusとExpress(Node.jsのシンプルなフレームワーク)は開発者が同じらしいです。めっちゃシンプルで最適化されたなモノが好きな人なんでしょうね。(とても共感します。)</details>

## 参考
この記事たちがなければやってこれませんでした！
おかげであまり時間かからなかったです。ありがとう(๑˃̵ᴗ˂̵)‬♪
- [Vue.js + Pug + Stylus のサンプル開発環境](https://qiita.com/ezawa800/items/eef19d1c0dcbe0b4de62)
- [LaravelからVue.jsを使う最短レシピ](https://qiita.com/fruitriin/items/e0f2c9aa035c3ff2c874)
- [LaravelのDBをSQLiteに変更する](https://qiita.com/shosho/items/c1561a51bdefea202b16)
- [Stylus入門したときのまとめ](https://qiita.com/morishitter/items/b9a2d78c79c3c07de776)