กลับหน้าแรกของคอร์ส

# การเขียน Vue.js Components

พัฒนา registration form โดยเลือกระหว่างการใช้ Bootstrap หรือ Buefy (Bulma)

# แบบฝึกหัด

# 1. สร้าง Vue Project

ให้สร้าง vue project ขึ้นใหม่ ใน workspace เดิม โดยใช้ชื่อ wk07-name (เปลี่ยน name เป็นชื่อตัวเอง)



 

d:\
cd toolb\workspace
vue create wk07-{เปลี่ยนชื่อด้วย}
1
2
3

# 2. สร้าง Vue.js component ที่เป็น registration form

สร้าง registration form โดยใช้แบบฟอร์มนี้เป็นตัวอย่าง

# 3. เลือกใช้ CSS Framework สามารถใช้ได้ทั้ง Bootstrap หรือ Buefy แล้วแต่ชอบ

# ติดตั้ง buefy ลงใน vue project

ขั้นตอนการติดตั้งเพิ่มเติมหากต้องการใช้ Buefy ซึ่งเป็น CSS component สำหรับ Vue โดย Bulma

  • ติดตั้ง buefy ผ่าน yarn
yarn add buefy
1
  • สร้าง folder ชื่อ plugins อยู่ level เดียวกับไฟล์ App.vue

  • สร้างไฟล์ buefy-vue.js ใน plugins folder และโดยมี code ด้านล่าง

import Vue from 'vue';

import Buefy from "buefy";
import "buefy/dist/buefy.css";

Vue.use(Buefy);
1
2
3
4
5
6
  • แก้ไขไฟล์ main.js โดยเพิ่มบรรทัดที่ 3 และเติม ; ท้ายบรรทัดให้ครบ ดังภาพ


 







import Vue from 'vue';
import App from './App.vue';
import './plugins/buefy-vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');
1
2
3
4
5
6
7
8
9

# 4. ส่งงาน

  • Push งานขึ้นบน GitHub ตาม repository ของแต่ละคน

# วิธีการใช้งาน GitHub

  • ตั้งค่า git โดยใส่ชื่อ ชื่อสกุล และอีเมล์เดียวกับที่ลงทะเบียนไว้กับ GitHub
git config --global user.name "FIRST_NAME LAST_NAME"
git config --global user.email "MY_NAME@example.com"
1
2
  • สร้าง repository บน GitHub ในที่นี้ใช้ชื่อ wkxx-name (เปลี่ยนเลขทุกสัปดาห์ และใส่ชื่อของตัวเอง)

  • ทำการ initial git และ push ไฟล์โปรเจ็คทั้งหมดไปยัง GitHub (อย่าลืมเปลี่ยน wkxx-name เป็นชื่อ repository ของตัวเอง)



 
 


git init
git add .
git commit -m "week 07 homework"
git remote add origin https://github.com/is322/wkxx-name.git
git push -u origin master
1
2
3
4
5