Vue CLI v3

Transcript

1. 1.

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

2. 2.

   ࣗݾ঺հ

3. 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. 4.

   ͸͡Ίʹ

5. 5.

   ࠓ೔࿩͢͜ͱ

6. 6.

   Vue CLI v3

7. 7.

   ࠓ೔ ࿩͞ͳ͍͜ͱ

8. 8.

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

9. 9.

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

10. 10.

    ·ͨ͸

11. 11.

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

12. 12.

    ࢀরͯ͠Լ͍͞

13. 13.

    Vue CLI v3

14. 14.

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

15. 15.

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

16. 16.

    ओͳಛ௃

17. 17.

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

18. 18.

    ͱɺ৭ʑͱ ͋Γ·͕͢

19. 19.

    v3 ͷ໨ۄ

20. 20.

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

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

    ϓϥάΠϯ γεςϜ

22. 22.

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

    npmʹެ։͢Δ͜ͱͰɺϢʔβʔ͕ vue add ౳ͰΠϯετʔϧͯ͠ར༻͢Δ͜ͱ͕Ͱ͖Δ
23. 23.

    CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Service • webpackઃఆͷΧελϚΠζ • npm-scripts (via vue-cli-servie)ͷొ࿥ https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin

24. 24.

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

25. 25.

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

26. 26.

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

    Env settings
27. 27.

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

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

    Vue CLI UI

29. 29.

    Vue CLI UI ͱ͸ʁ

30. 30.

    CLI : Command line interface UI : User interface

31. 31.

    Vue Command line interface User interface Vue CLI UI

32. 32.

    – Evan You “Vue CLI UI is the UI for

    the CLI.” “༁: Vue CLI͸CLI޲͚ͷUIͰ͢ɻ”
33. 33.

    Vue CLI UI ͷ࡞ऀ • ίΞνʔϜGuillaume Chau ࢯ ͷౖᔶͷ։ ൃʹΑΓര஀

    https://guillaume-chau.info/
34. 34.

    Vue CLI UI ͷ UI vue ui ίϚϯυ࣮ߦ… Webϒϥ΢βʹGUIΞϓϦ͕ىಈ

35. 35.

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

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

    ϓϩδΣΫτ࡞੒

37. 37.

    ։ൃαʔόͷىಈ

38. 38.

    webpackͷΠϯεϖΫγϣϯ

39. 39.

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

    CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ … ͳͲ
40. 40.

    ϓϩδΣΫτ؅ཧ

41. 41.

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

42. 42.

    CLIϓϥάΠϯݕࡧˍҰཡ

43. 43.

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


    (ui.js | vue-cli-ui.js) • UI API ʹΑΓ Vue CLI UIΛ֦ு͢Δ ͜ͱ͕ग़དྷΔ
44. 44.

    UI API ʹΑΓग़དྷΔ͜ͱ • ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • λεΫͷΧελϚΠζ • ϓϩϯϓτͷΧελϚΠζ •

    ΫϥΠΞϯτΞυΦϯʹΑΔ֦ு • ΧελϜϏϡʔʹΑΔ֦ு
45. 45.

    UI API ͕ఏڙ͢Δ΋ͷ • ΫϥΠΞϯτ/αʔόؒͷσʔλڞ༗ • ϓϥάΠϯΞΫγϣϯ • IPC •

    ϩʔΧϧετϨʔδ • ϓϩάϨεදࣔ • ϑοΫɺαδΣενϣϯɺ௨஌ɺ… etc
46. 46.

    ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • UI API Ͱઃఆը໘ΧελϚΠζͰ͖Δ ্ه࿮Α͏ʹಠࣗʹίϯϑΟάϨʔγϣϯΛ௥Ճͯ͠ɺ ࡉ͔͘ΧελϚΠζͰ͖Δ

47. 47.

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

48. 48.

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

49. 49.

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

50. 50.

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

51. 51.

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

52. 52.

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

53. 53.

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

    ಈ࡞ͤ͞Δ͜ͱ Ͱ֦ுͰ͖Δ
54. 54.

    ΫϥΠΞϯτΞυΦϯ • ΫϥΠΞϯτΞ υΦϯͰ࣮૷͠ ͯVueίϯϙʔω ϯτར༻Ͱ͖Δ ෦෼ • λεΫͷϏϡʔ •

    ΧελϜϏϡʔ serve | build λεΫͷϏϡʔ ϓϩδΣΫτφϏήʔγϣϯ ʹΧελϜϏϡʔΛ௥ՃՄೳ
55. 55.

    ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • vue create ͰϓϩδΣΫτΛ࡞੒͠ɺઃఆ Λ͢Δ vue create my-client-addon ࡞੒ͨ͠ϓϩδΣΫτʹ্هͷΑ

    ͏ͳvue.config.js Λ௥Ճ UI ϓϥάΠϯͱ͸ ผʹ࡞Δ
56. 56.

    ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • main.js ΛҎԼͷΑ͏ʹɺClientAddon API ͰίϯϙʔωϯτΛొ࿥ͨ͠Γɺϧʔτ Λఆٛ͢ΔΑ͏มߋ͢Δ

57. 57.

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

58. 58.

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

59. 59.

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

60. 60.

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

    UI ϓϥάΠϯ
61. 61.

    Vue CLI UI ֦ுͷྫ • ࠃࡍԽ(i18n)؅ཧ

62. 62.

    Vue CLI UI ֦ு DEMO

63. 63.

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

    • docz ϥΠΫͳυΩϡϝϯςʔγϣϯπʔ ϧ • … ͳͲ
64. 64.

    ΧελϜϏϡʔ ͷՄೳੑ

65. 65.

    ·ͱΊ

66. 66.

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

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

    • Vue CLI v3 ͷ໨ۄͱͯ͠ɺϓϥάΠϯγε ςϜ ͱ Vue CLI UI

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

    ͱ͍͏Θ͚Ͱ ඇৗʹ ExcitingͳͷͰ

69. 69.

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

70. 70.

    ΍ͬͯ ͍͖·͠ΐ͏ʂ

71. 71.

    One more thing …

72. 72.

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

73. 73.

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