非フロントエンジニアが爆速で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のバージョン

Transcript

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

   View Slide

2. ࣗݾ঺հ
   w ໊લ໦ଜܚ
   w ৽ଔ೥໨
   w -*'6--)0.&`4ݟ͑Δෆಈ࢈Ձ஋ IUUQTMJGVMMIPNFT
   JOEFYKQ
   
   w 3VCZPO3BJMT TJOBUSB K2VFSZ "84 4FMFOJVN &&
   
   w /P4DIPPM IUUQTOPTDIPPMBTJB
   
   w -BSBWFM /VYUKT 7VFUJGZ
   

   View Slide

3. 7VFUJGZΛ࢖͏ͨΊʹ
   Ωϟονͨͭ͠ͷ͜ͱ
   

   View Slide

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

   View Slide

5. .mt-md-2ˡ͜Ε
   

   View Slide

6. NNBSHJO
   QQBEEJOH
   .mt-md-2
   

   View Slide

7. t: top
   b: bottom
   l: left
   r: right
   x: *-left and *-right
   y: *-top and *-bottom
   a: all
   .mt-md-2 IUUQTWVFUJGZKTDPNKBTUZMFT
   TQBDJOH
   

   View Slide

8. CSFBLQPJOU
   .mt-md-2
   

   View Slide

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

   View Slide

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

    View Slide

11. ͳΜͰͷഒ਺
    

    View Slide

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

    View Slide

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

    View Slide

14. SPX DPM P⒎TFU
    

    View Slide

15. HSJETZTUFN
    

    View Slide

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

    View Slide

17. WSPX
    DPMݸ
    WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM
    ݸͷDPMʢྻʣ͔ΒͳΔ
    

    View Slide

18. WSPX
    WDPM
    DPMT
    P⒎TFU
    WDPM
    DPMT
    P⒎TFU
    P⒎TFUͰ࢝·ΓҐஔΛ੍ޚ
    

    View Slide

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

    View Slide

20. EqFY KVTUJGZ
    

    View Slide

21. HSJETZTUFN
    

    View Slide

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

    View Slide

23. KVTUJGZ
    w KVTUJGZTUBSU
    
    w KVTUJGZDFOUFS
    
    w KVTUJGZFOE
    
    w KVTUJGZTQBDFCFUXFFO
    
    w KVTUJGZTQBDFBSPVOE
    

    View Slide

24. ഑ஔͷجຊ
    

    View Slide

25. WTFMFDU
    

    View Slide

26. දࣔ
    ˠ
    ˠ
    ˠ
    ѻ͍͍ͨ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. WTFMFDU͕៉ྷʹ✨
    

    View Slide

31. WEBUFQJDLFS
    

    View Slide

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

    View Slide

33. CJSUIEBZQJDLFSͳ͍Α
    

    View Slide

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

    View Slide

35. ͳΔ΄Ͳʁ
    

    View Slide

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

    View Slide

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

    View Slide

38. ݁ߏେม
    

    View Slide

39. Ͱ΋ͳΜͱ͔
    

    View Slide

40. ৭ʑ͍͡Γ·͢
    

    View Slide

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

    View Slide

42. 7VFUJGZͷόʔδϣϯ
    

    View Slide

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

    View Slide

44. ٧·ͬͨΒόʔδϣϯ
    ͍ٙ·͠ΐ͏
    

    View Slide

45. ࠷ޙʹ
    

    View Slide

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

    View Slide

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

    View Slide