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
41
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
87
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
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Applications with DynamoDB
mza
93
6.2k
Fireside Chat
paigeccino
34
3.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
Embracing the Ebb and Flow
colly
84
4.6k
A Tale of Four Properties
chriscoyier
158
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Being A Developer After 40
akosma
89
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
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.