เริ่มต้นเขียน Nuxt.js จาก baby to ready

Arthorn Kittinukul
Sep 26 · 3 min read

สำหรับ Blog นี้เหมาสำหรับคนที่เคยเขียน Vue.js มาเเล้ว หรือเคยผ่านการเขียน Javascript เบื่องต้นมาก่อน เพราะว่า Nuxt นั้นมีพื้นฐานการเขียนมาจาก Vue นั้นเอง ซึ่ง Nuxt จะจัดการหลายๆอย่างให้เราสามารถเขียน Vue ได้ง่ายขึ้นนั้นเอง จะเป็นยังไงเรามาลองดูกันนนนน

ขั้นเเรกให้เครื่องเรามี npx ก่อนนะครับ ถ้ายังไม่ชัวลองเปิด Terminal เเล้วพิมพ์

npx -v

ถ้ามีเลข version แบบนี้แล้วก็มาเริ่มสร้าง project กันเลย จาก command

npx create-nuxt-app <project-name>

เริ่มสร้าง project ตัว Nuxt ก็จะถามการตั้งค่าต่างๆ ทั้ง project name, description, UI framework, server framework(เลือก None เพราะเราจะทำเเค่ Client) และตั้งค่าอื่นๆ อีก ซึ่งพอสร้าง project เสร็จแล้วก็ลอง run ขึ้น project ขึ้นมาด้วย command ด้านล่างนี้

cd myProject
npm run dev
หน้าตาของ Terminal และหน้าเว็บเมื่อเริ่ม run project ได้สำเร็จ

หลังจาก run แล้วลองเข้าไปดูใน project ดูว่าเราได้อะไรกันมาบ้าง อย่างที่เห็น จะมี folder หลักๆ เราสนใจเเละใช้บ่อยๆก็จะเป็น

  • ไฟล์ nuxt.config.js
  • pages
  • components
  • plugins
  • store

ส่วน folder อื่นๆ เราก็ยังได้ใช้อยู่เเต่อาจจะไม่บ่อยขนาดนั้น เดี๋ยวผมจะค่อยพาทัวดูรอบๆกันนะครับ เริ่มจาก

nuxt.config.js

ไฟล์นี้สำคัญมากครับ เพราะจะเห็นได้ว่าไฟล์นี้เป็นไฟล์ที่สามารถตั้งค่า config ของทั้ง project ได้เลยทั้ง header ของเว็บ, loading, plugin, css, module รวมถึงการ build ต่างๆ เดี๋ยวเราจะต้องมายุ่งกับไฟล์นี้อีกเยอะครับ เเต่ตอนนี้พักไว่เท่านี้ก่อนไปต่อกันที่

Pages

components

แล้วเราก็เรียก import ในไฟล์ที่เราจะเรียกใช้ โดยที่ใน template ของไฟล์ที่เราเรียกใช้ component นั้นก็จะใช้ชื่อที่เรา import มานั้นเอง ตาตัวอย่างก็จะเป็น <buttonComponent />

plugins

inject คือการใช้ library ที่เรา install มาเเล้วอยากจะเอามาใช้ใน project ซึ่งสามารถเรียกผ่าน context กลางนั้นก็คือ $ นั้นเอง ครั้งนี้ผมจะลองใช้ moment ก็ลอง

npm install moment

หลังจาก install moment เรียบร้อยเเล้วเราก็มาสร้างไฟล์ตาม moment.js เอาไปไว้ที่ plugins folder เลยครับ พอเรียบร้อยเเล้วเราก็ไปที่ไฟล์ nuxt.config.js เเละมาเพิ่ม ~/plugins/moment.js ไว้ที่ plugins ได้เลย

plugins: ['~/plugins/moment.js'],

แล้วที่นี้ถ้าจะเรียกใช้หละ ก็แค่ไปที่ไฟล์ที่เราจะใช้เเล้วเรียก this.$moment() ซึ่งสามารถส่ง param ไปได้ตามที่เราอยากจะส่งเลยนั้นเอง

หลังจากเพิ่ม moment ไปเเล้ว helloWorld.vue ของเราก็จะหน้าตาประมาณนี้

component วิธีใช้ก็จะคล้ายๆกับ inject เเต่ต่างกันตรงที่ inject นั้นเวลาใช้เราจะเรียกผ่าน $ แต่ component นั้นเราจะเรียกใช้เป็น component อีกตัวนึงเลยนั้นเองซึ่งผมจะขอเลือก vue2-datepicker มาเป็นตัวอย่าง ลองทำไปด้วยกันนะครับ เริ่มจาก install กันก่อน

npm install vue2-datepicker --save

หลังจาก install เรียบร้อยเเล้วเราก็ไปสร้าง datepicker.js ใส่ไว้ใน plugins และไปเพิ่ม plugins ในไฟล์ nuxt.config.js เหมือนที่เราพึ่งทำไปเมื่อข้อก่อนหน้าเลยครับ

plugins: [
'~/plugins/moment.js',
{ src: '~/plugins/datePicker.js', ssr: false }
],

ssr คืออะไร? ผมไม่ต้องการให้ nuxt ทำ server side rendering ผมก็เลยตั้งให้เป็น false นั้นเอง

ทีนี้เวลาเราเรียกใช้เราก็เรียกเหมือนเป็น component ธรรมาเลย เพียงเเต่เราไม่ต้อง register component เท่านั้นเอง โดยการเอา date-picker ไปใส่ต่อจากเจ้า moment เมื่อกี๊ก็ได้เเล้วครับ

<date-picker placeholder="select date" format="DD/MM/YYYY"/>
หน้าตาหลังจากเอา date picker มาใส่

store

จะเห็นว่าเรามี const state เเล้วเก็บ address ไว้(param ที่เอาไว้เรียก) ส่วน const mutations เอาไว้เรียกตอนจะ set state จากที่อื่น เดี๋ยวผมจะทำ blog แยกมาสำหรับเรื่อง store อีกทีแบบละเอียดๆ ให้นะครับ เรามาต่อกันคือเพิ่ม index.js ใน store folder ด้วย

ทีนี้เวลาใช้เราก็เรียกโดยใช้

  • this.$store.commit เพื่อ set ค่าไปยัง store
  • this.$store.state เพื่อ get ค่าจาก store

สามารถดูวิธี set จาก บรรทัด 36 และวิธี get จากบรรทัด 44

ที่นี้ถ้าเราอยากจะเห็นว่า store ของเราทำงานรึยังสามารถ inspect ดูได้ใน console


ก็ผ่านไปเเล้วสำหรับส่วนต่างๆที่เราใช้กันบ่อยๆใน Nuxt ผมก็หวังว่า blog นี้จะเป็นประโยชน์ไม่มากก็น้อย ซึ่งต่อไปผมจะเขียนเจาะลงไปในรายละเอียด และ tips ต่างๆที่ผมคิดว่าใช้บ่อยๆ หรือมีประโยชน์มาแชร์ให้ใน blog ต่อๆไปนะครับ สำหรับวันนี้ผมโจ๊ก ก็ต้องขอตัวลากันไปก่อน สวัสดีครับบบบบบ

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้

Arthorn Kittinukul

Written by

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade