1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

laravel + vue 開発まで

Posted at

環境

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

https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15

force は強制的の意味

npm install --save vue-router --force

「vulnerabilities・・・?」

「脆弱性があるで」って意味らしいです。もし出たら下記のコマンドを打ちましょう
いいかんじにしてくれます

npm audit fix --force

まじめな人はこちらか

https://overworker.hatenablog.jp/entry/2020/10/18/234904

こちらで

https://zenn.dev/feb19/articles/907990aaf95b81

各パッケージのインストール

npm install

npm(パッケージ管理ツール)の基礎を解説!
https://agency-star.co.jp/column/npm

「npm run dev 」の実行

最後に以下のコマンドを実行

npm run dev

以上です

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?