Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

大塚真言
September 27, 2019

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

大塚真言

September 27, 2019
Tweet

More Decks by 大塚真言

Other Decks in Programming

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