SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.1) “Setup Nuxt Project”

Sharing is caring!

พวกเรามาถึงยุคที่ต้องมีเว็บไซต์ที่เข้าใช้งานแล้วรู้สึกว่ารวดเร็วทันใจเพราะเมื่อมีอะไรมาขัดจังหวะคนใช้งานจะรู้สึกไม่อยากรอ หรือ อาจจะเลิกสนใจ website ของคุณไปเลย แล้วถ้าอยากจะสร้าง website ลักษณะที่ตอบโจทย์ที่กล่าวมาละ เครื่องมืออะไรจะตอบโจทย์นี้ได้
SPA หรือ single page application คือการที่มี application ที่มีการทำงานในหน้าเดียวกล่าวคือจะไม่มีการ refresh หน้า ถ้าในสมัยเก่าก่อนวิธีการที่นิยมที่สุดก็คงเป็นการใช้ AJAX ในการ รับ-ส่งค่าข้อมูลระหว่างกันโดยเมื่อมีข้อมูลหน้าเว็บเปลี่ยนก็สั่งให้ DOM เปลี่ยนแปลงโดยใช้งานร่วมกับ jQuery พระเอกตลอดการของเรานั้นเอง ฟังดูยากสำหรับเมื่อก่อน
SPA ก็มี framework ในการพัฒนา 3 ค่ายดัง ๆ อย่าง React(Facebook) ,Angular(Google), Vue(ทีมพัฒนาอิสระ) ซึ่ง 3 framework ก็ล้วนเป็น open source แล้วทั้งสิน ถ้าเมื่อจะเลือกเครื่องมืออะไรสักอย่างก็ต้องเข้าไปใช้งาน หรือต้องได้ลองเล่น และเมื่อเกิดปัญหา หรือรู้สึกว่าติดขัดก็จะเลิกและเปลี่ยนไปใช้งานตัวถัดไป และเมื่อถ้าได้ลองจะครบทั้ง 3 framework แล้วตัวเราเองก็จะเลือกได้เองว่าจะเลือก framework ตัวใด
Vue คือ framework ระดับแรก ๆ ที่นักพัฒนามือใหม่เลือกใช้งาน ด้วยเหตุผลเรื่องความง่ายในการติดตั้งไม่จำเป็นต้องติดตั้ง build tool ก็สามารถเริ่มต้นใช้งานได้
Nuxt.js เป็น framework ที่พัฒนาต่อยอดจาก VueJS เพื่อช่วยแก้ปัญหาสำหรับ website ที่ต้องการทำเรื่อง SEO(Search Engine Optimization) เพื่อในพบการค้นหาใน google ได้ง่ายยิ่งขึ้น
เริ่มต้นใช้งาน
เริ่มแรกติดตั้ง Nuxt.js

  1. ติดตั้ง npx (ไม่ขอกล่าวถึงสำหรับขั้นตอนการติดตั้งส่วนนี้) หรือจะใช้ yarn ก็ได้ตามความถนัด
  2. npx: create nuxt project
    npx create-nuxt-app <project-name>
  3. yarn: create nuxt project
    yarn create nuxt-app <project-name>
  4. ใส่ชื่อ project? Project name (poolsawat)
  5. ใส่คำอธิบาย? Project description (My shining Nuxt.js project)
  6. เลือก integrate ร่วมกับ framework อื่น เลือก None (Nuxt default server)
    > none
    express
    koa
    adonis
    hapi
    feathers
    micro
  7. เลือก ui framework
    > none
    bootstrap
    vuetify
    bulma
    tailwind
    element-ui
    buefy
  8. Single Page App เลือก mode website SEO เลือก Universal
    > Universal
    SPA
  9. website ที่มีการต่อเรียก api ก็ให้ติดตั้ง axios ด้วย
    no
    > yes
  10. เพิ่มการตรวจสอบ source code ด้วย ESLint
    no
    > yes
  11. เพิ่มให้มีการจัด format code หลัง save
    no
    > yes
  12. รอ…
  13. ทำตาม stepcd poolsawat
    npm run dev

ติดตั้งเรียบร้อยลอง start application ดู

d:\Blogger\nuxt\poolsawat>npm run dev

> [email protected] dev d:\Blogger\nuxt\poolsawat
> nuxt

INFO Building project

√ success Builder initialized
√ success Nuxt files generated

READY Listening on http://localhost:3000

เสร็จสิ้นเป็นที่เรียบร้อย ตอนหน้าจะพาไปแนะนำโครงสร้างภายใน Nuxt.js กันว่าแต่ละส่วนใช้ทำงานอะไรบ้าง และถ้าจะสร้าง page ใหม่จะต้องทำอย่างไร

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *