VueのUIフレームワークを試してみた

Vue Night in Fukuoka #2の登壇資料です。
・Vuetifyのサンプル
https://codepen.io/zuckey_/pen/YBWwOe
・BootstrapVueのサンプル
https://codepen.io/zuckey_/pen/JxboaG

Transcript

1. Vue.jsͷUIϑϨʔϜ ϫʔΫΛࢼͯ͠Έͨ Vue Night in Fukuoka #2 2019/01/30 Ճ݄ फҰ࿠
2. ࣗݾ঺հ ɾ໊લ: Ճ݄ फҰ࿠ɹ ɹɹ ˏZuckey_ ɾॴଐ: גࣜձࣾJετϦʔϜ ɾझຯ: ϩʔυόΠΫɹےτϨ ɾಲࠎϥʔϝϯ͕େ޷͖
3. ೑೑͏ͲΜ΋͍͍͚Ͳ തଟҰ૒΋͍͍ͧʂ
4. UIϑϨʔϜϫʔΫ͕ ৭ʑ͋ͬͯ೰Ήɾɾɾ
6. ࠓճࢼͨ͠UIϑϨʔϜϫʔΫ • Vuetify • BootstrapVue
7. Vuetify • ϚςϦΞϧσβΠϯͳUIϑϨʔϜϫʔΫ • ϨεϙϯγϒରԠ • ίϯϙʔωϯτͷछྨ͸ଟΊ • Ϋϥε΍ଐੑͰݟͨ໨ׂ͕ͱࡉ͔͘ௐ੔Ͱ͖Δ • DatePicker΍TimePicker΋͋Δ
8. Vuetify • άϦουϨΠΞ΢τͷ෯͸αΠζʹ߹Θͤͯɹ ̑ஈ֊ͰࢦఆՄೳ https://vuetifyjs.com/ja/framework/display ΑΓҾ༻
9. Vuetify • ΫϥεΛ͚ͭͯpadingͱmarginΛௐ੔Ͱ͖Δ https://vuetifyjs.com/ja/framework/spacing ΑΓҾ༻  {m or p}{Ͳͷ޲͖ʹ͚ͭΔ͔}-{େ͖͞} ͷܗࣜ
10. BootstrapVue • Bootstrap4 ϕʔεͷUIϑϨʔϜϫʔΫ • ϨεϙϯγϒରԠ • ίϯϙʔωϯτͷछྨ͸Vuetifyͱൺֱ͢Δͱ ΍΍গͳΊ
11. BootstrapVue https://bootstrap-vue.js.org/docs/components/layout ΑΓҾ༻ • άϦουϨΠΞ΢τͷ෯͸αΠζʹ߹Θͤͯɹ ̑ஈ֊ͰࢦఆՄೳ(VuetifyΑΓগ͠෯͕ڱ໨)
12. BootstrapVue https://bootstrap-vue.js.org/docs/reference/spacing-classes/ ΑΓҾ༻ • ΫϥεΛ͚ͭͯpadingͱmarginΛௐ੔Ͱ͖Δ {m or p}{޲͖}-{େ͖͞} ·ͨ{m or p}{޲͖}-{άϦουࢦఆͷछྨ}-{େ͖͞}ͷܗࣜ
13. DEMO
14. ·ͱΊ • UIϑϨʔϜϫʔΫ͸खܰʹ࢖͑ͯศར • ඞཁͳίϯϙʔωϯτͷ༗ແ΍ݟͨ໨ͷ޷Έ ͳͲʹԠͯܰ͘͡ࢼ͔ͯ͠ΒબͿͱΑ͛͞ • ܰ͘ࢼ͢ͱ͖͸CodePenศར