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.4k
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
2
570
Vue 3.4
kazupon
13
4k
Vue & Vite Rustify
kazupon
4
1.8k
Vue.jsエコシステム動向2023
kazupon
17
6.9k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
930
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
SIMD Parallel Programming with the Vector API
josepaumard
0
130
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
300
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Java 22 Overview
kishida
1
180
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Snowflakeで眠ったデータを起こそう!
estie
0
110
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing the Hi-DPI Web
ddemaree
276
33k
Done Done
chrislema
178
15k
The Mythical Team-Month
searls
216
42k
How STYLIGHT went responsive
nonsquared
92
4.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
The Language of Interfaces
destraynor
151
23k
Navigating Team Friction
lara
178
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
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ใΛ Ξφϯε͢Δ༧ఆ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ