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

Transcript

1. ࠓҰ൪ΠέͯΔVue.js੡؅ཧը໘
   ςϯϓϨʔτͷ͝঺հ
   2019/09/27 WebφΠτٶ࡚ vol.6
   େ௩ਅݴ
   

   View Slide

2. ࣗݾ঺հ
   ɾTwitterɿ͠Μ͛Μ@ٶ࡚
   ɾձࣾɹɿ߹ಉձࣾϊϚυϦ ୅ද
   ɾεΩϧɿLaravel, Vue.js, FirebaseͳͲ
   ɾࣄۀɹɿWebγεςϜͷडୗ։ൃ
   ɾैۀһɿࣗ෼ + Πϯλʔϯ1໊
   ɾझຯɹɿα΢φ, αʔϑΟϯ, Ωϟϯϓ
   ϑϦʔϥϯεɾ෭ۀɾΠϯλʔϯืूͯ͠·͢ʂʂ
   Ұॹʹಇ͖·ͤΜ͔ʁʁ
   

   View Slide

3. View Slide

4. ؅ཧը໘
   Ͳ͏΍ͬͯ࡞ͬͯ·͢ʁ
   

   View Slide

5. ؅ཧը໘ͷ࡞Γํ
   σβΠϯ੍࡞
   ϑϩϯτΤϯυ࣮૷
   όοΫΤϯυ࣮૷
   ˣ
   ϑϧεΫϥονͰ
   ϑϩϯτΛ࣮૷
   ༧ࢉ͋Γ
   σβΠϯ੍࡞
   ϑϩϯτΤϯυ࣮૷
   όοΫΤϯυ࣮૷
   ˣ
   σβΠϯςϯϓϨʔτͰ
   ϑϩϯτΛ࣮૷
   ༧ࢉͳ͠
   

   View Slide

6. View Slide

7. View Slide

8. ͱ͏ͱ͏
   ݟ͚ͭ·ͨ͠ʂʂ
   

   View Slide

9. Vue-element-admin
   

   View Slide

10. View Slide

11. vue-element-adminͱ͸
    • Vue.js੡ͷUIϑϨʔϜϫʔΫ Element Λ࢖༻
    • େن໛ͰෳࡶͳγϯάϧϖʔδΞϓϦέʔγϣ
    ϯͷߏங͕Մೳ
    • ແྉ
    • Githubελʔ਺ 40,000Ҏ্
    ※vue-admin 9,000ɺvuestic-admin 6,000
    

    View Slide

12. ಛ௃
    • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ
    Ϧߏ੒ʂ
    • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ
    • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ
    • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ
    • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
    

    View Slide

13. View Slide

14. ಛ௃
    • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ
    Ϧߏ੒ʂ
    • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ
    • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ
    • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ
    • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
    

    View Slide

15. View Slide

16. ಛ௃
    • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ
    Ϧߏ੒ʂ
    • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ
    • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ
    • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ
    • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
    

    View Slide

17. View Slide

18. ಛ௃
    • ๛෋ͳػೳͰ΋ࠔΒͳ͍ʂ෼͔Γ΍͍͢σΟϨΫτ
    Ϧߏ੒ʂ
    • ͻͳܗͷ׬੒౓͕ߴ͍ʂʂ
    • SPAͰओྲྀͷτʔΫϯೝূ͕౥ࡌࡁΈʂ
    • ෳ਺ϩʔϧʹରԠͨ͠ϖʔδ୯ҐͰͷΞΫηε੍ޚ
    • υΩϡϝϯτྑ͍ʂϖʔδ௥Ճͷखॱ·Ͱ͋Δʂ
    

    View Slide

19. ·ͱΊ
    • Vue.jsͷνϡʔτϦΞϧऴྃޙͷεςοϓ
    Ξοϓͱͯ͠৮ͬͯΈΔ͜ͱΛ͓͢͢Ί
    • vuex, vue-router, axiosͳͲͷvue.js։ൃͰ
    Α͘࢖͏ϥΠϒϥϦͷ࢖͍ํ΍ೝূೝՄͷ࣮
    ૷ํ๏Λཧղ͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

20. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide

21. View Slide

22. View Slide