Upgrade to Pro — share decks privately, control downloads, hide ads and more …

非フロントエンジニアが爆速でVuetifyを使うためにキャッチした6つのこと

8c32bc0093b8a510057e9def8580ede2?s=47 kimukei
December 17, 2019

 非フロントエンジニアが爆速でVuetifyを使うためにキャッチした6つのこと

bootstrapなどのUIフレームワークに明るくない人(私)がVuetifyを速攻で使っていけるようにキャッチアップしたことをまとめました。

主に以下のことについて言及しています
1. mt-md-2 ← こういうやつ
2. row, col, offset
3. d-flex, justify
4. v-select
5. v-date-picker
6. Vuetifyのバージョン

8c32bc0093b8a510057e9def8580ede2?s=128

kimukei

December 17, 2019
Tweet

Other Decks in Programming

Transcript

  1. ඇϑϩϯτΤϯυΤϯδχΞ ͕ര଎Ͱ7VFUJGZΛ࢖͏ͨΊ ʹΩϟονͨͭ͠ͷ͜ͱ

  2. ࣗݾ঺հ w ໊લ໦ଜܚ w ৽ଔ೥໨ w -*'6--)0.&`4ݟ͑Δෆಈ࢈Ձ஋ IUUQTMJGVMMIPNFT JOEFYKQ 

    w 3VCZPO3BJMT TJOBUSB K2VFSZ "84 4FMFOJVN &&  w /P4DIPPM IUUQTOPTDIPPMBTJB  w -BSBWFM /VYUKT 7VFUJGZ
  3. 7VFUJGZΛ࢖͏ͨΊʹ Ωϟονͨͭ͠ͷ͜ͱ

  4. NUNEˡ͜͏͍͏΍ͭ SPX DPM P⒎TFU EqFY KVTUJGZ WTFMFDU WEBUFQJDLFS 7VFUJGZͷόʔδϣϯ

  5. .mt-md-2ˡ͜Ε

  6. NNBSHJO QQBEEJOH .mt-md-2

  7. t: top b: bottom l: left r: right x: *-left

    and *-right y: *-top and *-bottom a: all .mt-md-2 IUUQTWVFUJGZKTDPNKBTUZMFT TQBDJOH
  8. CSFBLQPJOU .mt-md-2

  9. CSFBLQPJOU UIJTWVFUJGZCSFBLQPJOU ͰΞΫηεͰ͖Δ

  10. O  QY ͸Oͱ΋ॻ͚Δ BVUP΋࢖͑Δ .mt-md-2

  11. ͳΜͰͷഒ਺

  12. ը໘͸ͷഒ਺Ͱग़དྷ͍ͯΔ ࢀߟ7FDUPS7JEFP4UBOEBSET

  13. ͷഒ਺Ͱ૊·Εͨͷ ͕ྑ͍σβΠϯ

  14. SPX DPM P⒎TFU

  15. HSJETZTUFN

  16. WSPX WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM

    WDPM WDPM WDPM SPXʢߦʣͷதʹDPMʢྻʣ͕͋Δ
  17. WSPX DPMݸ WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM

    WDPM WDPM WDPM WDPM ݸͷDPMʢྻʣ͔ΒͳΔ
  18. WSPX WDPM DPMT P⒎TFU WDPM DPMT P⒎TFU P⒎TFUͰ࢝·ΓҐஔΛ੍ޚ

  19. CSFBLQPJOUΛࢦఆͯ͠Ϩεϙϯγϒͳ഑ஔʹ

  20. EqFY KVTUJGZ

  21. HSJETZTUFN

  22. EqFY w Eͱ͸EJTQMBZ w EqFYEJTQMBZqFY w E\CSFBLQPJOU^qFYͱ͔΋Ͱ͖Δ

  23. KVTUJGZ w KVTUJGZTUBSU  w KVTUJGZDFOUFS  w KVTUJGZFOE 

    w KVTUJGZTQBDFCFUXFFO  w KVTUJGZTQBDFBSPVOE
  24. ഑ஔͷجຊ

  25. WTFMFDU

  26. දࣔ ˠ ˠ ˠ ѻ͍͍ͨ

  27. WNPEFM࢖ͬͯϩδοΫ ͪ͝Όͪ͝Όॻ͔ͳ͍

  28. ΦϒδΣΫτʹ UFYUͱWBMVFΛ༻ҙ͢Ε͹0,

  29. ࢀরϓϩύςΟ໊͸ ઃఆͰ͖Δ

  30. WTFMFDU͕៉ྷʹ✨

  31. WEBUFQJDLFS

  32. ஀ੜ೔ೖྗϑΥʔϜ ࡞Ζ͏

  33. CJSUIEBZQJDLFSͳ͍Α

  34. CJSUIEBZQJDLFSͳ͍Α σϑΥϧτͰ೥ͷબ୒͔Β࢝·Γɺ೔෇ൣғΛ੍ݶ͠ɺ೔෇ Λબ୒ͨ͠ޙʹϐοΧʔϝχϡʔΛด͡Δͱɺ׬ᘳͳ஀ੜ೔ ϐοΧʔʹͳΓ·͢ɻ CZެࣜ

  35. ͳΔ΄Ͳʁ

  36. WEBUFQJDLFSΛ ΧελϚΠζ͢Δ

  37. w ೔ຊޠରԠ w ೔෇ͷʮ೔ʯ͸औΔ w ೥͔Βબ୒ w ࠷ॳʹ೥Λબ୒͢Δͱ͖ɺ೥͔ΒʹͳΔΑ͏ʹɹ ʢWNPEFMʹॳظ஋Λ༩͑ͯ΋ղܾͰ͖ͳ͍ʣ w

    ೔෇ൣғ੍ݶ w ೔෇Λબ୒ͱಉ࣌ʹQJDLFSΛด͡Δ
  38. ݁ߏେม

  39. Ͱ΋ͳΜͱ͔

  40. ৭ʑ͍͡Γ·͢

  41. ௕͍ͷͰޙͰهࣄʹ ·ͱΊ·͢

  42. 7VFUJGZͷόʔδϣϯ

  43. 7VFUJGZͷόʔδϣϯ w όʔδϣϯ͸ྑ֬͘ೝ͢΂͠ w WW݁ߏഁյతͳมߋ͕ଟ͍ w ϚΠφʔόʔδϣϯݻ༗ͷόά͕͋ͬͨΓ͢Δ w Wʹ্͛ͯͳ͍ͳΒ w

    7VFUJGZͰ͸ͳ͘2VBTBSʹʢ.JHSBUJOHGSPN 7VFUJGZUP2VBTBSʣ
  44. ٧·ͬͨΒόʔδϣϯ ͍ٙ·͠ΐ͏

  45. ࠷ޙʹ

  46. -5ͳͲొஃػձΛืू͍ͯ͠·͢ ͓༠͍͋Ε͹ߦ͖·͢ !,.3@·Ͱ ˣ࣋ͪωλˣ 3VCZPO3BJMT -BSBWFM /VYUKT  7VFUJGZ "84

  47. ΑΖ͓͘͠ئ͍͠·͢ʂ