สร้าง Project Vue.js ง่าย ๆ ด้วย Vue CLI 3

สวัสดีคร๊าบบบ~!! ห่างหายจากการเขียน Blog ไปนานมาก มากแบบว่า… มว๊ากกกกกกกกก ด้วยติดภารกิจไปถ่ายทำ Mission Impossible 6 ด้วยภาวะงานรุมเร้า แต่ก็ได้เล่นอะไรใหม่ ๆ อยู่พอสมควร หนึ่งในนั้นก็คือ Vue CLI 3 ที่เพิ่งจะออก Stable version มาได้เพียง 4 วัน ซึ่งผมมีโอกาสได้เล่นตั้งแต่ Beta แรก ๆ เมื่อ 2-3 เดือนก่อน

Vue.js เป็น JavaScript Framework ที่ทรงพลัง สามารถสร้าง Single Page Application (SPA) ได้อย่างง่ายดาย จากที่เคยเขียนเว็บด้วย jQuery มาก่อน การจัดการ UI ที่ซับซ้อน มีความยุ่งยากมาก ๆ แต่ Vue.js สามารถจัดการปัญหาได้ง่ายมาก ๆ ง่ายขนาดที่ว่า น้อง ๆ 6 คน ที่ไม่มีสกิลการเขียนเว็บมาก่อนเลย สามารถใช้ Vue.js ทำโจทย์ที่คิดขึ้นมาเพื่อที่จะวัดว่า สามารถนำ Vue.js มาใช้งานกับ Project ที่กำลังจะเริ่มได้หรือไม่ แค่เพียง 3 วัน น้อง ๆ ทั้ง 6 คน สามารถทำโจทย์ที่ให้ไปได้แล้ว

แต่จากความง่ายของ Vue.js มันมีอะไรซ่อนอยู่ การที่เริ่มแบบง่าย เมื่องานมีความซับซ้อน ก็จัดการมันได้ยาก จึงได้มองหาวิธีที่เหมาะสม และก็พบว่า Vue.js ได้มีเครื่องมือที่ชื่อว่า Vue CLI เตรียมไว้สำหรับให้เราขึ้น Project ได้อย่างรวดเร็ว

 

ติดตั้ง Vue CLI

ก่อนอื่น ต้องทำการติดตั้ง Node.js ก่อน เพื่อที่จะได้ npm มาใช้งาน แล้วทำการเปิด Terminal ขึ้นมา พิมพ์คำสั่งเพื่อติดตั้ง Vue CLI ดังนี้

สำหรับผู้ใช้งาน macOS และ Linux อย่าลืมพิมพ์ sudo ไว้ด้านหน้าด้วยนะครับ

หรือสำหรับใครที่ใช้ yarn ก็ใช้คำสั่งนี้

รอจนกว่าจะติดตั้ง Vue CLI เสร็จ…

เราสามารถตรวจสอบ Version ของ Vue CLI ได้ด้วยคำสั่ง vue -V

 

สร้าง Vue.js Project ด้วย Vue CLI

การสร้าง Vue.js Project ด้วย Vue CLI นั้น เราจะใช้คำสั่งดังนี้

เช่น

Vue CLI ก็จะให้เราเลือก Preset ในการสร้าง Project โดยมีตัวเลือกคือ default ก็จะมี babel และ eslint มาให้ ง่าย ๆ

ส่วนผมชอบเลือกฟีเจอร์เอง ก็จะเลือก Manually select features

เลือก Preset ที่ต้องการ

หลังจากนั้น จะมีให้เลือกว่า ต้องการฟีเจอร์อะไรบ้าง โดยสามารถกดปุ่มลูกศรเลื่อนขึ้นลง และกดปุ่ม Space bar เพื่อเลือกฟีเจอร์ที่ต้องการได้

เลือก Feature ที่ต้องการ

หากเลือกฟีเจอร์ Router ไว้ จะต้องกำหนดว่า จะใช้ History Mode มั๊ย ถ้าใช้ จะได้ URL สวย ๆ โดยไม่มี # อยู่หน้า Route แต่ต้อง Config ให้ Web Server ใช้งาน Fallback ได้ด้วยนะ

ตัวเลือกโหมด History สำหรับ Router

หากเลือก CSS Pre-processors สามารถเลือกได้ว่าจะใช้ตัวไหน

เลือก CSS Pre-processors ที่ต้องการใช้งาน

สำหรับฟีเจอร์ Linter / Formatter สามารถเลือกได้ว่า จะใช้ Config ไหน

เลือก Config ของ Linter / Formatter ที่ชอบ

ต่อด้วยการกำหนดว่า ให้ Linter ทำงานอย่างไร

ตัวเลือกสำหรับ Linter

ตัวเลือกสำหรับฟีเจอร์ Unit Testing ว่าจะใช้เครื่องมือตัวไหน

เลือกเครื่องมือสำหรับ Unit Testing

เลือกว่าจะเก็บ Config แยกไฟล์กัน หรือเก็บรวมใน package.json

เลือกที่เก็บ Config

และคำถามสุดท้ายจาก Vue CLI ว่าเราต้องการเก็บ Config ทั้งหมด ไว้เป็น Preset หรือไม่

เซฟ Config ไว้เป็น Preset

หลังจากนี้ Vue CLI จะทำการสร้าง Project ให้ใน Folder ชื่อเดียวกับชื่อ Project และทำการสร้าง Git Repository ให้ด้วย และเมื่อติดตั้งทุกอย่างเรียบร้อยแล้ว จะทำ Git Commit ให้ด้วยเลย สบ๊ายยยยยย~!!

Vue CLI 3 เมื่อ Create Project

จากรูปด้านบน Vue CLI จะบอกให้เราเข้าไปยัง Folder ของ Project และบอกคำสั่งเพื่อรัน Project ที่สร้างขึ้นมา

และนี่คือไฟล์ทั้งหมดที่ Vue CLI 3 สร้างมาให้พร้อมใช้งาน

Vue project file structure ที่สร้างมาจาก Vue CLI 3

 

การรัน Project

จากรูปก่อนนี้ Vue CLI ได้บอก Command สำหรับ Run ไว้แล้ว นั่นคือ npm run serve นั่นเอง

Vue project เมื่อรัน
Vue project เมื่อรัน

ลองเปิดเว็บ ตาม URL ที่เห็นบน Terminal ก็จะพบกับเว็บที่สร้างมาจาก Vue CLI 3 แล้ว ซึ่งจะเปลี่ยนไปตามฟีเจอร์ที่เราเลือกจาก Vue CLI ด้วยนะ

หน้าแรกของ Vue project ที่สร้างจาก Vue CLI 3

 

Vue CLI 3 GUI

ใน Vue CLI 3 นั้น ได้มีการเพิ่มเครื่องมือที่ให้เราสามารถสร้าง Project ได้ผ่าน GUI บน Web Browser ได้ แค่พิมพ์คำสั่ง vue ui บน Terminal ก็จะพบกับ Vue CLI 3 GUI แล้ว ซึ่งเป็นจุดที่ทำให้ผมอยากจะมาเขียน Blog เรื่องนี้ เมื่อ 2 เดือนก่อน แต่ไม่ว่างมาเขียนซักที จนมีคนนำไปเขียน Blog ไว้หลายคนเลย เลยไม่เขียนแล้วกัน แต่จะแนบ Link ไว้ท้าย Blog ละกันนะ

ซึ่งจากที่ได้มีโอกาสเล่นตั้งแต่ Beta version แรก ๆ และพบ Bug เมื่อใส่ Vue Router ด้วย แต่สามารถใส่ทีหลังได้ แต่ ณ ตอนนี้ ไม่มี Bug นี้แล้ว เย่~!!

แต่มันก็ยังเป็น Beta version อยู่นะ โปรดใช้จักรยานและความระมัดระวังในการใช้งาน

ความดีงามของ Vue CLI 3 GUI ที่ผมชอบ ก็มีประมาณนี้

  • สร้าง Project ผ่าน GUI ได้
  • เปิด Project ที่สร้างไว้ก่อนหน้านี้แล้ว มาแก้ไขได้
  • เพิ่ม/ลบ/อัพเดต Plugin และ Dependency ได้
  • Config Project ได้
  • Config พวกฟีเจอร์ต่าง ๆ ง่ายมาก (โดยเฉพาะ ESLint สำหรับ Vue นี่ ทำมาดีสุด ๆ มี Link ให้จิ้มไปดูว่า ถ้าเปิด Linter ตัวนี้แล้ว แบบไหนผ่าน แบบไหนไม่ผ่าน)
  • Run, Build, Test, Lint ได้

 

สำหรับ Vue CLI 3 นี้ ทำออกมาได้ดีมาก ใครใช้ Vue CLI 2 อยู่ แนะนำให้ลองเล่นดูครับ แล้วจะติดใจ ^_^

 

Blog แนะนำ

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.