Vue คลิกๆ ตกแต่ง อัพขึ้น (Vue CLI + Router + Bootstrap + GitHub page)
การเขียนเว็บในสมัยนี้อะไรๆ ก็ดูง่ายไปหมด คลิกๆ ลากๆ วางๆก็ได้เว็บมาแล้ว แถมเว็บสมัยนี้ต้องรวดเร็ว ทันใจ เปิดมาแล้วถ้าโหลดนานๆ ก็จะหงุดหงิดไม่อยากใช้เว็บนั้นแล้ว เรื่องความสวยงามก็ไม่ต้องมีอะไรมาก แค่ดูง่ายๆใช้ง่ายๆ ตกแต่งนิดหน่อยก็พอ เราก็เลยจะมาพูดถึง Vue กัน ถ้าใครตามข่าวเกี่ยวกับเว็บ ก็จะได้ยินชื่อนี้กันบ่อยมาก บางคนยังไม่มีเวลาเล่น บางคนอยากลองใช้แต่กลัวมันใหม่ไป ผมจะบอกเลยครับว่าไม่เลย ถ้าคุณมีพื้นฐาน html javascript หรือ css นิดหน่อยก็พอแล้ว พูดยาวเดี๋ยวเบื่อกัน ไป install กันเลยครับ
เริ่มแรกก็ลง nodejs กันก่อนครับ ใครลงเสร็จก็ลง Vue ต่อเลยครับ
npm install vueเสร็จแล้วก็ลง Vue CLI ครับ
npm install -g @vue/cliจากนั้นรันตัวจัดการของ vue ขึ้นมาเลยครับ
vue ui
คลิกสร้าง project รอซักแปปนึงก็จะได้ออกมาแล้วครับ
คลิก “งาน” “เริ่มการทำงาน” และ “เปิดแอพ”
เรียบร้อยครับผม
Router
อยากให้เว็บมี 2 หน้า link กันอย่างรวดเร็ว
ไปที่ “ปลั๊กอิน” ด้านบนคลิก เพิ่ม “vue-router”
ไปหน้า Dependencies
ที่ vue-router คลิก icon ดาวน์โหลด ข้างๆถังขยะ เพื่ออัพเดท
เสร็จแล้วจ้า เว็บที่มี 2 หน้าต่าง link กัน
Bootstrap
ตกแต่งเว็บให้ดู cool
ไปที่ปลั๊กอิน “เพิ่มปลั๊กอิน” พิมพ์ “bootstrap” เลือก “vue-cli-plugin-bootstrap-vue” กด “ติดตั้ง”
ถ้าลงเสร็จไฟล์ main.js จะมี bootstrap เพิ่มเข้ามา
ไปที่ folder ที่สร้าง vue ใน src แก้ไขไฟล์ App.vue ลบ style และแก้ส่วน html ดังนี้
ลอง save จะพบว่าเว็บที่รันจะรีเฟรชอัตโนมัติโดยไม่ต้องรันใหม่
Vue (HTML + Script + Style)
ลองเล่น animation ของ vue เล่นๆ
แก้ไขไฟล์ Home.vue ดังนี้
ต้องไปลองศึกษามาก่อนนะครับถึงจะเข้าใจ code พวกนี้
และกด save ก็จะได้หน้าตาเว็บที่พอใจละ
ต่อไปก็อัพขึ้น
GitHub page
ไปเว็บนี้ https://github.com/ สมัครเสร็จ ยืนยันอีเมลล์ สร้าง project ตามชื่อตัวเองและเติม .github.io ลงไป เช่น ผมชื่อ adulgun2 เติมเป็น adulgun2.github.io
คลิก create repository
ไปที่ vue ใน build คลิก “เริ่มการทำงาน” รอซักแปปนึง vue จะทำการ build encode ให้ javascript แกะยากขึ้น
ใน folder vue จะมี folder dist ออกมา
clone project ตัวเองลงมา
git clone https://github.com/ชื่อ/ชื่อ.github.ioจะได้ folder ว่างเปล่า
copy ไฟล์ทั้งหมดไปใส่ไว้ใน folder github ที่ clone ลงมา จากนั้นทำการ push ขึ้นไป
git add .
git commit -m "Initial commit"
git push -u origin masterเสร็จแล้วไปที่เว็บ github ไปที่ repository ที่สร้าง
ไปหน้า setting
เลื่อนลงจะพบ github page
คลิก chose theme เลือก theme ที่ชอบ
คลิก select theme
จะพบ ข้อความ Your site is ready to be published at https://adulgun2.github.io/
คลิกที่เว็บ รอซัก 5 นาที ก็จะได้เว็บออกมาดังรูป
สรุป
Vue เป็นอีกหนึ่งทางเลือกสำหรับคนต้องการทำเว็บที่มีความรวดเร็ว ง่าย อะไรๆ ก็ดู realtime ไปหมด ลองศึกษาเพิ่มเติมกันได้เลยนะครับ ขอบคุณครับ
