พวกเรามาถึงยุคที่ต้องมีเว็บไซต์ที่เข้าใช้งานแล้วรู้สึกว่ารวดเร็วทันใจเพราะเมื่อมีอะไรมาขัดจังหวะคนใช้งานจะรู้สึกไม่อยากรอ หรือ อาจจะเลิกสนใจ 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
- ติดตั้ง npx (ไม่ขอกล่าวถึงสำหรับขั้นตอนการติดตั้งส่วนนี้) หรือจะใช้ yarn ก็ได้ตามความถนัด
- npx: create nuxt project
npx create-nuxt-app <project-name> - yarn: create nuxt project
yarn create nuxt-app <project-name> - ใส่ชื่อ project
? Project name (poolsawat) - ใส่คำอธิบาย
? Project description (My shining Nuxt.js project) - เลือก integrate ร่วมกับ framework อื่น เลือก None (Nuxt default server)
> none
express
koa
adonis
hapi
feathers
micro - เลือก ui framework
> none
bootstrap
vuetify
bulma
tailwind
element-ui
buefy - Single Page App เลือก mode website SEO เลือก Universal
> Universal
SPA - website ที่มีการต่อเรียก api ก็ให้ติดตั้ง axios ด้วย
no
> yes - เพิ่มการตรวจสอบ source code ด้วย ESLint
no
> yes - เพิ่มให้มีการจัด format code หลัง save
no
> yes - รอ…
- ทำตาม step
cd 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 ใหม่จะต้องทำอย่างไร
