เริ่มต้นทำ Web Application ด้วย NuxtJS

wave
มานพ กองอุ่น 21 ธ.ค. 2019 18:47:42 14,158

Nuxt.js เป็น JavaScript Framework ที่ Base on Vue.js libary (vue, vue-router และ vuex) และเครื่องมือพัฒนาอันทรงพลัง (webpack, Babel และ PostCSS) เป้าหมายของ Nuxt คือการทำให้การพัฒนาเว็บไซต์มีประสิทธิภาพโดยคำนึงถึงประสบการณ์ของนักพัฒนาที่ยอดเยี่ยม

การติดตั้ง

สำหรับการติดตั้งนั้นต้องทำให้แน่ใจว่าได้ติดตั้ง npx ซึ่งปกติจะติดมากับ npm เวอร์ชั่น 5.2.0 เป็นต้นไป หรือทดลองพิมพ์คำสั่ง 

npx --version

จะพบหน้าจอลักษณะดังนี้

6.13.4

คำสั่งสำหรับการสร้าง Project ใหม่

npx create-nuxt-app <project-name>

เมื่อสร้าง project เสร็จเรียบร้อยทดลอง run ด้วย

cd project
npm run dev

จากนั้นเปิดหน้า browser http://localhost:3000

โครงสร้าง Folder ใน Project NuxtJS

-assets เป็น folder เก็บไฟล์ css และ js ที่ยังไม่ได้ compile asset

-components เป็น folder เก็บไฟล์ Vue component

-layouts เป็น folder เก็บไฟล์ master layouts

-middleware เป็น folder เก็บ code เพื่อ run ในบางครั้ง เช่น not routing user

-node_modules เป็น folder เก็บ library package ของ project

-pages เป็น folder เก็บไฟล์หน้า Web Application

-plugins เป็น folder เก็บ 3rd party plugin

-static เป็น folder เก็บ static content

-store เป็น folder เก็บ Vuex store

-nux.config.js เป็นไฟล์ config ของ nuxtjs

-package.json เป็นไฟล์ที่ถูกสร้างขึ้นตอนสร้าง project โดยมีการกำหนดค่าต่างๆ ตามที่เราเลือก

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com