Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuetifyで管理画面ツクール.pdf
Search
booink
December 17, 2019
Programming
1
820
Vuetifyで管理画面ツクール.pdf
booink
December 17, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.7k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
QA x AIエコシステム段階構築作戦
osu
0
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
Jakarta EE Meets AI
ivargrimstad
0
380
Reactの歴史を振り返る
tutinoko
1
140
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Side Projects
sachag
455
43k
Thoughts on Productivity
jonyablonski
69
4.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How GitHub (no longer) Works
holman
314
140k
How STYLIGHT went responsive
nonsquared
100
5.7k
It's Worth the Effort
3n
185
28k
Transcript
7VFUJGZͰ ཧը໘πΫʔϧ
ࠓճͷςʔϚ 7VFUJGZͰཧը໘πΫʔϧʂ
ཧը໘͓͖Ͱ͔͢ʁ
ཧը໘ͷΠϝʔδ w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘ ͘͞ͳ͍ʁ
ཧը໘ͷΠϝʔδ w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘ ͘͞ͳ͍ʁ
443ͷମݧΛଛͶͣʹ ͞Βʹ ϦονͰ͍͍͢ ཧը໘ΛπΫʔϧʂ
ͱ͍͏Θ͚Ͱ ຊ
ಈ࡞ڥ w 7VF w /VYUKT w 7VFUJGZ w NPEFbTQB` w
7VFY w 7VFSPVUFS
EFNP༻ͷϦϙδτϦ w IUUQTHJUIVCDPNCPPJOLWVFUJGZEFNP
ಥવͰ͕͢
ཧը໘Λ 41"ʹ͠Α͏ͱࢥ͚ͬͨͲ ҙ֎ͱΔ͜ͱଟͯ͘ πϥͨΜʂʂ
͜Μͳܦݧ ͋Γ·ͤΜ͔ʁ
Կ͕πϥͨΜ͔ w σʔλϕʔεͷσʔλΛҰཡදࣔWEBUBUBCMFͰαΫο ͱͰ͖͚ͨͲɺݕࡧϑΥʔϜͷ֤߲Λ63-ʹϚοϐϯ ά͢Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ w ͱ͍͏͔ͦͦͲ͏Δͷʼʻ
σʔλϕʔεͷσʔλΛҰཡද ࣔWEBUBUBCMFͰαΫοͱ Ͱ͖͚ͨͲɺݕࡧϑΥʔϜͷ ֤߲Λ63-ʹϚοϐϯά͢ Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ
Ͳ͏͍͏͜ͱ͔ ͜͏͍͏ͷ
͜͏͍͏͜ͱ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠
͜͏͍͏͜ͱ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠ w ݕࡧ݁Ռͷ63-Λڞ༗Ͱ͖Δͷ࠷ߴ w 443ͩͬͨΒݕࡧલͱݕࡧޙΛϒϥβόοΫͰͬͨΓͰ͖Δ͠
͜͏͍͏͜ͱ 443ʹ͢Ε؆୯͡ΌΜͬʂʂʂ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠
͜͏͍͏͜ͱ 2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠ 443ʹ͢Ε؆୯͡ΌΜͬʂʂʂ 41"ͰΓ·͢ ڧ͍ҙࢤ
%FNP http://localhost:15000/spa-shops
࠷ॳଟ͜Μͳؾ࣋ͪ w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ w WQBHJOBUJPOͰϖʔδϯάΦοέʔʂ w ݕࡧϑΥʔϜՃͯ͠ɺϑΟϧλϦϯάᘳʂʂ
࠷ॳଟ͜Μͳؾ࣋ͪ w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ w WQBHJOBUJPOͰϖʔδϯάΦοέʔʂ w ݕࡧϑΥʔϜՃͯ͠ɺϑΟϧλϦϯάᘳʂʂ w ͋ΕɺͰϖʔδΛϦϩʔυ͢ΔͱݕࡧϑΥʔϜͷ݅ޮ ͍ͯͳ͍ʁ
w ϖʔδϖʔδʹͬͯΔ͠ʝ
7VF3PVUFSͷొ • https://router.vuejs.org/ja/
7VF3PVUFSͷొ • this.$router.push({ query: { id: 1 } }) w
ˢ͜Μͳײ͡ͷॲཧΛೖΕΕ͍͍ײ͡ʹͳΔͷͰ ʝʁ w ݕࡧͷλΠϛϯάʹೖΕͯΈΑ͏
%FNP http://localhost:15000/vr-shops
͓ͬͳΜ͔͍͍ײ͡
ͰͳΜ͔͏·͍͔͘ͳ͍ w ϖʔδϯά͢ΔͱQBHFͱ͔͍ͭͯ΄͍͠ͳ w QBHFͷTFUUFSʹSPVUFSQVTIՃ͢Δ͔ w Ϧϩʔυ͢Δͱɺ63-ͦͷ··ͳͷʹදࣔσʔλ͕શ݅ʹͳΔͳ w ͡ΌDSFBUFEͷGFUDIॲཧʹSPVUFRVFSZͷͰݕࡧͰ͖ΔΑ͏ʹ͠Α͏ w
ϒϥβόοΫͯ͠ɺදࣔσʔλ͕มΘΒͳ͍ͧ w ʜ w ҰମͲ͏͢Ε͍͍Μͩʂʂʂ
φϏήʔγϣϯΨʔυ w IUUQTSPVUFSWVFKTPSHKBHVJEFBEWBODFE OBWJHBUJPOHVBSETIUNM
σόοάϩάͰݟͯΈΑ͏ beforeRouteEnter (to, from, next) { console.log('beforeRouteEnter') next() }, beforeRouteUpdate
(to, from, next) { console.log('beforeRouteUpdate') next() }, beforeRouteLeave (to, from, next) { console.log('beforeRouteLeave') next() },
Ͳ͏Β w 63-ʹϚον͢ΔSPVUFͷίϯϙʔωϯτΛಡΈࠐΜͩ࣌ ʹCFGPSF3PVUF&OUFS͕ݺͼग़͞ΕΔ w ಉ͡ίϯϙʔωϯτͰ63-͕ ݕࡧϑΥʔϜϖʔδϯ άʹΑͬͯ มߋ͞ΕΔ࣌ʹCFGPSF3PVUF6QEBUF͕ݺ ͼग़͞ΕΔ
w 63-͕SPVUFͷίϯϙʔωϯτͰແ͘ͳΔ࣌ʹ CFGPSF3PVUF-FBWF͕ݺͼग़͞ΕΔ
ͳͷͰ w CFGPSF3PVUF&OUFSͰ2VFSZ4USJOHͷΛݩʹGFUDIॲཧΛݺͼग़ͤ ྑͦ͞͏ w TIPQTͷ߹ɺTIPQT JE͕खೖྗ͞Εͨ߹ରԠͰ͖ Δ w CFGPSF3PVUF6QEBUFCFGPSF3PVUF&OUFSͱಉ͡ॲཧͰྑ͛͞
w Γ͍ͨ͜ͱશ͘Ұॹ w CFGPSF3PVUF-FBWFԿ͠ͳ͍͍͔ͯ͘ͳ w ಛʹॳظԽॲཧͱ͔ෆཁͳͣ
%FNP http://localhost:15000/shops
·ͱΊ 7VF3PVUFSͱྑ͘ͳΖ͏
͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠