![レベル３
<hoge-view
:data="{{ $hoge->toJson() }}"
hoge1-url="{{ route('web.hoge1.index') }}"
hoge2-url="{{ route('web.hoge2.store', [$hoge2_id]) }}"
hoge3-url="{{ route('web.hoge3.update', [$hoge3_id]) }}"
hoge4-url="{{ route('web.hoge4.delete', [$hoge4_id]) }}"
hoge5-url="{{ route('web.hoge5.store', [$hoge5_id]) }}"
hoge6-url="{{ route('web.hoge6.store', [$hoge6_id]) }}"
hoge7-url="{{ route('web.hoge7.update', [$hoge7_id]) }}"
hoge8-url="{{ route('web.hoge8.update', [$hoge8_id]) }}"
/>](https://image.slidesharecdn.com/laravel-vue-project-upload-190714061304/85/Laravel-vue-project-upload-11-320.jpg)
Laravel vue-project-upload
- 8. レベル１ ● ログイン画面 ○ formのサブミットで入力値を送信 ○ サーバサイドのバリデーションエラーは Laravelの機能で表示 ○ クライアントサイドバリデーション自作 ベターJQuery的な使い方
- 10. レベル２ ● 動的な画面 ○ やたら動的に増える項目が多いから Vueの恩恵 ○ 配列削除に弱い ■ Keyの壁 ○ Atomic Designの恩恵 ○ vee-validate導入
- 11. レベル３ <hoge-view :data="{{ $hoge->toJson() }}" hoge1-url="{{ route('web.hoge1.index') }}" hoge2-url="{{ route('web.hoge2.store', [$hoge2_id]) }}" hoge3-url="{{ route('web.hoge3.update', [$hoge3_id]) }}" hoge4-url="{{ route('web.hoge4.delete', [$hoge4_id]) }}" hoge5-url="{{ route('web.hoge5.store', [$hoge5_id]) }}" hoge6-url="{{ route('web.hoge6.store', [$hoge6_id]) }}" hoge7-url="{{ route('web.hoge7.update', [$hoge7_id]) }}" hoge8-url="{{ route('web.hoge8.update', [$hoge8_id]) }}" />
- 12. レベル３ ● 項目が増え続ける画面 ○ URLの追加がしんどい ○ そのバケツリレーに心底疲れる ■ Vuexのストアに放り込む ● ziggyの追加 ○ notify messageの表示が怠い問題 ■ EventHubの追加 ● ステップ入力しないといけないような長大画面
- 13. ziggy ● Laravelのルーティング定義をjson形式にする ● Laravelのrouteヘルパーと同じ書き口で書ける ● vuexから呼ぶと気分が微妙になる() Laravel route(‘web.home’) vue route(‘web.home’) vuex this._vm.route(‘web.home’)
- 15. EventHub import EventHub from '@/EventHub' Vue.use(EventHub) ```component.vue this.$eventHub.$on(‘event-name’, (value) => {/* 処理 */}) this.$eventHub.$emit(‘event-name’, value)
- 16. this.$eventHub.$on(‘event-name’, (value) => { // 何か処理 ・・・ this.$eventHub.$emit(‘return-event-name’, returnValue) }) this.$eventHub.$once(‘return-event-name’, (value) => {処理}) this.$eventHub.$emit(‘event-name’, value) EventHubの応用
- 17. 画面構成 ヘッダーメニュー サ イ ド メ ニ ュ ｜ フッター メインコンテンツ タイトル + beadcrumb タイトル（errorCapturedでのエラーメッセージの表示含む） notification(event Hub) モーダル表示(event Hub)
- 18. バックエンドフロントエンド UIコンポーネント 今現在の要素 Vue + Vuex 言語ファイル ルーティング ファイル
- 19. まとめ ● 簡単すぎる画面からやらない ● サーバサイドFWのリソース -> Vueで使用するリソースを自動生成 ● $refsは積極採用 ● イベントハブは重要 ● Nuxtの仕組みは参考になる
- 20. 課題 ● DBに持ってるデータで入力フォーム生成するとき のデータの取り方 ● 画面遷移以外で画面の表示をガサっと変えたい ○ 今日扱えなかった ○ イベントハブで通知してv-if ○ vue-rouerで履歴登録させないとか出来ると達 成できるんだけど、、情報求む
- 21. 参考 ● Buefy https://buefy.org/ ● ziggy https://github.com/tightenco/ziggy ● generate vue-i18n file https://github.com/martinlindhe/laravel-vue-i18n-generator ● VeeValidate https://baianat.github.io/vee-validate/ ● Vue.js入門 基礎から実践アプリケーション開発まで https://www.amazon.co.jp/dp/4297100916/ref=cm_sw_em_r_mt_dp_U_BKbkDb2XSD6QF
- 22. おしまい