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.8k
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
わたしのOSS活動
kazupon
3
530
Vapor Revolution
kazupon
3
3.7k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.4k
Vue.jsエコシステム動向2023
kazupon
17
8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
15k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
250
Software Architecture
hschwentner
6
2.3k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
990
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
142
24k
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Site-Speed That Sticks
csswizardry
13
920
The Language of Interfaces
destraynor
162
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
We Have a Design System, Now What?
morganepeng
53
7.8k
A Tale of Four Properties
chriscoyier
161
23k
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ใΛ Ξφϯε͢Δ༧ఆ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ