Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue CLI v3
Search
kazupon
June 19, 2018
Programming
9
7.5k
Vue CLI v3
第69回 HTML5とか勉強会「UIフレームワーク最前線」の発表資料
https://html5j.connpass.com/event/89073/
kazupon
June 19, 2018
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.4k
Vue & Vite Rustify
kazupon
4
2k
Vue.jsエコシステム動向2023
kazupon
17
7.3k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
540
まちにまった Vue.js 3
kazupon
14
5.5k
Other Decks in Programming
See All in Programming
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
Jakarta EE meets AI
ivargrimstad
1
520
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
380
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Some more adventure of Happy Eyeballs
coe401_
2
190
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Featured
See All Featured
BBQ
matthewcrist
83
9.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Producing Creativity
orderedlist
PRO
340
39k
Web Components: a chance to create the future
zenorocha
309
42k
A better future with KSS
kneath
235
17k
Code Review Best Practice
trishagee
62
16k
Gamification - CAS2011
davidbonilla
79
5k
Debugging Ruby Performance
tmm1
72
12k
Agile that works and the tools we love
rasmusluckow
327
20k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Transcript
Vue CLI v3 HTML5J UIϑϨʔϜϫʔΫ࠷લઢ 2018.06.19 @kazupon
ࣗݾհ
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
͡Ίʹ
ࠓ͢͜ͱ
Vue CLI v3
ࠓ ͞ͳ͍͜ͱ
࠷৽ಈ MANABIYA https://speakerdeck.com/kazupon/vue-dot-jsfalsejin-hou-toci-shi-dai-webkai-fa-nituite?slide=1
ͦΕͰΓ͍ͨͳΒ… Vue Contributor Days https://www.youtube.com/watch?v=U38s3O1hh9k
·ͨ
ϩʔυϚοϓ https://github.com/vuejs/roadmap
ࢀরͯ͠Լ͍͞
Vue CLI v3
ݱࡏ RC.3 ! ·ͳ͘ϦϦʔεʂ
Vue CLI ͱ • Vue.js ΞϓϦ͚ͷ CLI ϕʔεͷ ։ൃπʔϧ
ओͳಛ
https://cli.vuejs.org/ Vue CLI ެࣜυΩϡϝϯτͷτοϓΑΓ
ͱɺ৭ʑͱ ͋Γ·͕͢
v3 ͷۄ
v3 ͷۄ • ϓϥάΠϯγεςϜ • Vue CLI Ϣʔβʔͷ֦ுੑͷఏڙ • Vue
CLI UI • CLI ͕ۤखͳϢʔβʔʹର͢Δαϙʔτ • UI APIͱUI ϓϥάΠϯγεςϜͷఏڙʹ ΑΔɺ͞ΒͳΔVue CLIͷ֦ுੑΛఏڙ ͞ΒͳΔDXఏڙͷແݶͷՄೳੑ
ϓϥάΠϯ γεςϜ
CLIϓϥάΠϯͷ࡞ͱར༻ • جຊతʹҎԼͷAPIΛར༻࣮ͯ͢͠Δ • Service • Generator • Prompt •
npmʹެ։͢Δ͜ͱͰɺϢʔβʔ͕ vue add ͰΠϯετʔϧͯ͠ར༻͢Δ͜ͱ͕Ͱ͖Δ
CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Service • webpackઃఆͷΧελϚΠζ • npm-scripts (via vue-cli-servie)ͷొ https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin
CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Generator • ςϯϓϨʔτͷੜ • طଘςϯϓϨʔτͷΧελϚΠζ https://cli.vuejs.org/dev-guide/plugin-dev.html#generator
CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Prompts • ର༰ͷΧελϚΠζ https://cli.vuejs.org/dev-guide/plugin-dev.html#prompts
CLIϓϥάΠϯͷྫ • ࠃࡍԽ(i18n)ͷΈΛಋೖ vue add i18n vue-cli-plugin-i18n my-app1 scafollding &
Env settings
CLIϓϥάΠϯͷϢʔεέʔε • Vue ͚ͷϥΠϒϥϦɺϑϨʔϜϫʔΫͷ ࣗಈΠϯετʔϧscafollding • ϓϩδΣΫτݻ༗ͷίʔυੜ • ϚΠάϨʔγϣϯπʔϧ •
σϓϩΠπʔϧ • … ͳͲ
Vue CLI UI
Vue CLI UI ͱʁ
CLI : Command line interface UI : User interface
Vue Command line interface User interface Vue CLI UI
– Evan You “Vue CLI UI is the UI for
the CLI.” “༁: Vue CLICLI͚ͷUIͰ͢ɻ”
Vue CLI UI ͷ࡞ऀ • ίΞνʔϜGuillaume Chau ࢯ ͷౖᔶͷ։ ൃʹΑΓര
https://guillaume-chau.info/
Vue CLI UI ͷ UI vue ui ίϚϯυ࣮ߦ… WebϒϥβʹGUIΞϓϦ͕ىಈ
Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄͻͱ௨
ΓͰ͖Δ • ϓϩδΣΫτ࡞ • CLIϓϥάΠϯՃ • ։ൃαʔόͷىಈ • ΞϓϦέʔγϣϯͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ
ϓϩδΣΫτ࡞
։ൃαʔόͷىಈ
webpackͷΠϯεϖΫγϣϯ
CLI ൛ʹͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτཧ • GUIϕʔεͷίϯϑΟάϨʔγϣϯ •
CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ … ͳͲ
ϓϩδΣΫτཧ
GUIϕʔεͷίϯϑΟάϨʔγϣϯ
CLIϓϥάΠϯݕࡧˍҰཡ
Vue CLI UI ͷ֦ுੑ • Vue CLI UIͰϓ ϥάΠϯγεςϜ Λαϙʔτ
(ui.js | vue-cli-ui.js) • UI API ʹΑΓ Vue CLI UIΛ֦ு͢Δ ͜ͱ͕ग़དྷΔ
UI API ʹΑΓग़དྷΔ͜ͱ • ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • λεΫͷΧελϚΠζ • ϓϩϯϓτͷΧελϚΠζ •
ΫϥΠΞϯτΞυΦϯʹΑΔ֦ு • ΧελϜϏϡʔʹΑΔ֦ு
UI API ͕ఏڙ͢Δͷ • ΫϥΠΞϯτ/αʔόؒͷσʔλڞ༗ • ϓϥάΠϯΞΫγϣϯ • IPC •
ϩʔΧϧετϨʔδ • ϓϩάϨεදࣔ • ϑοΫɺαδΣενϣϯɺ௨ɺ… etc
ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • UI API Ͱઃఆը໘ΧελϚΠζͰ͖Δ ্هΑ͏ʹಠࣗʹίϯϑΟάϨʔγϣϯΛՃͯ͠ɺ ࡉ͔͘ΧελϚΠζͰ͖Δ
ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • describeConfig Λར༻ͯ͠ίϯϑΟάϨʔ γϣϯΛఆٛ͢Δ
• λεΫಉ༷UI APIͰΧελϚΠζͰ͖Δ λεΫͷΧελϚΠζ ্هΑ͏ʹɺطଘͷpackage.jsonͷscriptsͷλεΫʹ ରͯ͠ΧελϚΠζͨ͠Γɺ৽نʹλεΫΛՃ͢Δ͜ ͱͰ͖Δ
λεΫͷΧελϚΠζ • describeTaskΛར༻ͯ͠طଘͷλεΫͷΧ ελϚΠζ
λεΫͷΧελϚΠζ • λεΫύϥϝʔλʔ ఆٛ͢Δ͜ͱ͕ Ͱ͖Δ
λεΫͷΧελϚΠζ • ಠࣗλεΫͷఆٛaddTaskΛར༻͢Δ ޙड़͢ΔΫϥΠΞϯτΞυΦϯΛར༻͢Δͱ͞Βʹߴ ͳΧελϚΠζՄೳ
λεΫͷΧελϚΠζͷྫ • Vue CLI UI ͷ build
ΫϥΠΞϯτΞυΦϯ • ಠࣗͷVue ίϯ ϙʔωϯτΛ Vue CLI UI Ͱ ΞυΦϯͱͯ͠
ಈ࡞ͤ͞Δ͜ͱ Ͱ֦ுͰ͖Δ
ΫϥΠΞϯτΞυΦϯ • ΫϥΠΞϯτΞ υΦϯͰ࣮͠ ͯVueίϯϙʔω ϯτར༻Ͱ͖Δ ෦ • λεΫͷϏϡʔ •
ΧελϜϏϡʔ serve | build λεΫͷϏϡʔ ϓϩδΣΫτφϏήʔγϣϯ ʹΧελϜϏϡʔΛՃՄೳ
ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • vue create ͰϓϩδΣΫτΛ࡞͠ɺઃఆ Λ͢Δ vue create my-client-addon ࡞ͨ͠ϓϩδΣΫτʹ্هͷΑ
͏ͳvue.config.js ΛՃ UI ϓϥάΠϯͱ ผʹ࡞Δ
ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • main.js ΛҎԼͷΑ͏ʹɺClientAddon API ͰίϯϙʔωϯτΛొͨ͠Γɺϧʔτ Λఆٛ͢ΔΑ͏มߋ͢Δ
ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • UIϓϥάΠϯͷ ui.js ͰҎԼͷΑ͏ʹΫϥ ΠΞϯτΞυΦϯΛొ
ΫϥΠΞϯτΞυΦϯͷ͍ํ • ޙίϯϙʔωϯτΛ༻Մೳͳ෦Ͱ ઃఆ͢Δ͚ͩ (ҎԼ λεΫϏϡʔͷྫ)
ΧελϜϏϡʔ • Vue CLI UI ͕ϢʔβʔʹΞϓϦͷΑ͏ͳ ੍ޚՄೳͳΤϦΞΛఏڙ
ΧελϜϏϡʔͷՃํ๏ • ΫϥΠΞϯτΞυΦϯͱ UI API ͷ addView Λར༻͢Δ ΫϥΠΞϯτ ΞυΦϯ
UI ϓϥάΠϯ
Vue CLI UI ֦ுͷྫ • ࠃࡍԽ(i18n)ཧ
Vue CLI UI ֦ு DEMO
ΧελϜϏϡʔͷϢʔεέʔε • ࠃࡍԽରԠ • Storybook ϥΠΫͳσβΠφͱڠۀͰ͖Δ πʔϧ • Vue DevToolsϥΠΫͳσόοΪϯάπʔϧ
• docz ϥΠΫͳυΩϡϝϯςʔγϣϯπʔ ϧ • … ͳͲ
ΧελϜϏϡʔ ͷՄೳੑ
·ͱΊ
• Vue CLI v3Ͱɺ͜Ε·Ͱͷ v2 Ͱͷɺ ݱঢ়ͷϑϩϯτΤϯυ։ൃπʔϧڥपΓͷ ਏ͍Λվળ͢ΔͨΊʹఏڙ͞ΕΔ • Vue
ΞϓϦ։ൃϢʔβʔɺૉʹ Vue ެࣜ ʹఏڙ͢Δ Vue CLI Λར༻͢Δ͜ͱͰɺͤ ʹͳΕΔʂ • ։ൃπʔϧपΓͷߏஙɺπʔϧͷΞοϓάϨʔ υɺVue CLI ɺͦͯ͠ϓϥάΠϯ͕ݟͯ͘ ΕΔΑ͏ʹͳΔ ·ͱΊ
• Vue CLI v3 ͷۄͱͯ͠ɺϓϥάΠϯγε ςϜ ͱ Vue CLI UI
• ͜ΕΒʹΑΓɺVue CLI ެࣜͰͷΓ ͳ͍ɺ։ൃڥΛڧԽ͢Δ͜ͱ͕Ͱ͖ΔΑ ͏ʹͳΔ • ͜ͷ݁Ռɺ͞Βʹੜ࢈ੑͷߴ͍։ൃڥΛ ߏங͢Δ͜ͱ͕ՄೳʹͳΔ ·ͱΊ
ͱ͍͏Θ͚Ͱ ඇৗʹ ExcitingͳͷͰ
https://twitter.com/kazu_pon/status/998630153843437568
ͬͯ ͍͖·͠ΐ͏ʂ
One more thing …
Vue Fes Japan 2018 ۙʑɺCFPืूւ֎speakersใΛ Ξφϯε͢Δ༧ఆ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ