Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 CLICLI͚ͷ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
ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • describeConfig Λར༻ͯ͠ίϯϑΟάϨʔ γϣϯΛఆٛ͢Δ
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.config.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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ