Laravel(Homestead)とVue.jsの環境構築(LaravelだけでもOK)

##何回やっても忘れるので、自分用メモ

###環境&事前準備
- mac
- Laravel 5.7 (Homestead)
- Vue.js 
- Vagrant&VirtualBoxをインストール済み

###Laravel(Homestead)の環境構築

**自分のプロジェクトに移動**
今回はポートフォリオ作るので`PortFolio`が自分のプロジェクトになる

```terminal
cd PortFolio
```

**プロジェクトごとにインストール**

```terminal
composer require laravel/homestead --dev
```

**VagrantfileとHomesteadファイルを作成**

```terminal
php vendor/bin/homestead make
```

`Homestead Installed!`と表示されたら成功！

```terminal
Homestead Installed!
```

`Homestead.yaml`**ファイルに設定があるので確認**

```yaml:Homestead.yaml
#他と被らないように修正
#ip: 192.168.10.10
ip: 192.168.10.20

#認証鍵の参照鍵がなかったらエラーが出る
authorize: ~/.ssh/id_rsa.pub
keys:
    - ~/.ssh/id_rsa

#現在のプロジェクトフォルダの参照パスがあってるかどうか
folders:
    -
        map: /Users/namizato/app/PortFolio
        to: /home/vagrant/code
```

`folders:`はローカルとホストマシンのプロジェクトを同期するための参照パス
`map:`がローカルのプロジェクトフォルダ
`to:`がホストマシンのプロジェクトフォルダ

**問題なければ**`vagrant up`**実行**

```terminal
vagrant up
```

`vagrant ssh`**実行**

```terminal
vagrant ssh
```

先ほど設定したホストマシンのプロジェクト先を確認&中身も確認

```terminal
cd /home/vagrant/code
ls
```

**多分こんな感じになってるはず**

```terminal
after.sh  aliases  composer.json  composer.lock  Homestead.yaml  Vagrantfile  vendor
```

>もし中身が空ならHomesteadの`folders:`を見直して
間違いがあれば修正して再度`vagrant up`

**composerを最新版にアップデート**

```terminal
composer global update
````

**Laravelをインストール（最新）**

```terminal
laravel new
````

**中身見るとこうなってるはず**

```terminal
after.sh  app      bootstrap      composer.lock  database        package.json  public     routes      storage  Vagrantfile  webpack.mix.js
aliases   artisan  composer.json  config         Homestead.yaml  phpunit.xml   resources  server.php  tests    vendor       yarn.lock
```

**先ほど設定したipの**`http://192.168.10.20`**にアクセス**
※あくまで僕の環境です。

するとLaravelが表示されるはず

![スクリーンショット 2019-06-11 23.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293438/a9ea6678-4c8e-a315-b48f-fef3f9fa1b99.png)

logsの権限もついでに与えて置く

```terminal
chmod 777 storage/logs
```

keyも初期化して置く

```terminal
php artisan key:generate
```

それと.envのMySQLの設定がちゃんと出来てるか確認

```php:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
```

####とりあえずLaravel(Homestead)の構築はここまで

###Vue.jsの環境構築

**ローカルのプロジェクトフォルダに戻って**`node`と`npm`がインストールされているか確認

```terminal
node -v
v11.13.0
npm -v
6.9.0
```

>commond not foundが出たら各々のインストールが必要なので別の記事みてインストールしてください

Laravelは標準でVue.jsをパッケージ化されているので、最初から`package.json`にVueがインストールされるようになっているので下のコマンドを打つだけでインストールされます（便利）

```terminal
npm install
```

Vueコンポーネント(app.jsとapp.css)のコンパイルを行う

```terminal
npm run dev
```

`npm run watch'を走らせておくことで、ファイルに変更がある度に自動でコンパイルをしてくれます。
開発時は必ず走らせるようにしましょう！

```terminal
npm run watch
```

Laravelでは標準のサンプルで`examplecomponent`というコンポートが用意されているので、
試してみる。

```twig:resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>PortFolio</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>
```

コンポーネントが表示されたら成功！

###とりあえず環境構築はこんな感じ。

暇があればvue-router使うところの記事まで書こうかな~~多分書かない~~