Hello World ~Vue成長日記~ #1

Vue成長日記

Vueの勉強を本腰を入れて始めたい！思い立ったが吉日、だけどもなかなか個人で開発するだけじゃ続かないしすぐ忘れてしまうので、ブログにアウトプットしていくことにしました。いくつかの投稿を通して、Laravel x VueでVueでの開発のしかたを学びつつアプリを作っていけたらとおもいます。最終的になにが出来上がるかは未定ですw

事前準備

Laravelの環境構築は以下を参考にされると良さそうです。

Mac OSにLaravelローカル開発環境構築 - Qiita

## 概要 Macのローカル環境でLaravelの開発環境を構築する際に、詰まったのでメモを残しておく ## 環境 |名前|バージョン| |:--:|:--:| |php|7.1.0| |Laravel|5.5| ## 手順...

qiita.com

laravelコマンドが使える状態を前提とさせていただきたいと思います。

Laravelの初期化

まずはlaravelコマンドでアプリをインストール・初期化しましょう。

laravel new laravel-vue

インストールし終わったら、デフォルトの挙動が問題ないか確認しましょう。ローカルでアプリを立ち上げます。

cd laravel-vue
php artisan serve

http://127.0.0.1:8000 にアクセスしてアプリが以下の画像のように表示され、正常に初期化されて動作していることを確認できたらOKです。

Hello World

ルートの画面にHello Worldが出るように修正していきます。

コードを修正する前にnpmでvueをインストールします。

npm install

インストールが完了したらnpmとwebpackでビルドしてみます。

npm run watch

watchにしておけば変更すると自動でビルドし直してくれるので開発中はこれを使うようにしましょう。

Laravelをインストールした段階で生成されているサンプルのVueを利用するためwelcome.blade.phpのbodyタグの中を以下のように変更します。

Hello Worldを出力できるようにExampleComponent.vueを以下のように修正します。

そして http://127.0.0.1:8000/ に改めてアクセスすると

ブラウザの左上にHello Worldの文字を出すことができましたね！

Githubのリポジトリはこちらです。

karaageeee/laravel-vue-sample

To learn Vue with laravel. Contribute to karaageeee/laravel-vue-sample development by creating an account on GitHub.

github.com

今回は、とりあえずHello Worldが出せるところまででしたが、次回は今どのようにして動いているのかや、新たな機能を使えるようにしていきたいと思います！。