Soumettre la recherche
Mettre en ligne
Lara vue
•
Télécharger en tant que PPTX, PDF
•
0 j'aime
•
512 vues
小
小川 昌吾
Suivre
社内勉強会
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 16
Télécharger maintenant
Recommandé
第1回concrete5初心者向け勉強会 環境構築
第1回concrete5初心者向け勉強会 環境構築
武彦 大山
Ansible/Vagrantでアドテク環境を最速構築
Ansible/Vagrantでアドテク環境を最速構築
kaboccha
つらみを抑えるReactNative
つらみを抑えるReactNative
t0m0120
Nas4 freeへzabbix agentを導入してみた
Nas4 freeへzabbix agentを導入してみた
kometch H
Spring Boot概要
Spring Boot概要
af not found
Webpacker 3 on Docker
Webpacker 3 on Docker
Shuichiro Fukuoka
What is Itamae
What is Itamae
Yoshida Takumi
About .Net vNext
About .Net vNext
Kazunori Hamamoto
Recommandé
第1回concrete5初心者向け勉強会 環境構築
第1回concrete5初心者向け勉強会 環境構築
武彦 大山
Ansible/Vagrantでアドテク環境を最速構築
Ansible/Vagrantでアドテク環境を最速構築
kaboccha
つらみを抑えるReactNative
つらみを抑えるReactNative
t0m0120
Nas4 freeへzabbix agentを導入してみた
Nas4 freeへzabbix agentを導入してみた
kometch H
Spring Boot概要
Spring Boot概要
af not found
Webpacker 3 on Docker
Webpacker 3 on Docker
Shuichiro Fukuoka
What is Itamae
What is Itamae
Yoshida Takumi
About .Net vNext
About .Net vNext
Kazunori Hamamoto
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration
Kazuchika Sekiya
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」
Hiroaki NAKADA
OSC2011Tokyo/Fall OpenStack Swift入門
OSC2011Tokyo/Fall OpenStack Swift入門
irix_jp
OpenStack Object Storage; Overview
OpenStack Object Storage; Overview
irix_jp
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
Shinji Takao
Kubernetes環境で実現するWebアプリケーションセキュリティ
Kubernetes環境で実現するWebアプリケーションセキュリティ
NGINX, Inc.
モダンJavaScript入門.pdf
モダンJavaScript入門.pdf
omochids0113
react-ja.pdf
react-ja.pdf
ssuser65180a
CloudStackユーザ会 OSC.cloud
CloudStackユーザ会 OSC.cloud
samemoon
Vue.js + WordPress
Vue.js + WordPress
Takahiro Kudo
Effective flutter
Effective flutter
小川 昌吾
Flutter first impression
Flutter first impression
小川 昌吾
Flutter management statement
Flutter management statement
小川 昌吾
Laravel vue-project-upload
Laravel vue-project-upload
小川 昌吾
Atomic design+vue
Atomic design+vue
小川 昌吾
今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り
小川 昌吾
Njug docker-20180623
Njug docker-20180623
小川 昌吾
アプリ屋のための Docker入門
アプリ屋のための Docker入門
小川 昌吾
Njug 20180414
Njug 20180414
小川 昌吾
Java屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経った
小川 昌吾
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた
小川 昌吾
Contenu connexe
Similaire à Lara vue
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration
Kazuchika Sekiya
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」
Hiroaki NAKADA
OSC2011Tokyo/Fall OpenStack Swift入門
OSC2011Tokyo/Fall OpenStack Swift入門
irix_jp
OpenStack Object Storage; Overview
OpenStack Object Storage; Overview
irix_jp
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
Shinji Takao
Kubernetes環境で実現するWebアプリケーションセキュリティ
Kubernetes環境で実現するWebアプリケーションセキュリティ
NGINX, Inc.
モダンJavaScript入門.pdf
モダンJavaScript入門.pdf
omochids0113
react-ja.pdf
react-ja.pdf
ssuser65180a
CloudStackユーザ会 OSC.cloud
CloudStackユーザ会 OSC.cloud
samemoon
Vue.js + WordPress
Vue.js + WordPress
Takahiro Kudo
Similaire à Lara vue
(10)
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration
WildFly Swarmではじめる「パーツとしてのJavaEE」
WildFly Swarmではじめる「パーツとしてのJavaEE」
OSC2011Tokyo/Fall OpenStack Swift入門
OSC2011Tokyo/Fall OpenStack Swift入門
OpenStack Object Storage; Overview
OpenStack Object Storage; Overview
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
Kubernetes環境で実現するWebアプリケーションセキュリティ
Kubernetes環境で実現するWebアプリケーションセキュリティ
モダンJavaScript入門.pdf
モダンJavaScript入門.pdf
react-ja.pdf
react-ja.pdf
CloudStackユーザ会 OSC.cloud
CloudStackユーザ会 OSC.cloud
Vue.js + WordPress
Vue.js + WordPress
Plus de 小川 昌吾
Effective flutter
Effective flutter
小川 昌吾
Flutter first impression
Flutter first impression
小川 昌吾
Flutter management statement
Flutter management statement
小川 昌吾
Laravel vue-project-upload
Laravel vue-project-upload
小川 昌吾
Atomic design+vue
Atomic design+vue
小川 昌吾
今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り
小川 昌吾
Njug docker-20180623
Njug docker-20180623
小川 昌吾
アプリ屋のための Docker入門
アプリ屋のための Docker入門
小川 昌吾
Njug 20180414
Njug 20180414
小川 昌吾
Java屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経った
小川 昌吾
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた
小川 昌吾
ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)
小川 昌吾
非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理
小川 昌吾
Dynamo db はじめの一歩
Dynamo db はじめの一歩
小川 昌吾
スキトラGit
スキトラGit
小川 昌吾
スキトラ Spring + mybatis
スキトラ Spring + mybatis
小川 昌吾
テストコード入門
テストコード入門
小川 昌吾
IoT検定
IoT検定
小川 昌吾
MySQL入門
MySQL入門
小川 昌吾
Plus de 小川 昌吾
(20)
Effective flutter
Effective flutter
Flutter first impression
Flutter first impression
Flutter management statement
Flutter management statement
Laravel vue-project-upload
Laravel vue-project-upload
Atomic design+vue
Atomic design+vue
今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り
Njug docker-20180623
Njug docker-20180623
アプリ屋のための Docker入門
アプリ屋のための Docker入門
Njug 20180414
Njug 20180414
Java屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経った
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた
ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)
非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理
Dynamo db はじめの一歩
Dynamo db はじめの一歩
スキトラGit
スキトラGit
スキトラ Spring + mybatis
スキトラ Spring + mybatis
テストコード入門
テストコード入門
IoT検定
IoT検定
MySQL入門
MySQL入門
Lara vue
1.
LaravelでVueを使うアレコレ 2019/04/12 sh-ogawa
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の設定を認識 させる ● 相対パスがとにかく怠い ● エイリアスが無いと実際詰むと思う ●
__ide.webpack.config.js作ってideaに認識さす
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' } } }
Notes de l'éditeur
jsが動かないブラウザなら使えるテクニック。 ただ、全部くろみうむ化している現代において、ぶっちゃけそんなことはどうでも良くなりつつある 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
これで、フロントとバックエンドで生成する文言のブレを排除する
jsが動かないブラウザなら使えるテクニック。 ただ、全部くろみうむ化している現代において、ぶっちゃけそんなことはどうでも良くなりつつある 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
jsが動かないブラウザなら使えるテクニック。 ただ、全部くろみうむ化している現代において、ぶっちゃけそんなことはどうでも良くなりつつある 画面の特定部分だけに使う場合は、グローバルに登録はせずに、new Vueして使う。
多用すると死ぬので、必要な箇所だけに限定する。 イベントハブに登録するイベント名は、定数で管理しても良いかも
Télécharger maintenant