0
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 3 years have passed since last update.

かんたんLaravel + Vue.jsでVueUIを使用してログイン、登録の実装

Last updated at Posted at 2020-05-31

LaravelにはwebpackのようなLaravel-Mixがあり、それを使うことによりLaravel上で
Vue.jsが実装できます。
今回は、いくつかのコマンドを打つことでかんたんにVueUIを使用してログイン、登録の実装します。

ターミナルにコマンドを打ち込んでいきます。

  # laravelプロジェクト作成
 laravel new 「プロジェクト名」
 #作成したプロジェクトに移動
 cd 「プロジェクト名」

npmは、Node Package Managerの略でNode.jsのパッケージ(Package)を管理する(Manager)ツールです。
インストール方法は、以下のgithubを参考してください。
https://github.com/npm/cli
ダウンロードは、以下のリンク
https://nodejs.org/en/download/

#npmをインストール
npm install
#一度コンパイルをします。
npm run dev

問題がなければVueのログイン・php登録UIをインストールします。
2回コマンドを入力しなければなりません。

#1 インストールに時間がかかります。
composer require laravel/ui
#2 1が終了後
php artisan ui  vue --auth

最後に

npm install && npm run dev

サーバーを立ち上げて確認します。

php artisan serve

完成!!!

スクリーンショット 2020-05-31 22.23.46.png スクリーンショット 2020-05-31 22.40.41.png スクリーンショット 2020-05-31 22.40.52.png

以下のパスにExampleComponent.vueもインストールされてます。
resources/js/components/ExampleComponent.vue
これの表示の仕方は、次回します。

bootsrapも使えるように設定されており、bootsrapを使うためにJquery,Popper.jsも入れられています。
package.jsonを確認するとわかります。
スクリーンショット 2020-05-31 22.37.36.png

PHPをすぐに始めることができるMAMP(Mac), XAMPP(Windows)があります。

MAMP
https://www.mamp.info/en/mac/
XAMPP
https://www.mamp.info/en/mac/

laravelの環境構築は、すごく大変でした。。。
MacOS違いだけでもやり方が違ったり。

僕は、Udemyを利用して環境構築をしました。
【2日でできる】はじめての PHP 7 x Laravel 6 入門
https://www.udemy.com/course/php7study/

少しでも参考になれば幸いです。

0
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
0
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?