##何回やっても忘れるので、自分用メモ
###環境&事前準備
- mac
- Laravel 5.7 (Homestead)
- Vue.js
- Vagrant&VirtualBoxをインストール済み
###Laravel(Homestead)の環境構築
自分のプロジェクトに移動
今回はポートフォリオ作るのでPortFolioが自分のプロジェクトになる
cd PortFolio
プロジェクトごとにインストール
composer require laravel/homestead --dev
VagrantfileとHomesteadファイルを作成
php vendor/bin/homestead make
Homestead Installed!と表示されたら成功！
Homestead Installed!
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実行
vagrant up
vagrant ssh実行
vagrant ssh
先ほど設定したホストマシンのプロジェクト先を確認&中身も確認
cd /home/vagrant/code
ls
多分こんな感じになってるはず
after.sh aliases composer.json composer.lock Homestead.yaml Vagrantfile vendor
もし中身が空ならHomesteadの
folders:を見直して
間違いがあれば修正して再度vagrant up
composerを最新版にアップデート
composer global update
Laravelをインストール（最新）
laravel new
中身見るとこうなってるはず
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が表示されるはず
logsの権限もついでに与えて置く
chmod 777 storage/logs
keyも初期化して置く
php artisan key:generate
それと.envのMySQLの設定がちゃんと出来てるか確認
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がインストールされているか確認
node -v
v11.13.0
npm -v
6.9.0
commond not foundが出たら各々のインストールが必要なので別の記事みてインストールしてください
Laravelは標準でVue.jsをパッケージ化されているので、最初からpackage.jsonにVueがインストールされるようになっているので下のコマンドを打つだけでインストールされます（便利）
npm install
Vueコンポーネント(app.jsとapp.css)のコンパイルを行う
npm run dev
`npm run watch'を走らせておくことで、ファイルに変更がある度に自動でコンパイルをしてくれます。
開発時は必ず走らせるようにしましょう！
npm run watch
Laravelでは標準のサンプルでexamplecomponentというコンポートが用意されているので、
試してみる。
<!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使うところの記事まで書こうかな多分書かない