Vue CLI v3

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ