Help us understand the problem. What is going on with this article?

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

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

環境&事前準備

  • 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ファイルに設定があるので確認

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が表示されるはず

スクリーンショット 2019-06-11 23.42.44.png

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

chmod 777 storage/logs

keyも初期化して置く

php artisan key:generate

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

.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の環境構築

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

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というコンポートが用意されているので、
試してみる。

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使うところの記事まで書こうかな多分書かない

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away