Speaker Deck
Sign in
Sign up
for free
Nuxtはいいぞ / nuxt.js is good
ちげ
March 24, 2019
Programming
1
270
Nuxtはいいぞ / nuxt.js is good
高専カンファ×学生LT in大阪での発表スライド
Nuxt.jsは便利です。
ちげ
March 24, 2019
Tweet
Share
Want more?
chige
0
85
chige
2
380
chige
0
64
reverentgeek
11
590
rmw
2
300
skipperchong
0
200
carmenhchung
6
380
keathley
7
230
productmarketing
3
320
clairelew
4
610
thoeni
1
180
jcasabona
4
260
Transcript
1
.
None
2
.
ͪ͛ ʓө૾੍࡞ ʓ8FC αΠ τ੍࡞ ʓσβΠ ϯ͕ಘҙ ʓਫӭ෦ɾݱࢹݚɾ+PLFO ʓ͖ͳήʔ Ϝ
.JOFDSBGU ʓण࢘פϒϦ ʓು͖͢ম͖͕͖ !$IJHF@
3
.
ちげ @Chige12_ フォローする DIJHF Τΰα
4
.
ຊͷจࣈϋϯςΟϯά
5
.
N ߴ ֶ ߍ ֶ ߍ ๏ ਓ ֯
υ ϫ ϯ ΰ ֶ Ԃ ώϥΪϊ໌ே 1SP8 Baskerville Old Face Θ͔Βͳ͔ͬͨͷͰҰ൪ࣅͯΔͭ
6
.
None
7
.
None
8
.
None
9
.
None
10
.
ͥΜͿ
11
.
None
12
.
<body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ
</p> <ul> <li>ण࢘</li> <li>͖͢ম͖</li> <li>ຣ</li> </ul> </body> λΠ τϧ ʂ ͜Μʹͪ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ɾ ण࢘ ɾ ͖͢ম͖ ɾ ຣ
13
.
<body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ
</p> <ul> <li>ण࢘</li> <li>͖͢ম͖</li> <li>ຣ</li> </ul> </body> λΠ τϧ ʂ ͜Μʹͪ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ɾ ण࢘ ɾ ͖͢ম͖ ɾ ຣ
14
.
h1 { background: gray; color: white; } p { text-decoration:
underline; } ul { list-style-type: decimal; } λΠ τϧ ʂ ͜Μʹͪ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ̍ ण࢘ ͖͢ম͖ ຣ
15
.
var roop = 5 var hoge = "ϗήϗήʙ" var foo
= "ϑΡʙʙ ʂ " for(var i=0; i < roop; i++){ if(i==3){ console.log(foo); }else{ console.log(hoge+i); } } ϗήϗήʙ ϗήϗήʙ ϗήϗήʙ ϑ Ρʙʙ ʂ ϗήϗήʙ̐
16
.
ϓϩήʔ τ ͰֶΔ αΠ τ੍࡞ͷୈҰา ͜Ε͕ϕε τͩͱࢥ͏ɻ
17
.
Ͱ͓ߴ͍ΜͰ͠ ΐ ʁ
18
.
͍͍͑ɺ ແྉͰ͢ QSPHDPN
19
.
࠷ॳͷελʔ τ͍͕ͭ͜Ұ൪Θ͔Γ ͍͢ αΠ τ࡞Γ ͬͯΈΑ ͏͔ͳ ͬͯਓ ͍ͭͰʹฉ͍ͯͶ
20
.
None
21
.
࠷ۙͷ8FCࣄ
22
.
None
23
.
None
24
.
࠷ۙͷ8FCࣄ
25
.
None
26
.
None
27
.
None
28
.
None
29
.
جຊ7VFKT ͭͷWVFϑ Ν Π ϧʹ )5.- $44 +4Λॻ͘ 7VFͷಠࣗهड़Ξ Ϧ
<template> <!-- HTML --> </template> <script> // Javas Cript </script> <style> /* CSS */ </style> JOEFYWVF
30
.
<template> <div v-for=”list in lists”> {{ list }} </div> </template>
<script> export default { data(){ return{ lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”] }}} </script> JOEFYWVF
31
.
ΓΜ͝ Έ͔Μ ͍ͪ͝ JOEFYIUNM
32
.
<template> <div v-if=”menu”> MENU </div> <div @click=”openMenu()”> Click! </div> </template>
<script> export default { data(){ return{ menu:false } }, methods:{ openMenu(){ this.menu = true } } } </script> JOEFYWVF
33
.
DMJDL JOEFYIUNM
34
.
.&/6 DMJDL JOEFYIUNM
35
.
ˡ֎෦$44ͱ͔ը૾ͱ͔ ˡίϯϙʔωϯ τ ࢠ ˡϨΠ Ξ τ Λઃఆ ˡϖʔδΛ࡞Δ ˡ7VFͷϓϥά
Π ϯ ˡ੩తϑ Ν Π ϧஔ͖ ˡ7VFY͏ ͱ ͖ ϑ Υϧμߏ components assets layouts pages plugins static store
36
.
JOEFYWVF BCPVUWVF DPOUBDUWVF IUUQTIPHFDPNJOEFY IUUQTIPHFDPNBCPVU IUUQTIPHFDPNDPOUBDU ˢQBHFTϑ Υϧμʹ7VFϑ Ν Π
ϧΛ࡞Δ ͱ pages ͦͷ໊લͰϖʔδ͕Ͱ͖ Δ
37
.
)FBEFSWVF ˡϝχϡʔͷཁૉ͚ͩॻ͘ component Ͳͷϖʔδ͔ΒͰݺͼग़ͤΔ ίϯϙʔωϯ τԽ <template> <Header></Header> </template> <script> JOEFYWVF
<template> <Header></Header> </template> <script> BCPVUWVF
38
.
EFGBVMUWVF ˡ֤ϖʔδʹڞ௨ͷ ɹσβΠ ϯ͕͋Δ࣌ʹར༻ ˡ͜ ͜ʹ֤ϖʔδ͕ೖΔ layouts Ͳͷϖʔδʹ࡞Δ.FOVͱ͔͜ ͜Ͱॻ͍͓ͯ͘ <template>
<nuxt/> </template> <script> EFGBVMUWVF
39
.
%PDVNFOU)5.-pMF -BZPVU 1BHF w BTZOD%BUB w NJEEMFXBSF w GFUDI w
TDSPMM5P5PQ w IFBE w USBOTJUJPO w MBZPVU w WBMJEBUF 0QUJPOBM1BHF$IJME ίϯϙʔωϯ τ 0QUJPOBM 1BHF$IJME ίϯϙʔωϯ τ
40
.
<img src=”~/assets/image.png”> import Menu from '~/components/Menu.vue'
41
.
None
42
.
<template lang=”pug”> .hoge pugͱ͔͑·͢ </template> <style lang=”sass” scoped> .hoge font-size:30px;
</style>
43
.
None
44
.
IUUQTUIFUPLZPKQSFMFBTFTSFMFBTFT
45
.
None
46
.
None
47
.
͔Δͨୈࡾ ܭըத ʂ
48
.
None
49
.
取り札 オモテ ウラ
50
.
取り札 ウラ ・豆知識 ・回路製作に役立つこと ・電気あるあるネタ etc…
51
.
ϓϩ τ λ Π ϓ࡞ͬͨͷͰ ͥͻ࠙ձͰ ・豆知識 ・回路製作に役立つこと ・電気あるあるネタ etc…
ちげ
chige
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
