Recruit Site

■概要
Vue.jsを使ったWEBアプリ開発をした際の概要を紹介

■実装アプリ概要（WEBアプリ）
　フロント：Vue.js
　サーバーサイド：PHP/Laravel7
　axiosを使用してAPI（サーバーサイドの処理）を呼んでいる

　＊Vue.js：JavaScriptフレームワーク
　　・学習コストが低い
　　・サーバー通信量を節約できる
　　・拡張性が高い
　　　→色々なプラグインを組み合わせて使える
　　・データバインドに特化している
　　　→フォーム入力等データの変更があればリアルタイムで表示を更新
　＊axios：PromiseベースのHTTPクライアントライブラリで
　　　　　 GETやPOSTのHTTPリクエストを使ってデータの取得、
　　　　　 データ送信を行うことができる
　　　　　 →APIを実行する時にこれを使うと簡単に実装できる

■実装の流れ　※今回の場合
　・Vue(nodejs,npm)、axiosのインストール
　・コンポーネント作成
　・ルーティング設定
　・API実行してサーバーサイドの処理を実行
　・動作確認

　●コンポーネント作成
　　・HTML、Vue.js、cssが一つのファイルに記載されている
　　　(行数が多いものはそれぞれ分割)
　　・登録画面、確認画面、登録完了画面など一連のHTMLを
　　　１つのファイルに記載しVueで出し分ける
　　・Vueインスタンスに作成したコンポーネント(部品)を読み込ませる

　●ルーティング設定
　　WEBとは別にルーティングファイルがあり、
　　Vue的なルーティングはこちらに記載する
　　パス’https://xxxx/login’にアクセスすると
　　コンポーネント(部品)が呼ばれる

　●API実行
　　・API実行用のファイルにそれぞれのAPIを実行するメソッドを作成
　　　→Vueファイル内で呼び出す
　　・api.php(Lravelのルーティングファイル)に
　　　APIのルーティング情報を記載
　　　→該当のコントローラーにメソッドを作成する
　　　→API実行結果をVueで受け取り画面に反映する

■特徴・注意点など
　●まずはじめに、、、
　　nodejs,npmをインストールしていく必要がある
　　（Vueを使っていると編集がローカルに反映されないので）

　　npm run dev
　　→8081で作業
　　　ビルドする処理が勝手に走っている
　　　リロードしなくても反映される
　　npm run build
　　→8080に反映される
　　　(ビルドする処理を手動でやる必要がある)

　　8081で作業→一通り完了したらビルドして8080で確認→プッシュ

　●Vue.jsならではの特徴
　　v-model：Vue.jsを使ってフォームを構築する際によく使う機能
　　入力した値を即時に反映できる
　　→変更があったルーティングの画面を出してくれる

　　・アクセスからの流れ
　　　アクセス → app.js (App.vue , index.js) → Login.vue
　　　アクセスがあるとまずapp.jsへ行く

　　・APIを使った流れ
　　　Login.vue → user.js → api.php → LoginController.php