Vue CLI v3

Vue CLI v3

第69回 HTML5とか勉強会「UIフレームワーク最前線」の発表資料
https://html5j.connpass.com/event/89073/

38bee248082f6071230de65e9d74a944?s=128

kazupon

June 19, 2018
Tweet

Transcript

  1. Vue CLI v3 HTML5J UIϑϨʔϜϫʔΫ࠷લઢ 2018.06.19 @kazupon

  2. ࣗݾ঺հ

  3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,

    vuejs/jp.vuejs.org maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
  4. ͸͡Ίʹ

  5. ࠓ೔࿩͢͜ͱ

  6. Vue CLI v3

  7. ࠓ೔ ࿩͞ͳ͍͜ͱ

  8. ࠷৽ಈ޲ MANABIYA https://speakerdeck.com/kazupon/vue-dot-jsfalsejin-hou-toci-shi-dai-webkai-fa-nituite?slide=1

  9. ͦΕͰ΋஌Γ͍ͨͳΒ… Vue Contributor Days https://www.youtube.com/watch?v=U38s3O1hh9k

  10. ·ͨ͸

  11. ϩʔυϚοϓ https://github.com/vuejs/roadmap

  12. ࢀরͯ͠Լ͍͞

  13. Vue CLI v3

  14. ݱࡏ RC.3 ! ·΋ͳ͘ϦϦʔεʂ

  15. Vue CLI ͱ͸ • Vue.js ΞϓϦ޲͚ͷ CLI ϕʔεͷ ։ൃπʔϧ

  16. ओͳಛ௃

  17. https://cli.vuejs.org/ Vue CLI ެࣜυΩϡϝϯτͷτοϓΑΓ

  18. ͱɺ৭ʑͱ ͋Γ·͕͢

  19. v3 ͷ໨ۄ

  20. v3 ͷ໨ۄ • ϓϥάΠϯγεςϜ • Vue CLI Ϣʔβʔ΁ͷ֦ுੑͷఏڙ • Vue

    CLI UI • CLI ͕ۤखͳϢʔβʔʹର͢Δαϙʔτ • UI APIͱUI ϓϥάΠϯγεςϜͷఏڙʹ ΑΔɺ͞ΒͳΔVue CLIͷ֦ுੑΛఏڙ ͞ΒͳΔDXఏڙͷແݶͷՄೳੑ
  21. ϓϥάΠϯ γεςϜ

  22. CLIϓϥάΠϯͷ࡞੒ͱར༻ • جຊతʹҎԼͷAPIΛར༻࣮ͯ͠૷͢Δ • Service • Generator • Prompt •

    npmʹެ։͢Δ͜ͱͰɺϢʔβʔ͕ vue add ౳ͰΠϯετʔϧͯ͠ར༻͢Δ͜ͱ͕Ͱ͖Δ
  23. CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Service • webpackઃఆͷΧελϚΠζ • npm-scripts (via vue-cli-servie)ͷొ࿥ https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin

  24. CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Generator • ςϯϓϨʔτͷੜ੒ • طଘςϯϓϨʔτͷΧελϚΠζ https://cli.vuejs.org/dev-guide/plugin-dev.html#generator

  25. CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Prompts • ର࿩಺༰ͷΧελϚΠζ https://cli.vuejs.org/dev-guide/plugin-dev.html#prompts

  26. CLIϓϥάΠϯͷྫ • ࠃࡍԽ(i18n)ͷ࢓૊ΈΛಋೖ vue add i18n vue-cli-plugin-i18n my-app1 scafollding &

    Env settings
  27. CLIϓϥάΠϯͷϢʔεέʔε • Vue ޲͚ͷϥΠϒϥϦɺϑϨʔϜϫʔΫͷ ࣗಈΠϯετʔϧscafollding • ϓϩδΣΫτݻ༗ͷίʔυੜ੒ • ϚΠάϨʔγϣϯπʔϧ •

    σϓϩΠπʔϧ • … ͳͲ
  28. Vue CLI UI

  29. Vue CLI UI ͱ͸ʁ

  30. CLI : Command line interface UI : User interface

  31. Vue Command line interface User interface Vue CLI UI

  32. – Evan You “Vue CLI UI is the UI for

    the CLI.” “༁: Vue CLI͸CLI޲͚ͷUIͰ͢ɻ”
  33. Vue CLI UI ͷ࡞ऀ • ίΞνʔϜGuillaume Chau ࢯ ͷౖᔶͷ։ ൃʹΑΓര஀

    https://guillaume-chau.info/
  34. Vue CLI UI ͷ UI vue ui ίϚϯυ࣮ߦ… Webϒϥ΢βʹGUIΞϓϦ͕ىಈ

  35. Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨

    ΓͰ͖Δ • ϓϩδΣΫτ࡞੒ • CLIϓϥάΠϯ௥Ճ • ։ൃαʔόͷىಈ • ΞϓϦέʔγϣϯͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ
  36. ϓϩδΣΫτ࡞੒

  37. ։ൃαʔόͷىಈ

  38. webpackͷΠϯεϖΫγϣϯ

  39. CLI ൛ʹ͸ͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτ؅ཧ • GUIϕʔεͷίϯϑΟάϨʔγϣϯ •

    CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ … ͳͲ
  40. ϓϩδΣΫτ؅ཧ

  41. GUIϕʔεͷίϯϑΟάϨʔγϣϯ

  42. CLIϓϥάΠϯݕࡧˍҰཡ

  43. Vue CLI UI ͷ֦ுੑ • Vue CLI UIͰ΋ϓ ϥάΠϯγεςϜ Λαϙʔτ


    (ui.js | vue-cli-ui.js) • UI API ʹΑΓ Vue CLI UIΛ֦ு͢Δ ͜ͱ͕ग़དྷΔ
  44. UI API ʹΑΓग़དྷΔ͜ͱ • ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • λεΫͷΧελϚΠζ • ϓϩϯϓτͷΧελϚΠζ •

    ΫϥΠΞϯτΞυΦϯʹΑΔ֦ு • ΧελϜϏϡʔʹΑΔ֦ு
  45. UI API ͕ఏڙ͢Δ΋ͷ • ΫϥΠΞϯτ/αʔόؒͷσʔλڞ༗ • ϓϥάΠϯΞΫγϣϯ • IPC •

    ϩʔΧϧετϨʔδ • ϓϩάϨεදࣔ • ϑοΫɺαδΣενϣϯɺ௨஌ɺ… etc
  46. ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • UI API Ͱઃఆը໘ΧελϚΠζͰ͖Δ ্ه࿮Α͏ʹಠࣗʹίϯϑΟάϨʔγϣϯΛ௥Ճͯ͠ɺ ࡉ͔͘ΧελϚΠζͰ͖Δ

  47. ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • describeConfig Λར༻ͯ͠ίϯϑΟάϨʔ γϣϯΛఆٛ͢Δ

  48. • λεΫ΋ಉ༷UI APIͰΧελϚΠζͰ͖Δ λεΫͷΧελϚΠζ ্ه࿮Α͏ʹɺطଘͷpackage.jsonͷscriptsͷλεΫʹ ରͯ͠ΧελϚΠζͨ͠Γɺ৽نʹλεΫΛ௥Ճ͢Δ͜ ͱ΋Ͱ͖Δ

  49. λεΫͷΧελϚΠζ • describeTaskΛར༻ͯ͠طଘͷλεΫͷΧ ελϚΠζ

  50. λεΫͷΧελϚΠζ • λεΫύϥϝʔλʔ ΋ఆٛ͢Δ͜ͱ͕ Ͱ͖Δ

  51. λεΫͷΧελϚΠζ • ಠࣗλεΫͷఆٛ͸addTaskΛར༻͢Δ ޙड़͢ΔΫϥΠΞϯτΞυΦϯΛར༻͢Δͱ͞Βʹߴ౓ ͳΧελϚΠζՄೳ

  52. λεΫͷΧελϚΠζͷྫ • Vue CLI UI ͷ build

  53. ΫϥΠΞϯτΞυΦϯ • ಠࣗͷVue ίϯ ϙʔωϯτΛ Vue CLI UI ಺Ͱ ΞυΦϯͱͯ͠

    ಈ࡞ͤ͞Δ͜ͱ Ͱ֦ுͰ͖Δ
  54. ΫϥΠΞϯτΞυΦϯ • ΫϥΠΞϯτΞ υΦϯͰ࣮૷͠ ͯVueίϯϙʔω ϯτར༻Ͱ͖Δ ෦෼ • λεΫͷϏϡʔ •

    ΧελϜϏϡʔ serve | build λεΫͷϏϡʔ ϓϩδΣΫτφϏήʔγϣϯ ʹΧελϜϏϡʔΛ௥ՃՄೳ
  55. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • vue create ͰϓϩδΣΫτΛ࡞੒͠ɺઃఆ Λ͢Δ vue create my-client-addon ࡞੒ͨ͠ϓϩδΣΫτʹ্هͷΑ

    ͏ͳvue.config.js Λ௥Ճ UI ϓϥάΠϯͱ͸ ผʹ࡞Δ
  56. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • main.js ΛҎԼͷΑ͏ʹɺClientAddon API ͰίϯϙʔωϯτΛొ࿥ͨ͠Γɺϧʔτ Λఆٛ͢ΔΑ͏มߋ͢Δ

  57. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • UIϓϥάΠϯͷ ui.js ͰҎԼͷΑ͏ʹΫϥ ΠΞϯτΞυΦϯΛొ࿥

  58. ΫϥΠΞϯτΞυΦϯͷ࢖͍ํ • ޙ͸ίϯϙʔωϯτΛ࢖༻Մೳͳ෦෼Ͱ ઃఆ͢Δ͚ͩ (ҎԼ͸ λεΫϏϡʔͷྫ)

  59. ΧελϜϏϡʔ • Vue CLI UI ͕ϢʔβʔʹΞϓϦͷΑ͏ͳ ੍ޚՄೳͳΤϦΞΛఏڙ

  60. ΧελϜϏϡʔͷ௥Ճํ๏ • ΫϥΠΞϯτΞυΦϯͱ UI API ͷ addView Λར༻͢Δ ΫϥΠΞϯτ ΞυΦϯ

    UI ϓϥάΠϯ
  61. Vue CLI UI ֦ுͷྫ • ࠃࡍԽ(i18n)؅ཧ

  62. Vue CLI UI ֦ு DEMO

  63. ΧελϜϏϡʔͷϢʔεέʔε • ࠃࡍԽରԠ • Storybook ϥΠΫͳσβΠφͱڠۀͰ͖Δ πʔϧ • Vue DevToolsϥΠΫͳσόοΪϯάπʔϧ

    • docz ϥΠΫͳυΩϡϝϯςʔγϣϯπʔ ϧ • … ͳͲ
  64. ΧελϜϏϡʔ ͷՄೳੑ

  65. ·ͱΊ

  66. • Vue CLI v3Ͱ͸ɺ͜Ε·Ͱͷ v2 Ͱͷ໰୊఺ɺ ݱঢ়ͷϑϩϯτΤϯυ։ൃπʔϧ؀ڥपΓͷ ਏ͍໰୊Λվળ͢ΔͨΊʹఏڙ͞ΕΔ • Vue

    ΞϓϦ։ൃϢʔβʔ͸ɺૉ௚ʹ Vue ެࣜ ʹఏڙ͢Δ Vue CLI Λར༻͢Δ͜ͱͰɺ޾ͤ ʹͳΕΔʂ • ։ൃπʔϧपΓͷߏஙɺπʔϧͷΞοϓάϨʔ υ౳͸ɺVue CLI ɺͦͯ͠ϓϥάΠϯ͕ݟͯ͘ ΕΔΑ͏ʹͳΔ ·ͱΊ
  67. • Vue CLI v3 ͷ໨ۄͱͯ͠ɺϓϥάΠϯγε ςϜ ͱ Vue CLI UI

    • ͜ΕΒʹΑΓɺVue CLI ެࣜͰ͸΋ͷ଍Γ ͳ͍ɺ։ൃ؀ڥΛڧԽ͢Δ͜ͱ͕Ͱ͖ΔΑ ͏ʹͳΔ • ͜ͷ݁Ռɺ͞Βʹੜ࢈ੑͷߴ͍։ൃ؀ڥΛ ߏங͢Δ͜ͱ͕ՄೳʹͳΔ ·ͱΊ
  68. ͱ͍͏Θ͚Ͱ ඇৗʹ ExcitingͳͷͰ

  69. https://twitter.com/kazu_pon/status/998630153843437568

  70. ΍ͬͯ ͍͖·͠ΐ͏ʂ

  71. One more thing …

  72. Vue Fes Japan 2018 ۙʑɺCFPืू΍ւ֎speakers৘ใΛ Ξφ΢ϯε͢Δ༧ఆ

  73. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ