Vue + Vue Router + Vuex +Laravel　写真共有アプリ作成 (1) - 30代専業主婦の独学エンジニア挑戦ブログ

Vue + Vue Router + Vuex +Laravelで写真共有アプリを作るチュートリアルを行いました！

１週間ほどブログを更新していませんでしたが、その間に下記のサイトを参考に写真共有アプリを作ってみました。

一通り完成したので、自分の復習もかねてまとめます！

参考サイトのチュートリアルの記事が全16記事でしたので、それに合わせてまとめていきます♪

フロントエンドにVue.js+Vue Router+Vuex

サーバーサイドにLaravel を使用したシングルページWebアプリケーション(SPA)の開発

・Vue.jsとLaravelを組み合わせてSPAを構築する方法

・SPAにおけるクッキー認証とCSRF対策

・Vue Routerを使用した画面遷移

・Vuexを使用した状態管理

・VueでのタブやローディングUIの表現

・SPAにおけるエラー処理

Vue RouterはVue.jsを利用したSPA構築で、ルーティング制御するためのプラグイン。

VuexはVueアプリケーションで使用する状態確認ライブラリのこと。

Vue.jsアプリ開発に使用するデバックツール

（Chromeの場合）

1. Vue.js DevToolsを「拡張機能に追加」

2. 拡張機能の設定画面で、「ファイルのURLへのアクセスを許可する」にチェック

3 .デベロッパーツールを開くとvueというタブが追加される

<参考サイト>

写真共有アプリ

写真の一覧が並び、ページ送り機能がある

写真にマウスオーバーすると、いいねボタン（いいね数も表示）、ダウンロードボタン、投稿者名が表示される

写真をクリックすると詳細ページになる。

いいね機能、ダウンロード、コメント投稿と閲覧ができる。

いいねは1ユーザあたり、1枚の写真につき1回しかいいねできない。

いいね済みの状態で、もう一回いいねするといいねが解除される。

コメントは投稿された日時が新しいものが一番上になる

Submit a photoを押すと、写真投稿のフォーム画面が出る

フォームから画像を選択するとプレビュー表示、submitボタンをクリックするとローディングを表示し、無事に投稿できたら「写真が投稿されました！」と表示

フォームはタブで切り替えられる