Nuxtはいいぞ / nuxt.js is good

994abc15f0cfc4010e8125dba1bcfae7?s=47 ちげ
March 24, 2019

Nuxtはいいぞ / nuxt.js is good

高専カンファ×学生LT in大阪での発表スライド
Nuxt.jsは便利です。

994abc15f0cfc4010e8125dba1bcfae7?s=128

ちげ

March 24, 2019
Tweet

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…