今一番イケてるVue.js製管理画面テンプレートのご紹介.pdf

Transcript

1. ࠓҰ൪ΠέͯΔVue.js੡؅ཧը໘ ςϯϓϨʔτͷ͝঺հ 2019/09/27 WebφΠτٶ࡚ vol.6 େ௩ਅݴ
2. ࣗݾ঺հ ɾTwitterɿ͠Μ͛Μ@ٶ࡚ ɾձࣾɹɿ߹ಉձࣾϊϚυϦ ୅ද ɾεΩϧɿLaravel, Vue.js, FirebaseͳͲ ɾࣄۀɹɿWebγεςϜͷडୗ։ൃ ɾैۀһɿࣗ෼ + Πϯλʔϯ1໊ ɾझຯɹɿα΢φ, αʔϑΟϯ, Ωϟϯϓ ϑϦʔϥϯεɾ෭ۀɾΠϯλʔϯ
   ืूͯ͠·͢ʂʂ
   Ұॹʹಇ͖·ͤΜ͔ʁʁ
4. ؅ཧը໘ Ͳ͏΍ͬͯ࡞ͬͯ·͢ʁ
5. ؅ཧը໘ͷ࡞Γํ σβΠϯ੍࡞
   ϑϩϯτΤϯυ࣮૷
   όοΫΤϯυ࣮૷
   ˣ
   ϑϧεΫϥονͰ
   ϑϩϯτΛ࣮૷ ༧ࢉ͋Γ σβΠϯ੍࡞
   ϑϩϯτΤϯυ࣮૷
   όοΫΤϯυ࣮૷
   ˣ
   
   σβΠϯςϯϓϨʔτͰ
   ϑϩϯτΛ࣮૷ ༧ࢉͳ͠
8. ͱ͏ͱ͏ ݟ͚ͭ·ͨ͠ʂʂ
9. Vue-element-admin
11. vue-element-adminͱ͸ • Vue.js੡ͷUIϑϨʔϜϫʔΫ Element Λ࢖༻ • େن໛ͰෳࡶͳγϯάϧϖʔδΞϓϦέʔγϣ ϯͷߏங͕Մೳ • ແྉ • Githubελʔ਺ 40,000Ҏ্ ※vue-admin 9,000ɺvuestic-admin 6,000
12. ಛ௃ • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ Ϧߏ੒ʂ • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
14. ಛ௃ • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ Ϧߏ੒ʂ • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
16. ಛ௃ • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ Ϧߏ੒ʂ • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
18. ಛ௃ • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ Ϧߏ੒ʂ • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
19. ·ͱΊ • Vue.jsͷνϡʔτϦΞϧऴྃޙͷεςοϓ Ξοϓͱͯ͠৮ͬͯΈΔ͜ͱΛ͓͢͢Ί • vuex, vue-router, axiosͳͲͷvue.js։ൃͰ Α͘࢖͏ϥΠϒϥϦͷ࢖͍ํ΍ೝূೝՄͷ࣮ ૷ํ๏Λཧղ͢Δ͜ͱ͕Ͱ͖Δ
20. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ