Tag: VueJs

ทำ Route ใน Vue

บทความนี้ผมจะมาทำ Route ใน Vue.js กันแบบง่าย ๆ ครับ เพื่อจะสามารถนำไปต่อยอดได้ เริ่มด้วยไฟล์ main.js ครับ ตามโค้ดด้านล่าง จากนั้นก็ไฟล์ App.vue ครับ ตามโค้ดด้านล่าง จากโค้ดเรามีการ import router ดังนั้นใน Folder router ผมได้สร้าง index.js ไว้ตามตัวอย่างโค้ดด้านล่างครับ จากโค้ดผมจะทำการ route login หน้าแรก แล้วก็ 404 ไว้นะครับ ส่วนนอกเหนือจากนั้นผมจะให้มันทำการ redirect ไปที่ path 404 นะครับ จากนั้นเราไปดูที่ views กันต่อครับ ซึ่งผมได้สร้าง index.vue ไว้นะครับ เพื่อให้เป็นหน้าแรกที่เข้ามา โค้ดก็จะได้ตามด้านล่างครับ จากนั้นใน views login ผมก็จะเขียนโค้ดง่าย ๆ ไว้ดังนี้ครับ เพียงแค่นี้เราก็ได้ route แบบง่าย

Add Vuetify ใน Vue project

Vuetify เป็น framework สำหรับ vue.js ถูกสร้างขึ้นมาเพื่อเป็น component สำหรับการออกแบบเป็น Material Design ดังนั้น บทความนี้ผมต้องการที่จะ add vuetify เข้าไปใน vue project ครับ ส่วนวิธีการนั้นผมจะใช้คำสั่ง ตามด้านล่าง เมื่อรันแล้วจะได้ดังตัวอย่างด้านล่าง ซึ่งตัวอย่างด้านล่างผมเลือกติดตั้งแบบ Default ไปนะครับ เมื่อได้แล้วลองใช้คำสั่ง npm run serve ดูครับ จะได้หน้าตาใหม่สวย ๆ ตามรูปด้านล่างครับ จาก console ตรงสีแดง ๆ จะเห็นว่ามันมีการเปลี่ยนแปลงแก้ไขไฟล์อะไรบ้าง ลองเข้าไปดูไฟล์แต่ละไฟล์ จะพบว่า โค้ดมีการแก้ไขครับ ซึ่งเป็นวิธีที่ง่ายมากในการติดตั้ง vuetify เพราะเราไม่ต้องไปแก้แต่ละไฟล์เอง

ติดตั้งและลองทดสอบ Vue.js

บทความนี้ผมจะมาลองติดตั้งและทดสอง Vue กันครับ ซึ่งผมจะทำไปด้วยเขียนไปด้วย ผิดพลาดประการใดก็ขออภัยไว้ ณ ที่นี้ด้วยครับ ผมจะทำการติดตั้ง Vue/cli โดยใช้คำสั่ง เมื่อติดตั้ง vue/cli ได้แล้วจะเป็นประมาณนี้ ต่อไปผมจะสร้าง app โดยใช้ vue โดยใช้คำสั่ง ตามด้านล่าง แต่ต้องเข้าไปใน Folder ที่เราต้องการสร้าง app ด้วยนะครับ ในที่นี้ผมอยู่ที่ easyloansystem ครับ จากนั้นก็รันเลย จากนั้นเมื่อได้แล้ว เราก็มาสร้างโปรเจ็คกัน โปรเจ็คที่ผมจะสร้างชื่อว่า easyloansystem ดังนั้นผมเลยสร้างโดยใช้คำสั่ง จากนั้นตรง option การติดตั้งผมเลือกเป็น Default ก่อนนะคับ เมื่อเสร็จแล้วก็จะได้ดังตัวอย่างด้านล่าง เมื่อลองไปดูโครงสร้างโพลเดอร์ก็จะได้ประมาณด้านล่าง จากนั้นเราลองไปรัน project เพื่อทดสอบดู ด้วยคำสั่ง เมื่อรันคำสั่งแล้วก็ได้ประมาณนี้ จาก console ข้างบน app จะรันอยู่ที่ port 8082 ดังนั้น ลองเข้าไปเช็คที่ http://localhost:8082/