เตรียมพร้อม เริ่มต้นศึกษาใช้งาน VueJS

บทความใหม่ เดือนที่แล้ว โดย Ninenik Narkdee
vuejs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ vuejs

ดูแล้ว 186 ครั้ง


VueJS คืออะไร

Vue.js เป็นเฟรมเวิร์ก (framework) ของ JavaScript ที่ใช้สำหรับพัฒนาแอปพลิเคชันเว็บแอปพลิเคชันแบบ Single Page Application (SPA) ซึ่งเป็นแอปพลิเคชันที่โหลดข้อมูลและทรัพยากรเพียงครั้งเดียวและมีการอัพเดตหน้าเว็บโดยไม่ต้องโหลดหน้าใหม่ เป็นการจัดการข้อมูลและสถานะของแอปพลิเคชันได้อย่างมีประสิทธิภาพ
 
Vue.js ถูกสร้างขึ้นโดย Evan You และเปิดตัวเป็นครั้งแรกในปี ค.ศ. 2014 ซึ่งมีการพัฒนาและการใช้งานที่แพร่หลายขึ้นอย่างรวดเร็ว เป็นเฟรมเวิร์กที่มีขนาดเล็กและเรียนรู้ได้ง่าย แต่ก็มีความสามารถที่มีประสิทธิภาพในการจัดการสถานะและการเชื่อมโยงข้อมูล นอกจากนี้ Vue.js ยังมีคอมโพเนนต์ที่สามารถนำมาใช้เพิ่มเติมได้ตามความต้องการของโปรเจกต์ ทำให้มันเป็นเครื่องมือที่สะดวกและมีความยืดหยุ่นสำหรับนักพัฒนาในการสร้างแอปพลิเคชันเว็บที่ทันสมัยและปรับปรุงได้ง่าย
 

เริ่มต้นใช้งาน VueJS

 
ก่อนเริ่มศึกษาหรือใช้งาน VueJS เราต้องมีความเข้าใจเกี่ยวกับการใช้งานคำสั่ง command line
เบื้องต้น และรู้จักภาษา JavaScript พอสมควร 
 
เตรียมเครื่องมือต่างๆ ก่อนสร้าง Vue Application
- ติดตั้ง NodeJS เวอร์ชั่น 18.3 เป็นต้นไป เนื้อหาต่อไปนี้จะเกี่ยวกับ vue เวอร์ชั่น 3 เป็นต้นไป
- โฟลเดอร์สำหรับพัฒนาโปรเจกต์ ในที่นี้ เราใช้เป็น C:/vuejsdev
- ใช้ VSCode ในการเขียนโปรแกรม และติดตั้ง Vue extension สำหรับ VSCode
 

สร้าง Vue Application

ให้ใช้คำสั่งดังนี้ผ่าน command line เพื่อสร้าง vue application 
 
npm create vue@latest
 
 
ณ เวลาที่เขียนบทความจะเป็น vue เวอร์ชั่น 3
จากนั้นทำตามขั้นตอนบนหน้าจอ ส่วนใหญ่จะกด Enter ผ่านตลอด 
เมื่อขึ้นข้อความ Done จะเป็นการแนะนำการเริ่มการทำงานของ server 
โดยเขาจะแนะนำให้เข้าไปยัง path ของโฟลเดอร์โปรเจกต์ ซึ่งเราใช้เป็น vue-project
แล้วทำการติดตั้ง dependencies และเริ่มทำงานของ server 
 
cd <your-project-name>
npm install
npm run dev
 


 
 
เมื่อ server สำหรับพัฒนาทำงาน ก็จะแจ้ง url ให้เรานำไปเปิดผ่านบราเซอร์
ในรูปตัวอย่างคือ  http://localhost:5173/  

 
 


 
 
ข้างต้นคือ เราได้ทำการติดตั้งส่วนต่าง และเริ่มต้นโปรเจกต์เรียบร้อยแล้ว
 
ให้เราเปิดโปรแกรม  VSCode สำหรับแก้ไขหรือเขียนโปรแกรมต่อไป 

 
 


 
 
อย่าลืมติดตั้ง vue - official extension สำหรับ VSCode สำหรับใช้งาน
 
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: vuejs







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ