Tweet
Tweet

Slide 1

Slide 1 text

Vue CLI 3͕
 ͏·ͪΘΔ͍ Ռ෺Ϧϯ @FruitRiin 2018/09/22 
 ʲୈ࢛ճʳJSϑϨʔϜϫʔΫ×ϏΞόογϡॳ৺ऀษڧձ

Slide 2

Slide 2 text

#sakenight4

Slide 3

Slide 3 text

ࣗݾ঺հ - Ռ෺Ϧϯ • Twitter@FruitRiin • גࣜձࣾORATTA←ιγϟήاը։ൃӡӦ
 αʔόʔΞϓϦέʔγϣϯΤϯδχΞ • ৬ۀPHPer • JS͕޷͖ɻVue.js͸͍͍ͧʂ

Slide 4

Slide 4 text

લճϚαΧϦʹඋ͑ͨਓ

Slide 5

Slide 5 text

લճɿϚαΧϦʹඋ͑Δ৺ಘ

Slide 6

Slide 6 text

લճͷ͓͞Β͍

Slide 7

Slide 7 text

2018/09/21 Nuxt 2.0 Release!

Slide 8

Slide 8 text

Ͱ΋ࠓճ͸ Vue CLI 3ͷ࿩

Slide 9

Slide 9 text

Vue CLIͱ͸ʁ • Vue.jsͷ؀ڥߏஙΛ΍ͬͯ͘ΕΔπʔϧ • ࠇ͍ը໘͔Β `vue init webpack projname` • ʮϘΠϥʔϓϨʔτʯͱ͍͏ܗͰ
 ࠷దͳϓϩδΣΫτͷ਽ܗΛ࡞Δ

Slide 10

Slide 10 text

͜͏͍͏΍ͭ

Slide 11

Slide 11 text

New: Vue CLI 3 • ਽ܗϓϩδΣΫτʹ
 ʮϓϦηοτʯͰબΜͰ࡞Δ • Vue CLI͔ΒϓϥάΠϯΛ௥Ճ • WebͰϓϩδΣΫτΛϚωʔδϝϯτ

Slide 12

Slide 12 text

͜Μͳ΍ͭ

Slide 13

Slide 13 text

ػೳΛબΜͰ

Slide 14

Slide 14 text

ઃఆΛมߋͯ͠

Slide 15

Slide 15 text

ىಈ΍Ϗϧυ

Slide 16

Slide 16 text

CLIͱ͸ʁ

Slide 17

Slide 17 text

ͱ͸͍͑ɺ
 Vue CLI3͸͍͍Ͱ͢Ͷɻ ΊͰͨ͠ΊͰͨ͠ɻ

Slide 18

Slide 18 text

Ͱ͸ઙ͍ͷͰ
 ΋͏ͪΐͬͱ͍͖·͠ΐ͏ɻ

Slide 19

Slide 19 text

Vue CLI 3 ͕͏·ͪΘΔ͍

Slide 20

Slide 20 text

උߟɿʮ͏·ͪΘΔ͍ʯͱ͸ • ʮ͏·͍ʯʴʮ͖΋ͪΘΔ͍ʯͷ଄ޠ • χίχίେඦՊ͋ͨΓΛಡΜͰͶʂ

Slide 21

Slide 21 text

ࠓ·ͰͷVueͱϥΠϒϥϦ

Slide 22

Slide 22 text

ྫɿVuexΛΠϯετʔϧ͢Δ 1.`npm install vuex` ͢Δ 2.vuexͷstoreΛ࡞Δ 3.vuexͷstoreΛimport, 
 VueͷΠϯελϯεʹؚΊΔ 4.vuexΛར༻͢ΔίʔυΛॻ͘

Slide 23

Slide 23 text

npm install vuex

Slide 24

Slide 24 text

vuexͷstoreΛ࡞Δ

Slide 25

Slide 25 text

importͯ͠ΠϯελϯεʹؚΊΔ

Slide 26

Slide 26 text

Լ४උ͕৭ʑඞཁ

Slide 27

Slide 27 text

ྫɿϘΠϥʔϓϨʔτΛ࢖͏ • `vue init webpack project` ͯ͠
 ର࿩ࣜͷ࣭໰ͷͳ͔Ͱ VuexΛར༻͢Δʹ Yes • VuexΛར༻͢ΔίʔυΛ࡞Δ

Slide 28

Slide 28 text

৽نͷϓϩδΣΫτͷΈ

Slide 29

Slide 29 text

͜Ε͔ΒͷVueͱϥΠϒϥϦ

Slide 30

Slide 30 text

VuexϓϥάΠϯΛΠϯετʔϧ • Vue CLI UI ্ͰʮVuexΛ௥ՃʯΛϙνΔ • ಋೖ͕ऴΘ͍ͬͯΔʂ • vuexΛར༻͢ΔίʔυΛॻ͘

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

ϓϥάΠϯ͕ϑΝΠϧΛ࡞ͬͯ͘ΕΔʂ

Slide 33

Slide 33 text

طଘͷϓϩδΣΫτʹ௥Ճ ઃఆ΄΅ෆཁ

Slide 34

Slide 34 text

ϓϥάΠϯ͸ԿΛ͢Δʁ • ϑΝΠϧ࡞੒ • ϑΝΠϧͷਖ਼نදݱஔ׵ • ىಈ࣌ʹϑοΫͯ͠confΛॻ͖׵͑Δ

Slide 35

Slide 35 text

ϓϥάΠϯ͸ԿΛ͢Δʁ • ϑΝΠϧ࡞੒ • ϑΝΠϧͷਖ਼نදݱஔ׵ • ىಈ࣌ʹϑοΫͯ͠confΛॻ͖׵͑Δ

Slide 36

Slide 36 text

ϓϩδΣΫτ΁ͷ
 ಋೖ·Ͱ΍ͬͯ͘ΕΔ
 ʢ΋ͷ΋͋Δʣ

Slide 37

Slide 37 text

ϓϩδΣΫτ͔ΒΈͨ
 conf͕͘͢͝খ͍͞

Slide 38

Slide 38 text

͍··Ͱ

Slide 39

Slide 39 text

ྫɿbuild.js

Slide 40

Slide 40 text

͜Ε͔Β

Slide 41

Slide 41 text

build ͱ conf 
 σΟϨΫτϦ͕ͳ͍ webpack.config.js ΋ͳ͍

Slide 42

Slide 42 text

ྫɿbabel.config.js

Slide 43

Slide 43 text

ࠩ෼ͳͷͰͱͯ΋୹͍

Slide 44

Slide 44 text

ϓϥάΠϯ͸ԿΛ͢Δʁ • ϑΝΠϧ࡞੒ • ϑΝΠϧͷਖ਼نදݱஔ׵ • ىಈ࣌ʹϑοΫͯ͠configΛॻ͖׵͑Δ

Slide 45

Slide 45 text

webpack΍ϥΠϒϥϦͷઃఆ͸ ϓϥάΠϯ͕ࡁ·ͤͯΔ

Slide 46

Slide 46 text

Vue CLIϓϥάΠϯͷ஫ҙ఺ • ௥ՃͰ͖ͯ΋࡟আͰ͖ͳ͍΋ͷ͕ଟ͍ • ௥Ճͷͨͼʹίϛοτͯ͠
 ໭ͤΔΑ͏ʹ͓ͯ͘͠ͱྑͦ͞͏

Slide 47

Slide 47 text

·ͱΊ • Vue CLI UI͸ࠇ͍ը໘Λໟݏ͍͢Δਓʹ΋
 ࢝Ί΍͘͢ͳΔͷͰ͸ʁʢvue cli uiͷىಈ͸ʁ • Vue CLI Pluginͷ͜͜·Ͱ͖͔ͨʂ
 ͱ͍͏͘Β͍ΏͱΓ࢓༷ʢ࡞Δਓ͸஍ࠈ࢓༷ • webpack.config.jsʹ΋͏೰·͞Εͳ͍

Slide 48

Slide 48 text

Vue.js͸͍͍ͧʂ Fin.