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 3.4
kazupon
13
3.8k
Vue & Vite Rustify
kazupon
4
1.7k
Vue.jsエコシステム動向2023
kazupon
17
6.8k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
930
Vue with Vite
kazupon
2
2.3k
State of Vue I18n
kazupon
3
500
まちにまった Vue.js 3
kazupon
14
5.3k
Native-ESM powered web dev build tool
kazupon
5
1.4k
Other Decks in Programming
See All in Programming
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
Building a Smaller App Binary
kateinoigakukun
2
200
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
270
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
[スクリプト] Swiftの型推論を学ぼう
omochi
0
110
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
8
2.2k
品質が高いコードって何?Rev2.1
ickx
1
490
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Building an army of robots
kneath
300
41k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
We Have a Design System, Now What?
morganepeng
42
6.7k
The Language of Interfaces
destraynor
150
23k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
For a Future-Friendly Web
brad_frost
170
8.9k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
RailsConf 2023
tenderlove
0
510
Faster Mobile Websites
deanohume
296
30k
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ใΛ Ξφϯε͢Δ༧ఆ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ