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

by booink

Slide 1

Slide 1 text

7VFUJGZͰ ؅ཧը໘πΫʔϧ

Slide 2

Slide 2 text

ࠓճͷςʔϚ 7VFUJGZͰ؅ཧը໘πΫʔϧʂ

Slide 3

Slide 3 text

؅ཧը໘͸͓޷͖Ͱ͔͢ʁ

Slide 4

Slide 4 text

؅ཧը໘ͷΠϝʔδ w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘ ͘͞ͳ͍ʁ

Slide 5

Slide 5 text

؅ཧը໘ͷΠϝʔδ w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘ ͘͞ͳ͍ʁ

Slide 6

Slide 6 text

443ͷମݧΛଛͶͣʹ ͞Βʹ ϦονͰ࢖͍΍͍͢ ؅ཧը໘ΛπΫʔϧʂ

Slide 7

Slide 7 text

ͱ͍͏Θ͚Ͱ ຊ୊

Slide 8

Slide 8 text

ಈ࡞؀ڥ w 7VF w /VYUKT w 7VFUJGZ w NPEFbTQB` w 7VFY w 7VFSPVUFS

Slide 9

Slide 9 text

EFNP༻ͷϦϙδτϦ w IUUQTHJUIVCDPNCPPJOLWVFUJGZEFNP

Slide 10

Slide 10 text

ಥવͰ͕͢

Slide 11

Slide 11 text

؅ཧը໘Λ 41"ʹ͠Α͏ͱࢥ͚ͬͨͲ ҙ֎ͱ΍Δ͜ͱଟͯ͘ πϥͨΜʂʂ

Slide 12

Slide 12 text

͜Μͳܦݧ͸ ͋Γ·ͤΜ͔ʁ

Slide 13

Slide 13 text

Կ͕πϥͨΜ͔ w σʔλϕʔεͷσʔλΛҰཡදࣔ͸WEBUBUBCMFͰαΫο ͱͰ͖͚ͨͲɺݕࡧϑΥʔϜͷ֤߲໨Λ63-ʹϚοϐϯ ά͢Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ w ͱ͍͏͔ͦ΋ͦ΋Ͳ͏΍Δͷʼʻ

Slide 14

Slide 14 text

σʔλϕʔεͷσʔλΛҰཡද ࣔ͸WEBUBUBCMFͰαΫοͱ Ͱ͖͚ͨͲɺݕࡧϑΥʔϜͷ ֤߲໨Λ63-ʹϚοϐϯά͢ Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ

Slide 15

Slide 15 text

Ͳ͏͍͏͜ͱ͔ ͜͏͍͏ͷ

Slide 16

Slide 16 text

͜͏͍͏͜ͱ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠

Slide 17

Slide 17 text

͜͏͍͏͜ͱ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠ w ݕࡧ݁Ռͷ63-Λڞ༗Ͱ͖Δͷ࠷ߴ w 443ͩͬͨΒݕࡧલͱݕࡧޙΛϒϥ΢βόοΫͰ໭ͬͨΓͰ͖Δ͠

Slide 18

Slide 18 text

͜͏͍͏͜ͱ 443ʹ͢Ε͹؆୯͡ΌΜͬʂʂʂ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠

Slide 19

Slide 19 text

͜͏͍͏͜ͱ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠ 443ʹ͢Ε͹؆୯͡ΌΜͬʂʂʂ 41"Ͱ΍Γ·͢ ڧ͍ҙࢤ

Slide 20

Slide 20 text

%FNP http://localhost:15000/spa-shops

Slide 21

Slide 21 text

࠷ॳ͸ଟ෼͜Μͳؾ࣋ͪ w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ w WQBHJOBUJPOͰϖʔδϯά΋Φοέʔʂ w ݕࡧϑΥʔϜ΋௥Ճͯ͠ɺϑΟϧλϦϯά׬ᘳʂʂ

Slide 22

Slide 22 text

࠷ॳ͸ଟ෼͜Μͳؾ࣋ͪ w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ w WQBHJOBUJPOͰϖʔδϯά΋Φοέʔʂ w ݕࡧϑΥʔϜ΋௥Ճͯ͠ɺϑΟϧλϦϯά׬ᘳʂʂ w ͋ΕɺͰ΋ϖʔδΛϦϩʔυ͢ΔͱݕࡧϑΥʔϜͷ৚݅ޮ ͍ͯͳ͍ʁ w ϖʔδ΋ϖʔδʹ໭ͬͯΔ͠ʝ

Slide 23

Slide 23 text

7VF3PVUFSͷొ৔ • https://router.vuejs.org/ja/

Slide 24

Slide 24 text

7VF3PVUFSͷొ৔ • this.$router.push({ query: { id: 1 } }) w ˢ͜Μͳײ͡ͷॲཧΛೖΕΕ͹͍͍ײ͡ʹͳΔͷͰ ͸ʝʁ w ݕࡧͷλΠϛϯάʹೖΕͯΈΑ͏

Slide 25

Slide 25 text

%FNP http://localhost:15000/vr-shops

Slide 26

Slide 26 text

͓ͬͳΜ͔͍͍ײ͡

Slide 27

Slide 27 text

Ͱ΋ͳΜ͔͏·͍͔͘ͳ͍ w ϖʔδϯά͢ΔͱQBHFͱ͔͍ͭͯ΄͍͠ͳ w QBHFͷTFUUFSʹSPVUFSQVTI௥Ճ͢Δ͔ w Ϧϩʔυ͢Δͱɺ63-͸ͦͷ··ͳͷʹදࣔσʔλ͕શ݅ʹͳΔͳ w ͡ΌDSFBUFEͷGFUDIॲཧʹSPVUFRVFSZͷ஋ͰݕࡧͰ͖ΔΑ͏ʹ͠Α͏ w ϒϥ΢βόοΫͯ͠΋ɺදࣔσʔλ͕มΘΒͳ͍ͧ w ʜ w ҰମͲ͏͢Ε͹͍͍Μͩʂʂʂ

Slide 28

Slide 28 text

φϏήʔγϣϯΨʔυ w IUUQTSPVUFSWVFKTPSHKBHVJEFBEWBODFE OBWJHBUJPOHVBSETIUNM

Slide 29

Slide 29 text

σόοάϩάͰݟͯΈΑ͏ beforeRouteEnter (to, from, next) { console.log('beforeRouteEnter') next() }, beforeRouteUpdate (to, from, next) { console.log('beforeRouteUpdate') next() }, beforeRouteLeave (to, from, next) { console.log('beforeRouteLeave') next() },

Slide 30

Slide 30 text

Ͳ͏΍Β w 63-ʹϚον͢ΔSPVUFͷίϯϙʔωϯτΛಡΈࠐΜͩ࣌ ʹCFGPSF3PVUF&OUFS͕ݺͼग़͞ΕΔ w ಉ͡ίϯϙʔωϯτ಺Ͱ63-͕ ݕࡧϑΥʔϜ΍ϖʔδϯ άʹΑͬͯ มߋ͞ΕΔ࣌ʹCFGPSF3PVUF6QEBUF͕ݺ ͼग़͞ΕΔ w 63-͕SPVUFͷίϯϙʔωϯτͰ͸ແ͘ͳΔ࣌ʹ CFGPSF3PVUF-FBWF͕ݺͼग़͞ΕΔ

Slide 31

Slide 31 text

ͳͷͰ w CFGPSF3PVUF&OUFSͰ2VFSZ4USJOHͷ஋ΛݩʹGFUDIॲཧΛݺͼग़ͤ ͹ྑͦ͞͏ w TIPQTͷ৔߹΋ɺTIPQT JE͕खೖྗ͞Εͨ৔߹΋ରԠͰ͖ Δ w CFGPSF3PVUF6QEBUF΋CFGPSF3PVUF&OUFSͱಉ͡ॲཧͰྑ͛͞ w ΍Γ͍ͨ͜ͱ͸શ͘Ұॹ w CFGPSF3PVUF-FBWF͸Կ΋͠ͳ͍͍͔ͯ͘ͳ w ಛʹॳظԽॲཧͱ͔͸ෆཁͳ͸ͣ