VueCLI3がうまちわるい

VueCLI3がめっちゃすごいよ！今までライブラリ追加とかで悩んでた人がきもちわるいくらいに！（褒めてる

Transcript

1. Vue CLI 3͕
 ͏·ͪΘΔ͍ Ռ෺Ϧϯ @FruitRiin 2018/09/22 
 ʲୈ࢛ճʳJSϑϨʔϜϫʔΫ×ϏΞόογϡॳ৺ऀษڧձ
2. #sakenight4
3. ࣗݾ঺հ - Ռ෺Ϧϯ • Twitter@FruitRiin • גࣜձࣾORATTA←ιγϟήاը։ൃӡӦ
 αʔόʔΞϓϦέʔγϣϯΤϯδχΞ • ৬ۀPHPer • JS͕޷͖ɻVue.js͸͍͍ͧʂ
4. લճϚαΧϦʹඋ͑ͨਓ
5. લճɿϚαΧϦʹඋ͑Δ৺ಘ
6. લճͷ͓͞Β͍
7. 2018/09/21 Nuxt 2.0 Release!
8. Ͱ΋ࠓճ͸ Vue CLI 3ͷ࿩
9. Vue CLIͱ͸ʁ • Vue.jsͷ؀ڥߏஙΛ΍ͬͯ͘ΕΔπʔϧ • ࠇ͍ը໘͔Β `vue init webpack projname` • ʮϘΠϥʔϓϨʔτʯͱ͍͏ܗͰ
 ࠷దͳϓϩδΣΫτͷ਽ܗΛ࡞Δ
10. ͜͏͍͏΍ͭ
11. New: Vue CLI 3 • ਽ܗϓϩδΣΫτʹ
 ʮϓϦηοτʯͰબΜͰ࡞Δ • Vue CLI͔ΒϓϥάΠϯΛ௥Ճ • WebͰϓϩδΣΫτΛϚωʔδϝϯτ
12. ͜Μͳ΍ͭ
13. ػೳΛબΜͰ
14. ઃఆΛมߋͯ͠
15. ىಈ΍Ϗϧυ
16. CLIͱ͸ʁ
17. ͱ͸͍͑ɺ
 Vue CLI3͸͍͍Ͱ͢Ͷɻ ΊͰͨ͠ΊͰͨ͠ɻ
18. Ͱ͸ઙ͍ͷͰ
 ΋͏ͪΐͬͱ͍͖·͠ΐ͏ɻ
19. Vue CLI 3 ͕͏·ͪΘΔ͍
20. උߟɿʮ͏·ͪΘΔ͍ʯͱ͸ • ʮ͏·͍ʯʴʮ͖΋ͪΘΔ͍ʯͷ଄ޠ • χίχίେඦՊ͋ͨΓΛಡΜͰͶʂ
21. ࠓ·ͰͷVueͱϥΠϒϥϦ
22. ྫɿVuexΛΠϯετʔϧ͢Δ 1.`npm install vuex` ͢Δ 2.vuexͷstoreΛ࡞Δ 3.vuexͷstoreΛimport, 
 VueͷΠϯελϯεʹؚΊΔ 4.vuexΛར༻͢ΔίʔυΛॻ͘
23. npm install vuex
24. vuexͷstoreΛ࡞Δ
25. importͯ͠ΠϯελϯεʹؚΊΔ
26. Լ४උ͕৭ʑඞཁ
27. ྫɿϘΠϥʔϓϨʔτΛ࢖͏ • `vue init webpack project` ͯ͠
 ର࿩ࣜͷ࣭໰ͷͳ͔Ͱ VuexΛར༻͢Δʹ Yes • VuexΛར༻͢ΔίʔυΛ࡞Δ
28. ৽نͷϓϩδΣΫτͷΈ
29. ͜Ε͔ΒͷVueͱϥΠϒϥϦ
30. VuexϓϥάΠϯΛΠϯετʔϧ • Vue CLI UI ্ͰʮVuexΛ௥ՃʯΛϙνΔ • ಋೖ͕ऴΘ͍ͬͯΔʂ • vuexΛར༻͢ΔίʔυΛॻ͘
32. ϓϥάΠϯ͕ϑΝΠϧΛ࡞ͬͯ͘ΕΔʂ
33. طଘͷϓϩδΣΫτʹ௥Ճ ઃఆ΄΅ෆཁ
34. ϓϥάΠϯ͸ԿΛ͢Δʁ • ϑΝΠϧ࡞੒ • ϑΝΠϧͷਖ਼نදݱஔ׵ • ىಈ࣌ʹϑοΫͯ͠confΛॻ͖׵͑Δ
35. ϓϥάΠϯ͸ԿΛ͢Δʁ • ϑΝΠϧ࡞੒ • ϑΝΠϧͷਖ਼نදݱஔ׵ • ىಈ࣌ʹϑοΫͯ͠confΛॻ͖׵͑Δ
36. ϓϩδΣΫτ΁ͷ
 ಋೖ·Ͱ΍ͬͯ͘ΕΔ
 ʢ΋ͷ΋͋Δʣ
37. ϓϩδΣΫτ͔ΒΈͨ
 conf͕͘͢͝খ͍͞
38. ͍··Ͱ
39. ྫɿbuild.js
40. ͜Ε͔Β
41. build ͱ conf 
 σΟϨΫτϦ͕ͳ͍ webpack.config.js ΋ͳ͍
42. ྫɿbabel.config.js
43. ࠩ෼ͳͷͰͱͯ΋୹͍
44. ϓϥάΠϯ͸ԿΛ͢Δʁ • ϑΝΠϧ࡞੒ • ϑΝΠϧͷਖ਼نදݱஔ׵ • ىಈ࣌ʹϑοΫͯ͠configΛॻ͖׵͑Δ
45. webpack΍ϥΠϒϥϦͷઃఆ͸ ϓϥάΠϯ͕ࡁ·ͤͯΔ
46. Vue CLIϓϥάΠϯͷ஫ҙ఺ • ௥ՃͰ͖ͯ΋࡟আͰ͖ͳ͍΋ͷ͕ଟ͍ • ௥Ճͷͨͼʹίϛοτͯ͠
 ໭ͤΔΑ͏ʹ͓ͯ͘͠ͱྑͦ͞͏
47. ·ͱΊ • Vue CLI UI͸ࠇ͍ը໘Λໟݏ͍͢Δਓʹ΋
 ࢝Ί΍͘͢ͳΔͷͰ͸ʁʢvue cli uiͷىಈ͸ʁ • Vue CLI Pluginͷ͜͜·Ͱ͖͔ͨʂ
 ͱ͍͏͘Β͍ΏͱΓ࢓༷ʢ࡞Δਓ͸஍ࠈ࢓༷ • webpack.config.jsʹ΋͏೰·͞Εͳ͍
48. Vue.js͸͍͍ͧʂ Fin.