ลองสร้าง Vue.js โปรเจคด้วย vue-cli 3 : vue ui แบบล้ำๆ

https://cli.vuejs.org/

เนื่องจากลองหัดเขียน vue.js มาซักพักและตอนแรกใช้ vue-cli 2 ซึ่งเวลาสร้างโปรเจคจะต้องใช้ command line ในการสร้างโปรเจคจาก template

หลังจากนั้นก็มี version ใหม่ออกมา เลยอยากลอง vue-cli 3 ดูว่ามีอะไรใหม่บ้างพบว่า มีคำสั่ง สำหรับสร้างโปรเจคด้วย interface บน Browser แบบดูดีๆ ก็เลยลองใช้แบบงงๆ

เริ่มจากติดตั้ง vue-cli 3 กัน แต่ต้องมี node.js ในเครื่องก่อนนะ ติดตั้ง yarn ด้วยก็ดี

เปิด terminal ขึ้นมาและพิมพ์คำสั่งติดตั้ง

npm install -g @vue/cli
# OR
yarn global add @vue/cli

หลังจากนั้นไปที่ path ที่เราจะสร้างโปรเจ็คและใช้คำสั่ง

vue ui

คำสั่งนี้คือพระเอกของงานเลย หลังจากพิมพ์แล้วจะทำการสร้าง GUI และเปิด Browser ขึ้นมาเพื่อเตรียมการสร้างโปรเจ็ค

เรียบหรูดูดี ซึ่งจะพบว่าไม่มีอะไรเลย เพราะเรายังไม่ได้สร้างโปรเจ็ค

เลือกไปที่ Tab : Create จะพบกับ interface ที่หน้าตาคล้ายกับ window ตามภาพ

จากนั้นผมกดปุ่ม Create a new project here จะพบกับหน้าที่ให้ตั้งชื่อโปรเจค

ในส่วนที่ 1 ก็ตั้งชื่อโปรเจคไปตามที่ต้องการ

ในส่วนที่ 2 จะให้เลือก Package manager หรือตัวสำหรับติดตั้งนั่นเอง ผมเลือก yarn เลยเพราะมันเร็ว

ในส่วนที่ 3 จะให้เลือกเปิดหรือปิด เกี่ยวกับการเขียนทับลงไปใน folder ถ้ามีอยู่แล้ว ซึ่งผมก็ปิดไว้นั่นล่ะ

ในส่วนที่ 4 จะให้เลือกเปิดหรือปิด สำหรับการสร้าง git commit repository เริ่มต้นหรือเปล่า ซึ่งก็เปิดไว้และใส่ข้อความตามที่ต้องการไป

จากนั้นกดปุ่ม Next จะพบกับหน้า Presets

ซึ่งจากข้อความ คร่าวๆ มันคือ ส่วนที่เอาไว้สำหรับตั้งค่า plugin ที่ต้องการและสามารถบันทึกไว้เพื่อใช้ซ้ำได้ในอนาคต โดยไม่ต้องกำหนดค่าใหม่อีกรอบ

โดยที่ให้เลือกจะมี

  1. Default preset ที่ให้มาจะเป็น babel กับ eslint
  2. Manual อันนี่้จะเป็นการเลือก Features เพิ่มด้วยตัวเอง
  3. Remote preset อันนี้น่าจะเป็นการดึงการตั้งค่าที่เคยบันทึกไว้แล้วจะ Remote Repository (ยังไม่ได้ลอง)

ซึ่งเราจะเลือกแบบ Manual ดีกว่า แล้วกด Next เลย

จากนั้นจะมีหน้า Feature ให้เลือกสำหรับใช้ในโปรเจ็ค

ที่ให้เลือกก็มี

  • Babel
  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing
  • Use config files

ในที่นี้ผมจะเลือก Babel, Router, Vuex,Linter / Formatter และกด Next

จะพบกับหน้า Configuration ถามเกี่ยวกับ formatter code ในที่นี้ผมเลือก

ESLint + Prettier

อีกส่วนจะมีเปิดปิดเกี่ยวกับ features ของ Lint ซึ่งผมจะใช้ค่า default

เสร็จแล้วกดปุ่ม Create Project

หลังจากกดปุ่ม Create Project จะมี popup เด้งมาถามอีก เรื่องการตั้งชื่อ Preset ผมก็ใส่ไป กด Create a new preset

หลังจากนั้นจะเข้าสู่หน้าติดตั้งมันก็จะหมุนติ้วๆๆๆๆ อยู่พักนึง

หลังจากโหลดอะไรไปเสร็จแล้ว จะแสดงหน้า Project plugins

ดูเหมือนว่าจะเป็นหน้าสำหรับจัดการ Plugins ที่ติดตั้งไปแล้วและที่จะติดตั้งเพิ่ม

ลองไปสำรวจที่ปุ่ม Add plugin ด้านขวาบน จะพับกบ พบกับ plugin อะไรไม่รู้เต็มไปหมดเลยยังไม่ใช้ ขอข้ามไปก่อน

ที่เมนูด้านซ้ายลองไปที่ Tab Configuration หน่อยมีอะไร จากการสำรวจจะเป็นการตั้งค่าพื้นฐาน vue cli ของ project กับ eslint อันนี้ก็ข้ามไปก่อน

ไปที่ Tab Tasks ดูหน่อย มีคำสั่ง

  • serve
  • build
  • lint
  • inspect

มันคืออะไร ลองไปที่ Tab serve ก่อนเลย โอ้ (O_O) มี Dashboard ด้วย

กด Run task เลย

หลังจาก Run task ที่ Tab : Dashboard จะบอก status ของโปรเจคหลังจาก Run (ล้ำไปอีก O_O)

Tab Analyzer แสดงขนาดไฟล์ของ package ที่ใช้ ก็ล้ำไม่แพ้กัน

Tab Output บอกผลลัพธ์การ run และ การเข้าดูหน้าเว็บ

คลิกที่ link http://localhost:8080/ เพื่อไปดูหน้าเว็บ (กว่าจะได้) ก็จะได้หน้าเว็บ Basic ของ vue

พร้อมกับทำ Router หน้า about มาให้ด้วย ลองคลิกที่ About

ที่นี้ไปดูที่โฟลเดอร์ของโปรเจค ดูว่ามีอะไรบ้างที่มีมาให้ โดยโครงสร้างโปรเจคของ vue-cli 3 จะต่างกับ version ก่อนหน้าอยู่พอสมควร

ตัดกลับไปที่หน้า vue ui บน ฺBrowser ไปที่ Tab build ลองกด Run task ดู พบว่า build พร้อมกับที่ run อยู่ได้ด้วยซะงั้น

ไปดูที่โปรเจคอีกที มีโฟลเดอร์ dist ที่ build มาให้เรียบร้อยแล้ว

ตัดกลับไปอีกที ที่ Tab : lint กด Run task ดู จะขึ้นว่าไม่พบ errors (จะพบได้ไงยังไม่ได้ทำไรเลย)

แล้วสุดท้ายที่ Tab : Inspect ซึ่งน่าจะเอาไว้ดู webpack config (ใช่หรือเปล่าไม่แน่ใจ)

และด้านล่างมีที่เอาไว้ดู log ด้วย

ถ้าหากต้องการ add plugin เพิ่มก็ลองไปหาดูที่ Add plugin

ที่ด้านบนซ้ายเอาไว้กลับไปหน้าหลัก

จะเห็นว่ามีชื่อโปรเจคที่สร้างไว้เมื่อกี้

ที่ Tab Import มีอะไร น่าจะเป็นการเพิ่มโปรเจคที่มีอยู่แล้วเข้ามาที่ vue ui (Vue Project Manager)

ซึ่งจากการลองกด Import this folder จะทำให้มีชื่อโปรเจคซ้ำกันกับตอนแรก (เอ้าซะงั้น)

ถ้าหากจะปิดการใช้งานก็ต้องไปปิดที่ terminal นะครับ ctrl+c แล้วก็ Y

ที่ GUI ก็จะขึ้น Disconnected

น่าจะหมดแล้วนะครับกับ vue cli 3 :vue ui ไปลองเล่นกันดูนะครับ

น่าจะมีอะไรเพิ่มเติมอีกเยอะ

GG Bye….