Vue CLI v3 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

͸͡Ίʹ

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱ

Slide 6

Slide 6 text

Vue CLI v3

Slide 7

Slide 7 text

ࠓ೔ ࿩͞ͳ͍͜ͱ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

·ͨ͸

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ࢀরͯ͠Լ͍͞

Slide 13

Slide 13 text

Vue CLI v3

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ओͳಛ௃

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ͱɺ৭ʑͱ ͋Γ·͕͢

Slide 19

Slide 19 text

v3 ͷ໨ۄ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ϓϥάΠϯ γεςϜ

Slide 22

Slide 22 text

CLIϓϥάΠϯͷ࡞੒ͱར༻ • جຊతʹҎԼͷAPIΛར༻࣮ͯ͠૷͢Δ • Service • Generator • Prompt • npmʹެ։͢Δ͜ͱͰɺϢʔβʔ͕ vue add ౳ͰΠϯετʔϧͯ͠ར༻͢Δ͜ͱ͕Ͱ͖Δ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Vue CLI UI

Slide 29

Slide 29 text

Vue CLI UI ͱ͸ʁ

Slide 30

Slide 30 text

CLI : Command line interface UI : User interface

Slide 31

Slide 31 text

Vue Command line interface User interface Vue CLI UI

Slide 32

Slide 32 text

– Evan You “Vue CLI UI is the UI for the CLI.” “༁: Vue CLI͸CLI޲͚ͷUIͰ͢ɻ”

Slide 33

Slide 33 text

Vue CLI UI ͷ࡞ऀ • ίΞνʔϜGuillaume Chau ࢯ ͷౖᔶͷ։ ൃʹΑΓര஀ https://guillaume-chau.info/

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨ ΓͰ͖Δ • ϓϩδΣΫτ࡞੒ • CLIϓϥάΠϯ௥Ճ • ։ൃαʔόͷىಈ • ΞϓϦέʔγϣϯͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ

Slide 36

Slide 36 text

ϓϩδΣΫτ࡞੒

Slide 37

Slide 37 text

։ൃαʔόͷىಈ

Slide 38

Slide 38 text

webpackͷΠϯεϖΫγϣϯ

Slide 39

Slide 39 text

CLI ൛ʹ͸ͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτ؅ཧ • GUIϕʔεͷίϯϑΟάϨʔγϣϯ • CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ … ͳͲ

Slide 40

Slide 40 text

ϓϩδΣΫτ؅ཧ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

CLIϓϥάΠϯݕࡧˍҰཡ

Slide 43

Slide 43 text

Vue CLI UI ͷ֦ுੑ • Vue CLI UIͰ΋ϓ ϥάΠϯγεςϜ Λαϙʔτ  (ui.js | vue-cli-ui.js) • UI API ʹΑΓ Vue CLI UIΛ֦ு͢Δ ͜ͱ͕ग़དྷΔ

Slide 44

Slide 44 text

UI API ʹΑΓग़དྷΔ͜ͱ • ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • λεΫͷΧελϚΠζ • ϓϩϯϓτͷΧελϚΠζ • ΫϥΠΞϯτΞυΦϯʹΑΔ֦ு • ΧελϜϏϡʔʹΑΔ֦ு

Slide 45

Slide 45 text

UI API ͕ఏڙ͢Δ΋ͷ • ΫϥΠΞϯτ/αʔόؒͷσʔλڞ༗ • ϓϥάΠϯΞΫγϣϯ • IPC • ϩʔΧϧετϨʔδ • ϓϩάϨεදࣔ • ϑοΫɺαδΣενϣϯɺ௨஌ɺ… etc

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ΫϥΠΞϯτΞυΦϯ • ಠࣗͷVue ίϯ ϙʔωϯτΛ Vue CLI UI ಺Ͱ ΞυΦϯͱͯ͠ ಈ࡞ͤ͞Δ͜ͱ Ͱ֦ுͰ͖Δ

Slide 54

Slide 54 text

ΫϥΠΞϯτΞυΦϯ • ΫϥΠΞϯτΞ υΦϯͰ࣮૷͠ ͯVueίϯϙʔω ϯτར༻Ͱ͖Δ ෦෼ • λεΫͷϏϡʔ • ΧελϜϏϡʔ serve | build λεΫͷϏϡʔ ϓϩδΣΫτφϏήʔγϣϯ ʹΧελϜϏϡʔΛ௥ՃՄೳ

Slide 55

Slide 55 text

ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • vue create ͰϓϩδΣΫτΛ࡞੒͠ɺઃఆ Λ͢Δ vue create my-client-addon ࡞੒ͨ͠ϓϩδΣΫτʹ্هͷΑ ͏ͳvue.conﬁg.js Λ௥Ճ UI ϓϥάΠϯͱ͸ ผʹ࡞Δ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Vue CLI UI ֦ு DEMO

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ΧελϜϏϡʔ ͷՄೳੑ

Slide 65

Slide 65 text

·ͱΊ

Slide 66

Slide 66 text

• Vue CLI v3Ͱ͸ɺ͜Ε·Ͱͷ v2 Ͱͷ໰୊఺ɺ ݱঢ়ͷϑϩϯτΤϯυ։ൃπʔϧ؀ڥपΓͷ ਏ͍໰୊Λվળ͢ΔͨΊʹఏڙ͞ΕΔ • Vue ΞϓϦ։ൃϢʔβʔ͸ɺૉ௚ʹ Vue ެࣜ ʹఏڙ͢Δ Vue CLI Λར༻͢Δ͜ͱͰɺ޾ͤ ʹͳΕΔʂ • ։ൃπʔϧपΓͷߏஙɺπʔϧͷΞοϓάϨʔ υ౳͸ɺVue CLI ɺͦͯ͠ϓϥάΠϯ͕ݟͯ͘ ΕΔΑ͏ʹͳΔ ·ͱΊ

Slide 67

Slide 67 text

• Vue CLI v3 ͷ໨ۄͱͯ͠ɺϓϥάΠϯγε ςϜ ͱ Vue CLI UI • ͜ΕΒʹΑΓɺVue CLI ެࣜͰ͸΋ͷ଍Γ ͳ͍ɺ։ൃ؀ڥΛڧԽ͢Δ͜ͱ͕Ͱ͖ΔΑ ͏ʹͳΔ • ͜ͷ݁Ռɺ͞Βʹੜ࢈ੑͷߴ͍։ൃ؀ڥΛ ߏங͢Δ͜ͱ͕ՄೳʹͳΔ ·ͱΊ

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

΍ͬͯ ͍͖·͠ΐ͏ʂ

Slide 71

Slide 71 text

One more thing …

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ