แค่คลิกๆ สร้างโปรเจค Vue.js ด้วย CLI 3 GUI ง่ายกว่านี้มีอีกไหม!?!


สวัสดีครับผมแมกซ์นะครับ อีกเช่นเคยครับ วันนี้มีของดีมากบอกต่อ หรือจะรู้กันหมดแล้ว เอาเป็นว่า มาบอกหลายๆคนที่กำลังจะเริ่มต้นเขียน Web application ด้วย JavaScript Framework ยอดฮอตฮิต อย่าง Vue.js ที่ในขณะนี้ Github Stars นำ React ไปแล้ว ตอนนี้เขาได้ออก Vue CLI เวอร์ชั่น 3 มาพร้อม GUI ในการจัดการและสร้างโปรเจคใหม่ หรือ Import โปรเจคเก่าที่เคยสร้างมาใช้ก็ยังได้ อย่ามัว พูดพร่ำทำเพลง


The evolution of Homo Frontendalis. Source: blog.qmo.io

TL;DR ก่อนจะเล่า ต้องย้อนกลับไป ขอแบ่งเป็นข้อๆ ยุคแรกๆ ยุคที่ชาว Front-end web development จะต้องน้ำตาตก โดยการจะสร้างโปรเจคขึ้นมาแต่ละครั้ง กว่าจะได้เขียนเว็บกันจริงๆ จะต้องเริ่มด้วยการศึกษาสิ่งต่างๆมากมาย JS ที่ออก ES5 ES6 เค้าต้องออกกันทุกปี เพราะภาษาเขาเป็นภาษาที่ยังไม่ตาย คนเขียนก็จะตายเอา แต่ของใหม่ดีกว่าแน่นอน เดี๋ยวๆ นอกเรื่อง กลับมา Webpack ครับ เครื่องมือจัดการกับพวก Module ต่างๆที่เรานำมาใช้ รวมถึง Framework ของเราด้วย ซึ่งไม่ได้จะมีความ Auto อะไรเล๊ย เทพจริงๆ แต่ต้องบอกมันทุกอย่าง เรียกได้ว่าจะขึ้นโปรเจคที เสียเวลา Config Webpack ไปเป็นวัน จะให้โปรเจคเราคลูๆ เขียน ES5 ES6 ได้ เอ้า! ต้องใส่ babel-loader จะเขียน CSS ต้องใช้ css-loader อีก เอาเข้าไป หรือจะทำ hot-reload code-spliting อะไรละก็สนุกหล่ะครับ เรียกได้ว่า ใช้เวลากับการเรียนรู้สิ่งเหล่านี้มากๆ แต่ก็ไม่ใช่ข้อเสียนะครับ เพราะทำให้เราเข้าใจ Webpack ถึงแก่นวิชาจริงๆ 😂


ยุคกลาง หรือ ยุคทองของนักเขียนเว็บ 🤔 ยุคนี้ เป็นยุคที่คนอย่างผมเข้าถึงพอดี ใช้เวลาในการเรียนรู้ไม่มาก สนุกไปกับมัน น่าจะเป็นเพราะ ไอ้คนสร้าง Framework มันคงเริ่มเห็นความเจ็บปวด ของเหล่าแฟนคลับหน้าใหม่ที่เริ่มเข้ามาใช้ ติดปัญหาเดียวกันในการเริ่มต้น และ โปรเจคต่างๆที่สร้างขึ้นมาก็จะหน้าตาคล้ายๆกันอยู่แล้ว ก็จะสร้างเว็บเหมือนกันอะ จะมีไรต่างกันมากมาย ด้านโครงสร้างก็วางเหมือนๆกัน จึงได้มีการพัฒนาเครื่องมือสร้างโปรเจค CLI ขึ้นมา ตัวนึงที่ดังเอาเรื่องคือ create-react-app ด้วยคอนเซ็ปต์ ที่ว่า no build configuration. และฝั่งของ Vue.js ก็ออก vue/cli มาเหมือนกันโดยบอกว่า “If you are familiar with create-react-app, @vue/cli-service is roughly the equivalent” คือสองเจ้านี้ สร้างเครื่องมือมาเป็น CLI ช่วยอำนวยความสะดวกได้มากเลยที่เดียว ในการสร้างโปรเจค โดยพื้นฐานแล้วก็จะ ทำการสร้างโปรเจคเป็นสเต็ปๆใส่ชื่อ เลือก Features ต่างๆเอา Babel เอา CSS Per-processors ใช้ Linter มาตราฐานไหน เอา Test ด้วยไหม โดยทั้งหมดเหล่านี้ที่เราเลือกไป จะถูกนำไปตั้งค่า Webpack ให้เรา โอ้วโคตรสบาย start dev build ถูกตั้งค่าไว้หมดจด


ยุคปัจจุบัน เรียกได้ว่าเกมพลิกกันเลยทีเดียว 🤪 โดย Vue CLI เวอร์ชั่น 3 ได้ออก GUI ให้เราได้ใช้ในการสร้างโปรเจค โอ้วโห Vue.js นี่ง่ายแล้ว ยังมาพร้อมเครื่องมือที่มีความเรียบง่ายจริงๆ ด้วย CLI ที่มีมาก่อนหน้านี้ก็ไม่ได้จะไม่ดีเลย คือง่ายแล้ว ยังมีง่ายกว่าอีกหรอ แถมจัดหนักจัดเต็มอลังการ เครื่องมือครบชุด พร้อมลง Plugins เสริม


มาเริ่มไปด้วยกันเลยครับ สำหรับคนยังไม่ได้ติดตั้ง ติดตั้งก่อนเลยครับ แล้วรัน GUI ขึ้นมาด้วยคำสั่ง vue ui

npm install -g @vue/cli
yarn global add @vue/cli
vue ui

หลักจากนั้น ทิ้งคีย์บอร์ดของคุณไปเลย 🤩 ผมล้อเล่น! หน้า GUI ของ Vue CLI ก็จะรันขึ้นมาในพอร์ต 8000 เข้าผ่านเว็บเบราว์เซอร์ได้เลย

พบกัน Vue Project Manager หน้านี้จะแสดงโปรเจคของเราทั้งหมด พร้อมกับการสร้างโปรเจคใหม่ หรือ นำเข้าโปรเจคเก่าก็ยังทำได้ รอช้าทำไมลุย (ผมเปลี่ยนเป็นธีม Dark นะ ชอบ มุมซ้ายล่างเลย)


เริ่มด้วยการตั้งชื่อโปรเจคของเราเลยครับ ต่อด้วยกันเลือก Package manager เป็น NPM หรือ Yarn เลือกตามใจชอบเลยครับ พร้อมกับการทำ Git init ในโปรเจคของเราให้ด้วย


เลือก Preset ได้เลยครับสำหรับถ้าเน้นง่ายๆ ก็ Default ไปเลย หรือ ชอบเลือกเองก็ Manual เลยครับ แนะนำครับ จะได้สั่งได้ดั่งใจ เลือกเลยครับว่าเราต้องการใช้อะไรบ้าง ติ๊กๆๆ ง่ายซะเหลือเกิน ใส่ Babel ทำเป็น PWA เลยไหม ใช้ Router Vuex แน่นอน ใช้ Linter / Formatter และมีรูปแบบการเขียน Test ให้เลือกเข้ามาอีก Unit test / E2E test


จะให้ Lint ตอน Save เลยไหม เลือกมาตราฐาน Airbnb หรือ Standard ตามสไตล์ของแต่ละคนได้เลย รอสักครู่… ตัว CLI กำลังทำตามใบสั่งที่ทำส่งไป มันจะ Config ทุกอย่าง และโหลด Dependency ทุกตัวที่เราใช้มาให้พร้อม


ปิ๊งป่อง เสร็จแล้วจ้า ก็จะปรากฏหน้า Plugins ที่เราลงไว้ แถมยังลงเพิ่มได้อีก ค้นหาที่เราต้องการแล้วกด Install ได้เลย แถมยังติดตามสถานะ อัพเดทได้อีกด้วย


Configuration หน้านี้ทำผมถึงกับร้อง เพราะมันแทบจะเปลี่ยนจากการ Config ที่ต้องแก้ JSON หรือ JS แบบเดิมเป็นการตั้งค่าผ่าน GUI ได้เลย อันนี้สิง่ายจริง


Tasks มาพร้อมเครื่องจัดชุดใหญ่ไฟกระพริบ โดยสามารถคลิก Start task เพื่อ Serve โปรเจคเราขณะ dev ให้ได้เลยแถมบอกขนาด ของส่วนประกอบต่างๆ ความเร็วที่ทำได้บนสปีดอินเตอร์เน็ตแบบต่างๆ


Build พร้อมแล้วครับกับการ Deploy เรียกได้ว่าครบสูตรจริงๆ ตัวเดียวจบสำหรับ Vue CLI 3 GUI ตัวนี้ !!! 😇


ต้องบอกก่อนเลยก่อนจบ ว่า จริงแล้วผมเพิ่งมาจับ Vue.js เมื่อต้นเดือน เพราะก่อนหน้านี้เขียน React มา ก็เรียกได้ว่า รู้สึกคล่องตัวเอาเรื่อง เพราะใช้ความเข้าใจ React มาปรับใช้กับ Vue.js เรียกได้ว่าแทบจะไม่ต่างกันมากเท่าไหร่ แต่ Vue.js มีการเขียนที่ง่ายกว่า ซึ่งจะได้มาในผลลัพธ์ที่เหมือนๆกัน เรียกได้ว่า ออกแบบมาให้เขียนง่ายจริงๆ รวมถึง เครื่องมือตัวช่วยพวกนี้ ที่ออกกันมารัวๆ ให้ชาว Vue.js ได้ใช้กัน บทความนี้ไม่ได้จะมาตัดสิน Framework ตัวไหนดีกว่ากัน แต่มานำเสนอส่วนที่ Vue.js มี ต้องบอกเลยว่าเวลานี้เกมพลิกจริงๆ และ ได้ยินข่าวแว่วๆ ว่า Vue Native กำลังจะมา 🤓