Nuxtはいいぞ2 / nuxtjs is good 2

ͪ͛ ʓө૾੍࡞ ʓ8FC αΠ τ੍࡞ ʓσβΠ ϯ͕ಘҙ ʓ࠷ۙ 'JHNBͰ 6*
࡞ͬ ͯΔ ʓ޷͖ͳήʔ Ϝ͸ .JOFDSBGU ʓण࢘͸פϒϦ ʓು͸͖͢ম͖͕޷͖ !$IJHF@

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

ͥΜͿ

<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

<div>ΓΜ͝</div> <div>Έ͔Μ</div> <div>͍ͪ͝</div> JOEFYWVF JOEFYIUNM [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]

ΓΜ͝ Έ͔Μ ͍ͪ͝ JOEFYIUNM

<template> <div @click=”openMenu()”> Click! </div> <div v-if=”menu”> MENU </div> </template>
<script> export default { data() { return { menu: false } }, methods: { JOEFYWVF

DMJDL JOEFYIUNM

.&/6 JOEFYIUNM DMJDL

ˡ֎෦$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'

5IBOLZPVGPSMJTUFOJOH

Nuxtはいいぞ2 / nuxtjs is good 2

Nuxtはいいぞ2 / nuxtjs is good 2

ちげ

More Decks by ちげ

Other Decks in Programming

Featured

Transcript

ͪ͛ ʓө૾੍࡞ ʓ8FC αΠ τ੍࡞ ʓσβΠ ϯ͕ಘҙ ʓ࠷ۙ 'JHNBͰ 6*

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

ͥΜͿ

<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>

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

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

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

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

ΓΜ͝ Έ͔Μ ͍ͪ͝ JOEFYIUNM

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

<script> export default { data() { return { menu: false

DMJDL JOEFYIUNM

.&/6 JOEFYIUNM DMJDL

ˡ֎෦$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 {

5IBOLZPVGPSMJTUFOJOH