【Laravel】【Vue.js】Composerによるプロジェクト作成
環境
・mac OS Catalina 10.15.6
Composerのインストール
Composerの公式サイトのDownload Composerに記載してある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)
下記コマンドで"$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はインストールできません。
公式のドキュメントに記載されていましたが、
作成したプロジェクトのディレクトリ配下で下記コマンドを実行し、laravel/uiとうパッケージをダウンロードします。
composer require laravel/ui
パッケージがダウンロードできたら、下記コマンドを実行しvueをインストールします。
php artisan ui vue
package.jsonを見てみるとvue以外にもbootstrapやjqueryなども追加されてますね。
不要なら削除してください。
{
"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開発は色々ツールなりあって難しいです。
Author And Source
この問題について(【Laravel】【Vue.js】Composerによるプロジェクト作成), 我々は、より多くの情報をここで見つけました https://qiita.com/N_KS/items/8c5accf58ffa6ba41054著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .