การติดตั้งและกำหนด Nuxt.js ค่าโครงการ
ติดตั้ง Node.js
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js ไว้ในคอมพิวเตอร์ของคุณแล้ว คุณสามารถดาวน์โหลดเวอร์ชันล่าสุดได้จากเว็บไซต์อย่างเป็นทางการของ Node.js
ติดตั้ง Vue CLI
เปิด Terminal หรือ Command Prompt เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Vue CLI(หากยังไม่ได้ติดตั้ง):
npm install -g vue-cli
สร้าง Nuxt.js โครงการ
ในไดเร็กทอรี Terminal นำทางไปยังไดเร็กทอรีที่คุณต้องการสร้างโปรเจ็กต์และรันคำสั่งต่อไปนี้เพื่อสร้างโปร Nuxt.js เจ็กต์:
vue init nuxt-community/starter-template my-nuxt-project
การกำหนดค่าโครงการ
ทำตามคำแนะนำในการ Terminal กำหนดค่าโครงการของคุณ คุณสามารถเลือกตัวเลือกต่างๆ สำหรับโครงการของคุณ เช่น การใช้ ESLint, การติดตั้ง Axios เป็นต้น
การสร้างหน้าแรกและการแสดงเนื้อหาพื้นฐาน:
เปิดไดเรกทอรีโครงการ
เปิดของคุณ Terminal และไปที่ไดเรกทอรีโครงการโดยใช้คำสั่ง cd my-nuxt-project(หรือชื่อโฟลเดอร์ที่คุณเลือก)
สร้างหน้าใหม่
ใช้ Vue CLI เพื่อสร้างหน้าใหม่ด้วยคำสั่งต่อไปนี้:
npx vue-cli-service generate page mypage
แก้ไขหน้าใหม่
เปิด mypage.vue ไฟล์ใน pages ไดเร็กทอรีและแก้ไขเนื้อหาของเพจ คุณสามารถเพิ่ม HTML คอมโพเนนต์ Vue และข้อมูล
แสดงหน้า
ใน layouts/default.vue ไฟล์ คุณสามารถใช้ <nuxt/> แท็กเพื่อแสดงเนื้อหาของหน้า
เรียกใช้โครงการ
ใน เรียก Terminal ใช้คำสั่งต่อไปนี้เพื่อเริ่มโครงการและดูเพจของคุณในเบราว์เซอร์:
npm run dev
ตอนนี้คุณมีหน้าแรกใน Nuxt.js โครงการแล้วและสามารถปรับแต่งเนื้อหาได้ตามต้องการ