Nuxtはいいぞ / nuxt.js is good

ͪ͛ ʓө૾੍࡞ ʓ8FC αΠ τ੍࡞ ʓσβΠ ϯ͕ಘҙ ʓਫӭ෦ɾݱࢹݚɾ+PLFO ʓ޷͖ͳήʔ Ϝ͸
.JOFDSBGU ʓण࢘͸פϒϦ ʓು͸͖͢ম͖͕޷͖ !$IJHF@

ちげ @Chige12_ フォローする DIJHF Τΰα

ຊ೔ͷจࣈϋϯςΟϯά

N ߴ ౳ֶ ߍ ֶ ߍ ๏ ਓ ֯ ઒
υ ϫ ϯ ΰ ֶ Ԃ ώϥΪϊ໌ே 1SP8 Baskerville Old Face Θ͔Βͳ͔ͬͨͷͰҰ൪ࣅͯΔ΍ͭ

ͥΜͿ

<body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ
</p> <ul> <li>ण࢘</li> <li>͖͢ম͖</li> <li>ຣ஡</li> </ul> </body> λΠ τϧ ʂ ͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ɾ ण࢘ ɾ ͖͢ম͖ ɾ ຣ஡

h1 { background: gray; color: white; } p { text-decoration:
underline; } ul { list-style-type: decimal; } λΠ τϧ ʂ ͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ̍ ण࢘ ͖͢ম͖ ຣ஡

ϓϩήʔ τ Ͱֶ΂Δ αΠ τ੍࡞ͷୈҰา͸ ͜Ε͕ϕε τͩͱࢥ͏ɻ

Ͱ΋͓ߴ͍ΜͰ͠ ΐ ʁ

͍͍͑ɺ ແྉͰ͢ QSPHDPN

࠷ॳͷελʔ τ͸͍͕ͭ͜Ұ൪Θ͔Γ ΍͍͢ αΠ τ࡞Γ ΍ͬͯΈΑ ͏͔ͳ ͬͯਓ͸ ͍ͭͰ΋๻ʹฉ͍ͯͶ

࠷ۙͷ8FCࣄ৘

جຊ͸7VFKT ͭͷWVFϑ Ν Π ϧʹ )5.- $44 +4Λॻ͘ 7VFͷಠࣗهड़Ξ Ϧ
<template>  </template> <script> // Javas Cript </script> <style> /* CSS */ </style> JOEFYWVF

<template> <div v-for=”list in lists”> {{ list }} </div> </template>
<script> export default { data(){ return{ lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”] }}} </script> JOEFYWVF

ΓΜ͝ Έ͔Μ ͍ͪ͝ JOEFYIUNM

<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

DMJDL JOEFYIUNM

.&/6 DMJDL JOEFYIUNM

ˡ֎෦$44ͱ͔ը૾ͱ͔ ˡίϯϙʔωϯ τ ࢠ ˡϨΠ Ξ΢ τ Λઃఆ ˡϖʔδΛ࡞Δ ˡ7VFͷϓϥά
Π ϯ ˡ੩తϑ Ν Π ϧஔ͖৔ ˡ7VFY࢖͏ ͱ ͖ ϑ Υϧμߏ଄ components assets layouts pages plugins static store

JOEFYWVF BCPVUWVF DPOUBDUWVF IUUQTIPHFDPNJOEFY IUUQTIPHFDPNBCPVU IUUQTIPHFDPNDPOUBDU ˢQBHFTϑ Υϧμʹ7VFϑ Ν Π
ϧΛ࡞Δ ͱ pages ͦͷ໊લͰϖʔδ͕Ͱ͖ Δ

)FBEFSWVF ˡϝχϡʔͷཁૉ͚ͩॻ͘ component Ͳͷϖʔδ͔ΒͰ΋ݺͼग़ͤΔίϯϙʔωϯ τԽ <template> <Header></Header> </template> <script> JOEFYWVF
<template> <Header></Header> </template> <script> BCPVUWVF

EFGBVMUWVF ˡ֤ϖʔδʹڞ௨ͷ ɹσβΠ ϯ͕͋Δ࣌ʹར༻ ˡ͜ ͜ʹ֤ϖʔδ͕ೖΔ layouts Ͳͷϖʔδʹ΋࡞Δ.FOVͱ͔͸͜ ͜Ͱॻ͍͓ͯ͘ <template>
<nuxt/> </template> <script> EFGBVMUWVF

%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 ίϯϙʔωϯ τ

<img src=”~/assets/image.png”> import Menu from '~/components/Menu.vue'

IUUQTUIFUPLZPKQSFMFBTFTSFMFBTFT

͔Δͨୈࡾ஄ ܭըத ʂ

取り札オモテウラ

取り札ウラ・豆知識・回路製作に役立つこと・電気あるあるネタ etc…

ϓϩ τ λ Π ϓ࡞ͬͨͷͰ ͥͻ࠙਌ձͰ ・豆知識・回路製作に役立つこと・電気あるあるネタ etc…

Nuxtはいいぞ / nuxt.js is good

Nuxtはいいぞ / nuxt.js is good

ちげ

More Decks by ちげ

Other Decks in Programming

Featured

Transcript

ͪ͛ ʓө૾੍࡞ ʓ8FC αΠ τ੍࡞ ʓσβΠ ϯ͕ಘҙ ʓਫӭ෦ɾݱࢹݚɾ+PLFO ʓ޷͖ͳήʔ Ϝ͸

ちげ @Chige12_ フォローする DIJHF Τΰα

ຊ೔ͷจࣈϋϯςΟϯά

N ߴ ౳ֶ ߍ ֶ ߍ ๏ ਓ ֯ ઒

ͥΜͿ

<body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ

<body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ

h1 { background: gray; color: white; } p { text-decoration:

var roop = 5 var hoge = "ϗήϗήʙ" var foo

ϓϩήʔ τ Ͱֶ΂Δ αΠ τ੍࡞ͷୈҰา͸ ͜Ε͕ϕε τͩͱࢥ͏ɻ

Ͱ΋͓ߴ͍ΜͰ͠ ΐ ʁ

͍͍͑ɺ ແྉͰ͢ QSPHDPN

࠷ॳͷελʔ τ͸͍͕ͭ͜Ұ൪Θ͔Γ ΍͍͢ αΠ τ࡞Γ ΍ͬͯΈΑ ͏͔ͳ ͬͯਓ͸ ͍ͭͰ΋๻ʹฉ͍ͯͶ

࠷ۙͷ8FCࣄ৘

࠷ۙͷ8FCࣄ৘

جຊ͸7VFKT ͭͷWVFϑ Ν Π ϧʹ )5.- $44 +4Λॻ͘ 7VFͷಠࣗهड़Ξ Ϧ

<template> <div v-for=”list in lists”> {{ list }} </div> </template>

ΓΜ͝ Έ͔Μ ͍ͪ͝ JOEFYIUNM

<template> <div v-if=”menu”> MENU </div> <div @click=”openMenu()”> Click! </div> </template>

DMJDL JOEFYIUNM

.&/6 DMJDL JOEFYIUNM

ˡ֎෦$44ͱ͔ը૾ͱ͔ ˡίϯϙʔωϯ τ ࢠ ˡϨΠ Ξ΢ τ Λઃఆ ˡϖʔδΛ࡞Δ ˡ7VFͷϓϥά

JOEFYWVF BCPVUWVF DPOUBDUWVF IUUQTIPHFDPNJOEFY IUUQTIPHFDPNBCPVU IUUQTIPHFDPNDPOUBDU ˢQBHFTϑ Υϧμʹ7VFϑ Ν Π

)FBEFSWVF ˡϝχϡʔͷཁૉ͚ͩॻ͘ component Ͳͷϖʔδ͔ΒͰ΋ݺͼग़ͤΔίϯϙʔωϯ τԽ <template> <Header></Header> </template> <script> JOEFYWVF

EFGBVMUWVF ˡ֤ϖʔδʹڞ௨ͷ ɹσβΠ ϯ͕͋Δ࣌ʹར༻ ˡ͜ ͜ʹ֤ϖʔδ͕ೖΔ layouts Ͳͷϖʔδʹ΋࡞Δ.FOVͱ͔͸͜ ͜Ͱॻ͍͓ͯ͘ <template>

%PDVNFOU)5.-pMF -BZPVU 1BHF w BTZOD%BUB w NJEEMFXBSF w GFUDI w

<img src=”~/assets/image.png”> import Menu from '~/components/Menu.vue'

<template lang=”pug”> .hoge pugͱ͔࢖͑·͢ </template> <style lang=”sass” scoped> .hoge font-size:30px;

IUUQTUIFUPLZPKQSFMFBTFTSFMFBTFT

͔Δͨୈࡾ஄ ܭըத ʂ

取り札オモテウラ

取り札ウラ・豆知識・回路製作に役立つこと・電気あるあるネタ etc…

ϓϩ τ λ Π ϓ࡞ͬͨͷͰ ͥͻ࠙਌ձͰ ・豆知識・回路製作に役立つこと・電気あるあるネタ etc…