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
VueCLI3がうまちわるい
Search
果物リン
September 22, 2018
0
530
VueCLI3がうまちわるい
VueCLI3がめっちゃすごいよ!今までライブラリ追加とかで悩んでた人がきもちわるいくらいに!(褒めてる
果物リン
September 22, 2018
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
42
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
88
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
We Have a Design System, Now What?
morganepeng
51
7.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Building Adaptive Systems
keathley
40
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
For a Future-Friendly Web
brad_frost
176
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Documentation Writing (for coders)
carmenintech
68
4.6k
Transcript
Vue CLI 3͕ ͏·ͪΘΔ͍ ՌϦϯ @FruitRiin 2018/09/22 ʲୈ࢛ճʳJSϑϨʔϜϫʔΫ×ϏΞόογϡॳ৺ऀษڧձ
#sakenight4
ࣗݾհ - ՌϦϯ • Twitter@FruitRiin • גࣜձࣾORATTA←ιγϟήاը։ൃӡӦ αʔόʔΞϓϦέʔγϣϯΤϯδχΞ • ৬ۀPHPer
• JS͕͖ɻVue.js͍͍ͧʂ
લճϚαΧϦʹඋ͑ͨਓ
લճɿϚαΧϦʹඋ͑Δ৺ಘ
લճͷ͓͞Β͍
2018/09/21 Nuxt 2.0 Release!
Ͱࠓճ Vue CLI 3ͷ
Vue CLIͱʁ • Vue.jsͷڥߏஙΛͬͯ͘ΕΔπʔϧ • ࠇ͍ը໘͔Β `vue init webpack projname`
• ʮϘΠϥʔϓϨʔτʯͱ͍͏ܗͰ ࠷దͳϓϩδΣΫτͷܗΛ࡞Δ
͜͏͍͏ͭ
New: Vue CLI 3 • ܗϓϩδΣΫτʹ ʮϓϦηοτʯͰબΜͰ࡞Δ • Vue CLI͔ΒϓϥάΠϯΛՃ
• WebͰϓϩδΣΫτΛϚωʔδϝϯτ
͜Μͳͭ
ػೳΛબΜͰ
ઃఆΛมߋͯ͠
ىಈϏϧυ
CLIͱʁ
ͱ͍͑ɺ Vue CLI3͍͍Ͱ͢Ͷɻ ΊͰͨ͠ΊͰͨ͠ɻ
Ͱઙ͍ͷͰ ͏ͪΐͬͱ͍͖·͠ΐ͏ɻ
Vue CLI 3 ͕͏·ͪΘΔ͍
උߟɿʮ͏·ͪΘΔ͍ʯͱ • ʮ͏·͍ʯʴʮ͖ͪΘΔ͍ʯͷޠ • χίχίେඦՊ͋ͨΓΛಡΜͰͶʂ
ࠓ·ͰͷVueͱϥΠϒϥϦ
ྫɿVuexΛΠϯετʔϧ͢Δ 1.`npm install vuex` ͢Δ 2.vuexͷstoreΛ࡞Δ 3.vuexͷstoreΛimport, VueͷΠϯελϯεʹؚΊΔ 4.vuexΛར༻͢ΔίʔυΛॻ͘
npm install vuex
vuexͷstoreΛ࡞Δ
importͯ͠ΠϯελϯεʹؚΊΔ
Լ४උ͕৭ʑඞཁ
ྫɿϘΠϥʔϓϨʔτΛ͏ • `vue init webpack project` ͯ͠ ରࣜͷ࣭ͷͳ͔Ͱ VuexΛར༻͢Δʹ Yes
• VuexΛར༻͢ΔίʔυΛ࡞Δ
৽نͷϓϩδΣΫτͷΈ
͜Ε͔ΒͷVueͱϥΠϒϥϦ
VuexϓϥάΠϯΛΠϯετʔϧ • Vue CLI UI ্ͰʮVuexΛՃʯΛϙνΔ • ಋೖ͕ऴΘ͍ͬͯΔʂ • vuexΛར༻͢ΔίʔυΛॻ͘
None
ϓϥάΠϯ͕ϑΝΠϧΛ࡞ͬͯ͘ΕΔʂ
طଘͷϓϩδΣΫτʹՃ ઃఆ΄΅ෆཁ
ϓϥάΠϯԿΛ͢Δʁ • ϑΝΠϧ࡞ • ϑΝΠϧͷਖ਼نදݱஔ • ىಈ࣌ʹϑοΫͯ͠confΛॻ͖͑Δ
ϓϥάΠϯԿΛ͢Δʁ • ϑΝΠϧ࡞ • ϑΝΠϧͷਖ਼نදݱஔ • ىಈ࣌ʹϑοΫͯ͠confΛॻ͖͑Δ
ϓϩδΣΫτͷ ಋೖ·Ͱͬͯ͘ΕΔ ʢͷ͋Δʣ
ϓϩδΣΫτ͔ΒΈͨ conf͕͘͢͝খ͍͞
͍··Ͱ
ྫɿbuild.js
͜Ε͔Β
build ͱ conf σΟϨΫτϦ͕ͳ͍ webpack.config.js ͳ͍
ྫɿbabel.config.js
ࠩͳͷͰͱ͍ͯ
ϓϥάΠϯԿΛ͢Δʁ • ϑΝΠϧ࡞ • ϑΝΠϧͷਖ਼نදݱஔ • ىಈ࣌ʹϑοΫͯ͠configΛॻ͖͑Δ
webpackϥΠϒϥϦͷઃఆ ϓϥάΠϯ͕ࡁ·ͤͯΔ
Vue CLIϓϥάΠϯͷҙ • ՃͰ͖ͯআͰ͖ͳ͍ͷ͕ଟ͍ • Ճͷͨͼʹίϛοτͯ͠ ͤΔΑ͏ʹ͓ͯ͘͠ͱྑͦ͞͏
·ͱΊ • Vue CLI UIࠇ͍ը໘Λໟݏ͍͢Δਓʹ ࢝Ί͘͢ͳΔͷͰʁʢvue cli uiͷىಈʁ • Vue
CLI Pluginͷ͜͜·Ͱ͖͔ͨʂ ͱ͍͏͘Β͍ΏͱΓ༷ʢ࡞Δਓࠈ༷ • webpack.config.jsʹ͏·͞Εͳ͍
Vue.js͍͍ͧʂ Fin.