0
2

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を導入 ~環境構築編~

Posted at

#LaravelでVue.jsを使うための環境構築
Laravelを学習後、Vue.jsも学んだのにどうやって一緒に使えばいいんだ。。。となったので自分の備忘として残します。
環境構築で出会ったエラーは、別記事で書こうと思っています。

####まずは、ComposerでLaravelをインストール
※ちなみに今回はMAMPを使用しています。

ターミナルでMAMPへ移動して、フォルダを作成します。
LaravelVueというフォルダを作成し、その中でプロジェクトを作成します。

$ cd /Application/MAMP/htdocs/
$ mkdir LaravelVue

####早速、Laravelをインストール
Appフォルダ内にLaravelプロジェクトを作成します。
--prefer-distと書くことで圧縮版になるので、インストールが早くできます。
※Laravel6.0系を使用

$ compose create-project laravel/laravel App --prefer-dist "6.0.*"

数分でダァーーーーーーーーっとファイルがインストールされます。
インストールがうまくいっているか確認します。

$ ls
$ cd App

これで以下のフォルダが確認できると成功です!

app  config  readme.md  tests  artisan  database  resources  vendor
bootstrap  package.json  routes  webpack.mix.js   (以下省略)

Laravelがインストールできたら、動かしてみましょう。
コマンドを入力しhttp://127.0.0.1:8000をブラウザに入力しましょう!
Laravelと書かれたページが表示されましたか?
ターミナルを操作するためには、Controlキー + C を押して下さい。

$ php artisan serve
Laravel development server started: http://127.0.0.1:8000

####Vueのスカフォールドをインストールする。
まずは、Composerをインストールします。
またまた、数分ダァーーーーーーーーっとインストール!

$ composer require laravel/ui --dev

続いてスカフォールドをインストール
またまたまたまた、数分かかります。

$ php artisan ui vue
$ npm install
$ npm run dev

これでひとまず環境構築だけは終わりました。
Dockerを使用する場合も基本同じなのか?今後やってみようと思います!
間違いがあれば、コメント頂けると助かります!

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?