Vuetifyで管理画面ツクール.pdf

Transcript

1. 7VFUJGZͰ
   ؅ཧը໘πΫʔϧ
2. ࠓճͷςʔϚ 7VFUJGZͰ؅ཧը໘πΫʔϧʂ
3. ؅ཧը໘͸͓޷͖Ͱ͔͢ʁ
4. ؅ཧը໘ͷΠϝʔδ w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ
   w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘ ͘͞ͳ͍ʁ
5. ؅ཧը໘ͷΠϝʔδ w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ
   w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘ ͘͞ͳ͍ʁ
6. 443ͷମݧΛଛͶͣʹ
   ͞Βʹ
   ϦονͰ࢖͍΍͍͢
   ؅ཧը໘ΛπΫʔϧʂ
7. ͱ͍͏Θ͚Ͱ
   ຊ୊
8. ಈ࡞؀ڥ w 7VF
   
   w /VYUKT
   
   w 7VFUJGZ
   
   w NPEF
   bTQB`
   w 7VFY
   
   w 7VFSPVUFS
   
9. EFNP༻ͷϦϙδτϦ w IUUQTHJUIVCDPNCPPJOLWVFUJGZEFNP
10. ಥવͰ͕͢
11. ؅ཧը໘Λ
    41"ʹ͠Α͏ͱࢥ͚ͬͨͲ
    ҙ֎ͱ΍Δ͜ͱଟͯ͘
    πϥͨΜʂʂ
12. ͜Μͳܦݧ͸
    ͋Γ·ͤΜ͔ʁ
13. Կ͕πϥͨΜ͔ w σʔλϕʔεͷσʔλΛҰཡදࣔ͸WEBUBUBCMFͰαΫο ͱͰ͖͚ͨͲɺݕࡧϑΥʔϜͷ֤߲໨Λ63-ʹϚοϐϯ ά͢Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ
    w ͱ͍͏͔ͦ΋ͦ΋Ͳ͏΍Δͷʼʻ
14. σʔλϕʔεͷσʔλΛҰཡද ࣔ͸WEBUBUBCMFͰαΫοͱ Ͱ͖͚ͨͲɺݕࡧϑΥʔϜͷ ֤߲໨Λ63-ʹϚοϐϯά͢ Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ
15. Ͳ͏͍͏͜ͱ͔ ͜͏͍͏ͷ
16. ͜͏͍͏͜ͱ 2VFSZ
    4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠
17. ͜͏͍͏͜ͱ 2VFSZ
    4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠ w ݕࡧ݁Ռͷ63-Λڞ༗Ͱ͖Δͷ࠷ߴ
    w 443ͩͬͨΒݕࡧલͱݕࡧޙΛϒϥ΢βόοΫͰ໭ͬͨΓͰ͖Δ͠
18. ͜͏͍͏͜ͱ 443ʹ͢Ε͹؆୯͡ΌΜͬʂʂʂ 2VFSZ
    4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠
19. ͜͏͍͏͜ͱ 2VFSZ
    4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠ 443ʹ͢Ε͹؆୯͡ΌΜͬʂʂʂ 41"Ͱ΍Γ·͢ ڧ͍ҙࢤ
20. %FNP http://localhost:15000/spa-shops
21. ࠷ॳ͸ଟ෼͜Μͳؾ࣋ͪ w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ
    w WQBHJOBUJPOͰϖʔδϯά΋Φοέʔʂ
    w ݕࡧϑΥʔϜ΋௥Ճͯ͠ɺϑΟϧλϦϯά׬ᘳʂʂ
22. ࠷ॳ͸ଟ෼͜Μͳؾ࣋ͪ w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ
    w WQBHJOBUJPOͰϖʔδϯά΋Φοέʔʂ
    w ݕࡧϑΥʔϜ΋௥Ճͯ͠ɺϑΟϧλϦϯά׬ᘳʂʂ
    w ͋ΕɺͰ΋ϖʔδΛϦϩʔυ͢ΔͱݕࡧϑΥʔϜͷ৚݅ޮ ͍ͯͳ͍ʁ
    w ϖʔδ΋ϖʔδʹ໭ͬͯΔ͠ʝ
23. 7VF
    3PVUFSͷొ৔ • https://router.vuejs.org/ja/
24. 7VF
    3PVUFSͷొ৔ • this.$router.push({ query: { id: 1 } }) w ˢ͜Μͳײ͡ͷॲཧΛೖΕΕ͹͍͍ײ͡ʹͳΔͷͰ ͸ʝʁ
    w ݕࡧͷλΠϛϯάʹೖΕͯΈΑ͏
25. %FNP http://localhost:15000/vr-shops
26. ͓ͬ
    ͳΜ͔͍͍ײ͡
27. Ͱ΋ͳΜ͔͏·͍͔͘ͳ͍ w ϖʔδϯά͢ΔͱQBHFͱ͔͍ͭͯ΄͍͠ͳ
    w QBHFͷTFUUFSʹSPVUFSQVTI௥Ճ͢Δ͔
    w Ϧϩʔυ͢Δͱɺ63-͸ͦͷ··ͳͷʹදࣔσʔλ͕શ݅ʹͳΔͳ
    w ͡ΌDSFBUFEͷGFUDIॲཧʹSPVUFRVFSZͷ஋ͰݕࡧͰ͖ΔΑ͏ʹ͠Α͏
    w ϒϥ΢βόοΫͯ͠΋ɺදࣔσʔλ͕มΘΒͳ͍ͧ
    w ʜ
    w ҰମͲ͏͢Ε͹͍͍Μͩʂʂʂ
28. φϏήʔγϣϯΨʔυ w IUUQTSPVUFSWVFKTPSHKBHVJEFBEWBODFE OBWJHBUJPOHVBSETIUNM
29. σόοάϩάͰݟͯΈΑ͏ beforeRouteEnter (to, from, next) { console.log('beforeRouteEnter') next() }, beforeRouteUpdate (to, from, next) { console.log('beforeRouteUpdate') next() }, beforeRouteLeave (to, from, next) { console.log('beforeRouteLeave') next() },
30. Ͳ͏΍Β w 63-ʹϚον͢ΔSPVUFͷίϯϙʔωϯτΛಡΈࠐΜͩ࣌ ʹ
    CFGPSF3PVUF&OUFS͕ݺͼग़͞ΕΔ
    w ಉ͡ίϯϙʔωϯτ಺Ͱ63-͕
    ݕࡧϑΥʔϜ΍ϖʔδϯ άʹΑͬͯ
    มߋ͞ΕΔ࣌ʹ
    CFGPSF3PVUF6QEBUF
    ͕ݺ ͼग़͞ΕΔ
    w 63-͕SPVUFͷίϯϙʔωϯτͰ͸ແ͘ͳΔ࣌ʹ
    CFGPSF3PVUF-FBWF
    ͕ݺͼग़͞ΕΔ
31. ͳͷͰ w CFGPSF3PVUF&OUFS
    Ͱ2VFSZ4USJOHͷ஋ΛݩʹGFUDIॲཧΛݺͼग़ͤ ͹ྑͦ͞͏
    w TIPQT
    ͷ৔߹΋ɺTIPQT JE
    ͕खೖྗ͞Εͨ৔߹΋ରԠͰ͖ Δ
    w CFGPSF3PVUF6QEBUF
    ΋CFGPSF3PVUF&OUFSͱಉ͡ॲཧͰྑ͛͞
    w ΍Γ͍ͨ͜ͱ͸શ͘Ұॹ
    w CFGPSF3PVUF-FBWF͸Կ΋͠ͳ͍͍͔ͯ͘ͳ
    w ಛʹॳظԽॲཧͱ͔͸ෆཁͳ͸ͣ
32. %FNP http://localhost:15000/shops
33. ·ͱΊ 7VF3PVUFSͱ஥ྑ͘ͳΖ͏
34. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠