Vue成長日記
Vueの勉強を本腰を入れて始めたい！思い立ったが吉日、だけどもなかなか個人で開発するだけじゃ続かないしすぐ忘れてしまうので、ブログにアウトプットしていくことにしました。いくつかの投稿を通して、Laravel x VueでVueでの開発のしかたを学びつつアプリを作っていけたらとおもいます。最終的になにが出来上がるかは未定ですw
事前準備
Laravelの環境構築は以下を参考にされると良さそうです。
laravelコマンドが使える状態を前提とさせていただきたいと思います。
Laravelの初期化
まずはlaravelコマンドでアプリをインストール・初期化しましょう。
laravel new laravel-vue
インストールし終わったら、デフォルトの挙動が問題ないか確認しましょう。ローカルでアプリを立ち上げます。
cd laravel-vue php artisan serve
http://127.0.0.1:8000 にアクセスしてアプリが以下の画像のように表示され、正常に初期化されて動作していることを確認できたらOKです。
Hello World
ルートの画面にHello Worldが出るように修正していきます。
追記(2019/09/04)
Laravel 6へのバージョンアップに伴いLaravelのプロジェクトを作成した初期状態ではVueが使えなくなりました。こちらの記事を参考にコマンドを実行してから先に進んでください。
コードを修正する前に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のリポジトリはこちらです。
今回は、とりあえずHello Worldが出せるところまででしたが、次回は今どのようにして動いているのかや、新たな機能を使えるようにしていきたいと思います！。
コメント