เริ่มต้นใช้งาน Vue.js ด้วย Buefy
สวัสดีครับวันนี้ผมจะมาสอนวิธีติดตั้ง Vue.js และ Buefy แต่ก่อนที่เราจะเริ่มติดตั้งกันเราจะมาทำความรู้จักกับสองตัวนี้กันก่อนครับ
Vue.js คือ Framework ที่ใช้จัดการในส่วนติดต่อผู้ใช้ (UI) ซึ่งเป็นการผสมผสานระหว่าง AngularJs กับ React เพื่อสร้าง Reactive Component คือคอมโพแนนท์ที่สามารถอัพเดทตัวเองได้ Reactive นั้นคือการโต้ตอบแบบทันที หากค่าในตัวแปรใดตัวแปรหนึ่งใน DOM มีการเปลี่ยนแปลงตัวแปรนั้นก็จะสามารถเปลี่ยนแปลงได้ทันที
ส่วน Buefy นั้นคือ CSS Framework ที่เกิดจากการรวมกันของ Vue.js กับ Bulma ซึ่งทำหน้าที่จัดการรูปแบบโครงสร้างหน้าตาของเว็บไซต์
เมื่อทำความรู้จักกับ Vue.js และ Buefy กันแล้ว ต่อมาเราจะมาเริ่มติดตั้ง Vue-cli ซึ่งเราจะใช้ในการติดตั้งโปรเจคของเราครับ
อันดับแรกหากใครที่ยังไม่มี Node.js ให้ทำการดาวน์โหลดแล้วติดตั้งได้เลยครับ https://nodejs.org/en/download
เมื่อติดตั้ง Node.js เรียบร้อยแล้วให้ทำตามขั้นตอนด้านล่างต่อได้เลยครับ
ขั้นตอนที่ 1 ให้ทำการติดตั้ง Vue-cli โดยเปิด command prompt ขึ้นมาแล้วพิมพ์คำสั่งตามด้านล่างเลยครับ
npm install -g @vue/cliหากใครที่ไม่รู้วิธีใช้ command prompt ให้เข้าไปศึกษาที่ลิ้งนี้ได้เลยครับ คลิก เครดิตจาก Blog ของ Mr.Rukpong
ขั้นตอนที่ 2 เมื่อติดตั้ง Vue-cli เสร็จแล้วเราจะทำการสร้างโปรเจคของเรากันครับ ให้เข้าไปที่ Directory ที่ต้องการเก็บโปรเจคของเราไว้ เมื่อได้ Directory ที่ต้องการแล้วให้พิมพ์คำสั่งตามด้านล่างได้เลยครับ
vue create vue-buefyvue create คือคำสั่งที่ใช้สร้างโปรเจค ส่วนด้านหลังคือชื่อของโปรเจคเราครับ ในที่นี้ผมจะใช้ชื่อว่า vue-buefy
ระบบก็จะถามเราว่าจะตั้งค่าโปรเจคเป็นแบบไหน ตรงนี้ให้เราเลือกเป็น default ได้เลยครับ
ต่อมาก็จะให้เราเลือกว่าจะใช้ Package manager ตัวไหน ตรงนี้ให้เราเลือกเป็น NPM
Vue-cli ก็จะทำการสร้างโปรเจคให้เรา เมื่อสร้างเสร็จแล้วก็จะได้โครงสร้างไฟล์ตามภาพด้านล่างนี้ครับ
ต่อมาเราจะมาลองรันโปรเจคดูกันครับให้ไปที่ Directory ของโปรเจคเรา โดยพิมพ์คำสั่ง cd แล้วตามด้วยชื่อโปรเจคของเรา คำสั่งนี้จะเป็นการเข้าถึงไฟล์โปรเจคที่เราสร้างไว้ครับ
cd vue-buefyเมื่อเข้ามาในโปรเจคแล้วให้เราทำการรันโดยพิมพ์คำสั่งตามด้านล่างเลยครับ
npm run serveพอรันเสร็จแล้วให้เราเข้าไปที่ http://localhost:8080 ถ้ารันสำเร็จก็จะเป็นเหมือนภาพด้านล่างเลยครับ
ตอนนี้เราก็ได้สร้างโปรเจค Vue.js ของเราเป็นที่เรียบร้อยแล้ว ขั้นต่อไปเราจะทำการติดตั้ง Buefy ลงในโปรเจคของเรากันครับ
ขั้นตอนที่ 3 ให้เราทำการติดตั้ง Buefy โดยพิมพ์คำสั่งตามด้านล่างนี้ใน command prompt แล้วกด Enter
npm install buefyเมื่อติดตั้งเสร็จแล้วให้เราทำการเรียกใช้ Buefy ใน Vue.js โดยไปที่ ./src/main.js แล้ว คัดลอกโค้ดด้านล่างไปใส่ที่ไฟล์ main.js
import Buefy from ‘buefy’
import ‘buefy/dist/buefy.css’Vue.use(Buefy)
อธิบายโค้ด: คำสั่ง import Buefy from ‘buefy’ และ import ‘buefy/dist/buefy.css’ คือการ import Buefy เข้ามา แล้วใช้คำสั่ง Vue.use(Buefy) ในการเรียกใช้ Buefy
ต่อมาเราจะทำการ import icon เพื่อให้ Buefy สามารถใช้งาน icon ได้ให้เราไปที่ ./public/index.html แล้วทำการ คัดลอกโค้ดด้างล่างไปใส่ที่ไฟล์ index.html ส่วนแรกจะเป็นการ import icon ของ Material Design Icons และส่วนที่สองจะเป็น icon ของ Font Awesome
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
เมื่อเราได้ทำการติดตั้ง Buefy เป็นที่เรียบร้อยแล้ว ต่อมาเราก็จะมาทำการทดสอบใช้งานกันครับ ให้เราคัดลอกโค้ดด่านล่างนี้ไปใส่ในไฟล์ HelloWorld.vue โดยเข้าไปที่ ./src/component/HelloWorld.vue
<section class="container has-text-left"><b-field label="Name"> <b-input value="Kevin Garvey"></b-input> </b-field> <b-field label="Email" type="is-danger" message="This email is invalid"> <b-input type="email" value="john@" maxlength="30"> </b-input> </b-field> <b-field label="Username" type="is-success" message="This username is available"> <b-input value="johnsilver" maxlength="30"></b-input> </b-field></section>
เมื่อเสร็จแล้วให้เราลองรันดูครับหากได้หน้าตาเหมือนภาพด้านล่างนี้ก็เป็นอันว่าเรียบร้อยครับ
หากใครที่ต้องการศึกษาเพิ่มเติมก็สามารถเข้าไปที่เว็บของตามลิ้งที่ให้ไว้ได้เลยครับ Vue.js(https://vuejs.org/v2/guide) Buefy(https://buefy.org/documentation)
หรือ เรียนรู้การใช้งานคลาสใน Buefy จากบทความของเรา ได้ที่นี่ เช่นกันครับ
