![ドメインロジックの
エラーメッセージ
● IlluminateSupportViewErrorBag使う
● PHPの癖にイミュータブルだから使い方注意
● response()->json([‘errors’ => $errors])
で返すとバリデーションエラーと同じになる](https://image.slidesharecdn.com/avp1mnks46h4itsjwrni-signature-f7716c290fdb19906cfec32b1c682387ca9b4ac7e38d2f0dd097e03d906482ec-poli-190412040055/85/Lara-vue-11-320.jpg)
![アセットコンパイルする
jsファイルは分けるmix.js('resources/js/app.js', 'public/js')
.extract(['axios', 'bulma', 'lodash.defaultsdeep', 'vee-validate', 'vue', 'vue-i18n', 'vue-template-compiler', 'vuex'])
.sass('resources/sass/app.scss', 'public/css', {
implementation: require('node-sass')
})
.options({
processCssUrls: false
})
.version()](https://image.slidesharecdn.com/avp1mnks46h4itsjwrni-signature-f7716c290fdb19906cfec32b1c682387ca9b4ac7e38d2f0dd097e03d906482ec-poli-190412040055/85/Lara-vue-13-320.jpg)
![const path = require('path')
module.exports = {
entry: path.resolve(__dirname, "resources/js/app.js"),
output: {
path: path.resolve(__dirname, 'public/js'),
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': __dirname + '/resources/js'
}
}
}](https://image.slidesharecdn.com/avp1mnks46h4itsjwrni-signature-f7716c290fdb19906cfec32b1c682387ca9b4ac7e38d2f0dd097e03d906482ec-poli-190412040055/85/Lara-vue-15-320.jpg)
![[JavaOne Tokyo 2012] JavaFX and Web Integration](https://cdn.slidesharecdn.com/ss_thumbnails/js1-13dl-120416013809-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to Lara vue (9)
More from 小川 昌吾 (20)
Lara vue
- 2. Lara-Vue ● 全部Vueで作る ● 永続データはVuexに放り込む ● 多言語化はLaravel -> Vue I18n ● サーバサイドバリデーションエラーの表示 ● サーバサイドからのflashメッセージの扱い ● ドメインロジックのエラーメッセージ ● アセットコンパイルするjsファイルは分ける ● webpackの設定を認識させる
- 3. 全部Vueで作る ● async、deferが使えるようになるため、 ターンアラウンドタイムが短くなる可能性 ● Blade噛ませると、タグ内が一瞬見える ● 部分的にやるなら、リアクティブに画面を動か す場所だけに限定する
- 4. 永続データはVuexに 放り込む ● コンポーネントが疎結合になる ● 永続化済データだけを入れるのがポイント ● 編集中データは入れてはいけない ● Vuex storeがmutation以外で更新されると エラーログが出るので即修正 ● storeの読込みはNuxt.jsをパクると良い
- 5. 多言語化はLaravel -> Vue I18n ● Composer required martinlindhe/laravel-vue-i18n-generato ● php artisan vue-i18n:generate https://github.com/martinlindhe/laravel-vue-i18n- generator
- 6. サーバサイドバリデーシ ョンエラーの表示 ● VueのerrorCapturedを使う ● rsp.data.errorsに入ってるからそれを投げる ● ErrorBoundaryで拾って表示 <error-boundary> <hoge-screen /> </error-boundary>
- 7. サーバサイドからのflash メッセージの扱い ● エラーはerrorCaptureに拾わせる ● 成功時は、Promise内でhref書き換えればOK ● その場で表示したい場合は、Event Hub使う
- 8. Event Hub ● 名前付いてるけど、専用のVueインスタンスを作 って、Vueプラグインとしてインストールするだ け ● グローバルインスタンス経由でイベントのやり 取りを行うTIPS
- 9. Event Hub const eventHub = { install: function (Vue, options) { Vue.prototype.$eventHub = new Vue() } } export default eventHub
- 10. Event Hub import EventHub from '@/EventHub' Vue.use(EventHub) ```component.vue this.$eventHub.$on(‘event-name’, (value) => {/* 処理 */}) this.$eventHub.$emit(‘event-name’, value)
- 11. ドメインロジックの エラーメッセージ ● IlluminateSupportViewErrorBag使う ● PHPの癖にイミュータブルだから使い方注意 ● response()->json([‘errors’ => $errors]) で返すとバリデーションエラーと同じになる
- 12. アセットコンパイルする jsファイルは分ける ● 自前のjsとライブラリを分ける ● Laravel Mixのversionはファイルのハッシュ 取ってるだけだから、中身変わらなければ、 versionのIDは変わらない ● extractに外部ライブラリは全部記述する
- 13. アセットコンパイルする jsファイルは分けるmix.js('resources/js/app.js', 'public/js') .extract(['axios', 'bulma', 'lodash.defaultsdeep', 'vee-validate', 'vue', 'vue-i18n', 'vue-template-compiler', 'vuex']) .sass('resources/sass/app.scss', 'public/css', { implementation: require('node-sass') }) .options({ processCssUrls: false }) .version()
- 14. webpackの設定を認識 させる ● 相対パスがとにかく怠い ● エイリアスが無いと実際詰むと思う ● 冲冲颈诲别.飞别产辫补肠办.肠辞苍蹿颈驳.箩蝉作って颈诲别补に认识さす
- 15. const path = require('path') module.exports = { entry: path.resolve(__dirname, "resources/js/app.js"), output: { path: path.resolve(__dirname, 'public/js'), filename: 'app.js' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': __dirname + '/resources/js' } } }
Editor's Notes
- #4: jsが動かないブラウザなら使えるテクニック。 ただ、全部くろみうむ化している現代において、ぶっちゃけそんなことはどうでも良くなりつつある 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
- #5: 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
- #6: これで、フロントとバックエンドで生成する文言のブレを排除する
- #7: jsが動かないブラウザなら使えるテクニック。 ただ、全部くろみうむ化している現代において、ぶっちゃけそんなことはどうでも良くなりつつある 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
- #8: jsが動かないブラウザなら使えるテクニック。 ただ、全部くろみうむ化している現代において、ぶっちゃけそんなことはどうでも良くなりつつある 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
- #11: 多用すると死ぬので、必要な箇所だけに限定する。 イベントハブに登録するイベント名は、定数で管理しても良いかも