จะติดตั้งและกำหนดค่า Astro.js บน Windows ได้อย่างไร?

“ Astro.js ” เป็นเฟรมเวิร์กการพัฒนาเว็บที่ใช้ JavaScript สมัยใหม่ที่รองรับภาษาของตัวเองที่เรียกว่า “ แอสโตร '. ส่วนประกอบของมันดูคล้ายกับเฟรมเวิร์กการพัฒนาส่วนหน้าอื่น ๆ เช่น React.js Astro.js เสนอให้นักพัฒนาเขียนโค้ดเฟรมเวิร์ก JavaScript ทั้งหมดภายใต้ประทุนเดียวกัน เพื่อให้นักพัฒนาสามารถเขียนโค้ดใน React, Tailwind, Angular, TypeScript, Vue และอื่นๆ ในโปรเจ็กต์เดียวกันโดยไม่ต้องผ่านขั้นตอนการกำหนดค่าในแต่ละครั้ง

บทความนี้สาธิตขั้นตอนการติดตั้งและการกำหนดค่าที่เกี่ยวข้องกับการใช้งานโปรเจ็กต์ Astro.js

จะติดตั้งและกำหนดค่า Astro.js บน Windows ได้อย่างไร?

การติดตั้ง “ Astro.js ” สามารถดำเนินการได้โดยใช้ “ เวลา 22.00 น ”, “ เวลาบ่ายโมง ', หรือ ' เส้นด้าย ” แต่ขั้นตอนยังคงเหมือนเดิม แต่ในการสาธิตครั้งนี้ “ เวลา 22.00 น ” Node Package Manager จะถูกใช้งาน มาดูคำแนะนำขั้นตอนการติดตั้งเฟรมเวิร์ก Astro.js บน Windows ทีละขั้นตอนกัน

ข้อกำหนดเบื้องต้น

หากต้องการติดตั้งและกำหนดค่า Astro.js บน Windows ภายในเครื่อง จำเป็นต้องปฏิบัติตามข้อกำหนดเบื้องต้นบางประการ ซึ่งรวมถึง:

• “ เจส ” ต้องมีเวอร์ชันขั้นต่ำ “v16.12.0”
• แนะนำให้ใช้โปรแกรมแก้ไขข้อความ Visual Code
• ความรู้พื้นฐานสำหรับการใช้พรอมต์บรรทัดคำสั่ง

ขั้นตอนที่ 1: การเริ่มกระบวนการติดตั้ง

ขั้นแรก เปิดพรอมต์บรรทัดคำสั่ง ถัดไป ไปที่ไดเร็กทอรีโครงการที่คุณจะใช้ Astro.js ผ่านทาง ' ซีดี ' สั่งการ:

หลังจากนั้นให้ดำเนินการ “ npm สร้าง astro@latest ” คำสั่งเพื่อเปิดใช้งาน “ Astro.js ” กระบวนการติดตั้ง:

ขั้นตอนที่ 2: การตั้งชื่อโครงการ

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

ขั้นตอนที่ 3: การกำหนดประเภทโครงการ

Astor.js นำเสนอเทมเพลตและธีมในตัวที่หลากหลายซึ่งนักพัฒนาปลายทางสามารถปรับแต่งได้อย่างง่ายดาย ที่นี่ มีการตอบกลับอีกครั้งเพื่อถามว่าคุณวางแผนจะพัฒนาโครงการประเภทใด:

ขั้นตอนที่ 4: การติดตั้งการพึ่งพา

ตอนนี้ ให้ติดตั้งการขึ้นต่อกันที่แนะนำเพื่อทำให้ขั้นตอนการดำเนินการราบรื่น และเพื่อให้แน่ใจว่าคุณได้รับทุกสิ่งที่จำเป็น:

ขั้นตอนที่ 5: การเพิ่ม TypeScript

ภาษา Astro.js ใช้งานได้กับ HTML, CSS และ JavaScript อย่างไรก็ตาม โมดูลเฟรมเวิร์กอื่นๆ สามารถนำเข้าได้ แต่ที่ส่วนหน้า โครงสร้างของโค้ดจะดูคล้ายกับ HTML “ TypeScript ” ยังสามารถสืบทอดในโครงการได้ตามความต้องการ:

ขั้นตอนที่ 6: การตั้งค่า Astro.js

หลังจากตอบคำถามทั้งหมดแล้ว Astro.js จะสร้างโปรเจ็กต์ที่ปรับแต่งตามความต้องการของผู้ใช้และให้คำแนะนำเกี่ยวกับวิธีการรันโปรเจ็กต์ของคุณผ่านเบราว์เซอร์:

ขั้นตอนที่ 7: การดำเนินโครงการ Astro.js

ตอนนี้ใช้ ' ซีดี ” คำสั่งให้เข้าไปภายในที่สร้างขึ้นใหม่ “ Astro.js ” ไดเรกทอรี:

จากนั้นให้ดำเนินการ “ ผู้พัฒนารัน NPM ” คำสั่งเพื่อเริ่มโปรเจ็กต์ภายในเครื่องดังแสดงด้านล่าง:

ขั้นตอนที่ 8: การเปิดโครงการบนเบราว์เซอร์

ตอนนี้เปิดเบราว์เซอร์แล้วไปที่ “ โลคอลโฮสต์:3000 ” URL ที่จะโหลดโครงการ:

ผลลัพธ์จะแสดงหน้าเว็บที่แนะนำหรือเทมเพลตที่เราติดตั้งระหว่างกระบวนการติดตั้ง นั่นคือทั้งหมดที่เกี่ยวกับการติดตั้งและกำหนดค่า Astro.js บน Windows

บทสรุป

หากต้องการติดตั้ง Astro.js ให้เปิดเทอร์มินัลแล้วไปที่ไดเร็กทอรีโปรเจ็กต์ หลังจากนั้นให้เรียกใช้ ' npm สร้าง astro@latest ” เพื่อเปิดตัวช่วยสร้างการติดตั้งสำหรับ Astro.js จากนั้น ชุดคำตอบจะถูกสร้างขึ้นเพื่อช่วยนักพัฒนาในการกำหนดค่า และตอบตามความต้องการ ต่อไปให้เรียกใช้ ' ผู้พัฒนารัน NPM ” สั่งและเยี่ยมชม “ โลคอลโฮสต์:3000 ” URL เพื่อเปิดโครงการ Astro นั่นคือขั้นตอนทั้งหมดในการติดตั้ง Astro.js บน Windows