Vue: วิธีติดตั้ง VueJs และทดสอบการทำงาน บนเครื่องของเราเอง

ปัจจุบัน (2018) VueJs พัฒนามาถึง Version 2.x แล้ว วันนี้เรามาเริ่มต้นเรียนรู้ VueJs ด้วยการดาวน์โหลด และติดตั้ง VueJs บนเครื่องของเรากันค่ะ 🙂

 

วิธีติดตั้ง VueJs

1. เข้าไปที่เว็บไซต์ Vue.js

VueJs-installation-1

ภาพที่ 1 เว็บไซต์ Vue.js

 

2. หน้าตาของเว็บ อาจจะเปลี่ยนแปลงไปตามกาลเวลา แต่มองหาคำว่า “GET STARTED” และคลิกที่ปุ่ม “GET STARTED” ได้เลยค่ะ 

VueJs-installation-2

ภาพที่ 2 คลิกที่ปุ่ม GET STARTED

 

3. จากนั้น มองมาที่รายการเมนู ฝั่งซ้ายมือ และคลิกที่เมนู “Installation”  

VueJs-installation-3

ภาพที่ 3 คลิกที่ปุ่ม Installation

 

4. เราจะพบกับวิธีการติดตั้ง VueJs แบบต่าง ๆ ในกรณีนี้ ให้มองไปที่หัวข้อ Direct <script> Include

VueJs-installation-4

ภาพที่ 4 หัวข้อ Direct <script> Include

 

5. การใช้งาน VueJs ในขณะที่ทำการพัฒนาซอฟต์แวร์อยู่ ให้เลือก ดาวน์โหลดแบบ “Development Version” เพื่อที่ว่า เราจะได้รับโหมดของการแจ้งข้อผิดพลาด (debug mode) มาด้วย 🙂

VueJs-installation-5

ภาพที่ 5 แสดง Version การใช้งาน

 

6. เมื่อคลิกที่ปุ่ม “Development Version” จะปรากฏหน้าจอ ให้เลือกตำแหน่งในการบันทึกไฟล์ ให้ทำการสร้างโฟล์เดอร์ และจัดเก็บไฟล์เอาไว้ให้เรียบร้อย

 

จากตัวอย่าง จะเก็บไฟล์ vue.js เอาไว้ใน folder ชื่อว่า vue-project

VueJs-installation-6

ภาพที่ 6 แสดงหน้าจอการบันทึกไฟล vue.js

 

 

ทดสอบการทำงาน

1. เปิดโฟล์เดอร์ที่เก็บไฟล์ vue.js เอาไว้ ด้วยเครื่องมือที่ใช้ในการพัฒนาซอฟต์แวร์ หรือ IDE ที่คุณชื่นชอบ และใช้งานได้อย่างเชี่ยวชาญ

 

จากตัวอย่าง เราใช้ VS Code (สามารถดาวน์โหลดได้ที่นี่

VueJs-installation-7

ภาพที่ 7 แสดง IDE ที่ใช้ในการพัฒนาซอฟต์แวร์

 

2. สร้างไฟล์ index.html ขึ้นมา

VueJs-installation-8

ภาพที่ 8 แสดงโครงสร้างของโปรเจ็กต์

 

3. จากนั้นเตรียมโครงสร้าง HTML เอาไว้ ด้วยการกดเครื่องหมาย  ! 

VueJs-installation-9

ภาพที่ 9 แสดง code ในไฟล์ index.html

 

4. ตามด้วยการกดปุ่ม Tab เราจะได้ โค้ดดังนี้ขึ้นมา

 

5. ทำการ import ไฟล์ vue.js เข้ามาใช้งาน ด้วย  <script src="vue.js"></script>  ในส่วนของแท็ก <head>  ใต้แท็ก <title> 

 

6. สร้างไฟล์ JavaScript ขึ้นมาอีก 1 ไฟล์ ตั้งชื่อว่า app.js

VueJs-installation-10

ภาพที่ 10 แสดงโครงสร้างของโปรเจ็กต์

 

7. กลับมาที่ไฟล์ index.html ทำการ import ไฟล์ app.js เข้ามาใน <body>  ของไฟล์ HTML ด้วย <script src="app.js"></script>  ก่อนปิดแท็ก </boby>

 

8. เตรียมโครงสร้าง HTML เพื่อใช้ในการทดสอบการทำงาน โดยเป็นโค้ดที่ใช้ในการรับข้อความเข้ามา และแสดงผลข้อมูลที่ผู้ใช้กรอกเข้ามาทันที (รายละเอียดจะอธิบายในบทความต่อ ๆ ไปค่ะ )

 

9. ทดสอบเขียนคำสั่ง VueJs ในไฟล์ app.js ดังต่อไปนี้ ประกอบไปด้วย 3 ส่วนหลัก ๆ คือ

el :           ย่อมาจาก element จะเห็นว่า เราโฟกัสไปที่ id ชื่อว่า app (#app)

data :           คือส่วนของข้อมูลที่เราจะส่งไปแสดงผล ใน {{ title }}

methods  :           คือส่วนของ function เราได้รับ event เข้ามา และสั่งให้ title เปลี่ยนไปตามค่าที่ผู้ใช้กรอกเข้ามา

 

 

10. ดูผลลัพธ์การทำงาน ที่หน้าจอ browser ข้อความ Hello World จากไฟล์ app.js จะไปแสดงผลที่ {{ title }}  ในไฟล์ index.html

VueJs-installation-11

ภาพที่ 11 แสดงหน้าจอ web browser

 

11. ทำการกรอกข้อความลงไปใน Text Box จะปรากฏ ข้อความที่เรากรอก ใต้กล่องรับข้อความ Yo!Yo! แค่นี้ก็เป็นอันเรียบร้อยค่ะ 🙂

VueJs-installation-12

ภาพที่ 12 แสดงหน้าจอ web browser

 

12. สามารถศึกษาเพิ่มเติมได้ที่มนู “Learn” 

VueJs-installation-13

ภาพที่ 13 แสดงเมนู “Learn”

 

 

สรุป

ในระหว่างการพัฒนาซอฟต์แวร์ ให้เลือกติดตั้ง VueJs แบบ Development Version เพื่อที่เราจะได้โหมด debug มาไว้ใช้งานด้วยเสมอ 🙂

 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ