【Laravel】【Vue.js】Composerによるプロジェクト作成 

#環境
・mac OS Catalina 10.15.6

#Composerのインストール
Composerの公式サイトの[Download Composer](https://getcomposer.org/download/)に記載してあるComposerをインストールするためのスクリプトをターミナルにて実行する。

```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '8a6138e2a05a8c28539c9f0fb361159823655d7ad2deecb371b04a83966c61223adc522b0189079e3e9e277cd72b8897') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
```

>スクリプトの意味としては、
>1行目：インストーラを現在のディレクトリにダウンロード
>2行目：ダウンロードしたインストーラのハッシュ値を比較し､オリジナルファイルと同一か検証
>3行目：インストーラーを実行する
>4行目：インストーラーを削除する

スクリプト実行後、カレントディレクトリに"composer.phar"がダウンロードされています。



#Composerのパスを通す
どのディレクトリからも composerコマンドを使用できるようにパスを通します。

```
mv composer.phar /usr/local/bin/composer
```
>コマンドの意味としては、
>composer.pharをcomposerという名前に変換して、/usr/local/bin配下に移動する

"/usr/local/bin"は自身でインストールしたコマンドをどのディレクトリからでも使用できるようにする場所です。

※余談ですが、先ほど使用した"mv"などのLinuxの基本コマンドは"/bin"配下に格納されています。



#Composerのバージョン確認
下記コマンドを実行してComposerのバージョンを確認します。

```
composer -v
```

下記のような表示が出力されればOKです。

```
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.9 2020-07-16 12:57:00
```


#Laravelのインストール
Composerを使用してLaravelインストーラーをダウンロードします。

```
composer global require laravel/installer
```

コマンド実行後、Laravelインストーラー内の実行ファイルへのリンクが"$HOME/.composer/vendor/bin"に生成されます。
このLaravel実行ファイルをシステムのどこからでも実行できるように、環境変数`$PATH`に"$HOME/.composer/vendor/bin"を登録します。

```
export PATH=$PATH:$HOME/.composer/vendor/bin
```
>macの環境変数の設定については、下記の記事を参考にさせていただきました。
>・[PATHを通すために環境変数の設定を理解する (Mac OS X)](https://qiita.com/soarflat/items/d5015bec37f8a8254380)

下記コマンドで"$HOME/.composer/vendor/bin"を登録できたか確認します。

```
echo $PATH
```

出力内容の末尾に":任意のディレクトリ/.composer/vendor/bin"が表示されればOKです。



#Laravelのプロジェクト作成
下記コマンドでプロジェクトを作成します。

```
laravel new プロジェクト名
```

さくっとローカル環境でLaravelを実行したい場合は、先ほど作成したプロジェクトのディレクトリに移動して下記コマンドを実行します。

```
php artisan serve
```

ブラウザに`http://localhost:8000`を入力すれば、Laravelが実行できていることが分かります。

ちなみにLaravelのバージョン確認は作成したプロジェクトのディレクトリ配下で下記コマンドを実行します。

```
php artisan -V
```
>どうやらphpのバージョンによって、Laravelのバージョンが決まるっぽいです。（autoload_real.phpを読む限り）
>php 7.3.20でプロジェクトを作成したところ、Laravelのバージョンは 7.26.0になりました。

#Vueをインストールする

`npm install`を実行すればvueがインストールできるという記事をよく見かけますが、
それはLaravel5.6〜5.8の話で6.0以降はpackage.jsonにvueは含まれていないため`npm install`を実行してもvueはインストールできません。

[公式のドキュメント](https://readouble.com/laravel/7.x/ja/frontend.html)に記載されていましたが、
作成したプロジェクトのディレクトリ配下で下記コマンドを実行し、`laravel/ui`とうパッケージをダウンロードします。

```
composer require laravel/ui
```

パッケージがダウンロードできたら、下記コマンドを実行しvueをインストールします。

```
php artisan ui vue
```

package.jsonを見てみるとvue以外にもbootstrapやjqueryなども追加されてますね。
不要なら削除してください。

```package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",                 //追加
        "cross-env": "^7.0", 
        "jquery": "^3.2",                      //追加
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",                  //追加
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",                      //追加
        "vue-template-compiler": "^2.6.10"     //追加
    }
}
````

`resources/js`には`components/ExampleComponent.vue`というテンプレートのコンポーネントが生成されてます。

これで準備は整いました!!!
好きなように開発しちゃいますか。
にしてもweb開発は色々ツールなりあって難しいです。