環境
mac, mamp にて行いました。
-- 開発開始までの流れ --
- laravel プロジェクトの作成
- laravel/ui インストール
- vue のスカフォールドを作成
- vue(vue cli)のバージョン確認
- Vue CLI のインストール(必要であれば)
- Vue Router のインストール(必要であれば)
- 「vulnerabilities〜」と出たら
- 各パッケージのインストール
- 「npm run dev 」の実行
laravel プロジェクトの作成
バージョン指定なし
composer create-project laravel/laravel プロジェクト名
バージョン指定あり
composer create-project --prefer-dist "laravel/laravel=6.*" プロジェクト名
「--prefer-dist」って何? て方はこちら↓
composer の–prefer-distってよく使うけど何してる?
https://kin29.info/composer-%E3%81%AE-prefer-dist%E3%81%A3%E3%81%A6%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E3%81%91%E3%81%A9%E4%BD%95%E3%81%97%E3%81%A6%E3%82%8B%EF%BC%9F/
cd コマンドで移動後、インストールされたか確認
cd プロジェクト名
php artisan --version
laravel/ui インストール
バージョン指定なし
composer require laravel/ui --dev
バージョン指定あり
composer require laravel/ui "1.x" --dev
「--dev」は開発時にのみ使うオプション
https://pointsandlines.jp/server-side/php/composer-require-dev
「laravel/ui」って何? て方はこちら↓
Laravel6からデフォルトで入っているモダンフロントエンドフレームワーク(Vue、React等)をLaravelで使う事ができるライブラリの事です。
http://www.code-magagine.com/?p=10606
vue のスカフォールド(建設現場で使う足場のこと)を作成
laravel/ui を使い、スカフォールドの作成
php artisan ui vue
vue(vue cli)のバージョン確認
vue --version
もし下記のようにエラーが出たら
vue: command not found
このようにする
export PATH=$PATH:/Users/ユーザー名/.npm-global/bin
Vue CLIをインストール後vue: command not foundになる
https://qiita.com/kinokon/items/f8801d764b875115c350
vue のバージョン(インストールされたか)確認し以下のようにバージョンが確認されたらOK
@vue/cli 5.0.4
Vue CLI のインストール(必要であれば)
(使わないことも多いですがあらかじめインストールしておきます)
npm install -g @vue/cli
「-g」はグローバル
「@」-> npmでは、「@」と「/」の間にユーザーネーム(or 組織名)を入れて名前空間とし、その後ろにモジュール名をつける
vue cli でできること
https://prograshi.com/language/vue-js/how-to-use-vue-cli/
Vue Router のインストール(必要であれば)
まず、package.json の確認
"dependencies": {
"vue-router": "^4.0.14"
}
なければ以下の手順でインストール
vue でルーティングを行う際、必要となります
バージョン指定なし
npm install --save vue-router
バージョン指定あり
npm install vue-router@4
エラーが出たらこちら
peerは「同等」の意味らしい
npm install vue-router --save --legacy-peer-deps
force は強制的の意味
npm install --save vue-router --force
「vulnerabilities・・・?」
「脆弱性があるで」って意味らしいです。もし出たら下記のコマンドを打ちましょう
いいかんじにしてくれます
npm audit fix --force
まじめな人はこちらか
こちらで
各パッケージのインストール
npm install
npm(パッケージ管理ツール)の基礎を解説!
https://agency-star.co.jp/column/npm
「npm run dev 」の実行
最後に以下のコマンドを実行
npm run dev
以上です