2 วัน กับ Vue.Js และ Deploy on firebase

2 วัน กับ Vue.Js และ Deploy on firebase

หลังจากได้ไป vue.js ปอดีแจ่ม workshop ในวันที่ 25–26 พฤษภาคม 2562

เราจะมาสรุปการเรียนรู้ ภายใน 2 วันนี้ให้ฟังกัน

วันที่ 1 เรียนรู้ Vue.js เบื้องต้น

มาเริ่มกันเลยดีกว่า ลุย!!!!!!!!!!!!!!!!

1.เราต้องลงnode.js กับ yarn ก่อนนะครับ

$ brew install node

$ brew install yarn

2.ลง Vue.js

$ npm install -g @vue/cli

3.มาสร้างโปรเจคกันดีกว่า

$ mkdir vue-project

$ cd vue-project

$ vue create vue-app (สามารถเลือก default ได้เลยครับ)

$ cd vue-app

4.ลอง run app กันเลย

$ yarn serve ใน terminal ได้เลยครับ

มาเริ่มเขียน Vue.js กันเลยดีกว่า

1. การสร้างตัวแปร และการแสดงค่า

เราสามารสร้างตัวแปรในส่วนของ data() โดยไม่ต้องประกาศชนิดของตัวแปร และการแสดงค่าของตัวแปรโดยการใช้ {{ชื่อตัวแปร}} เช่น {{HelloMsg}}

2. การ Binding data

เราสามารถ binding data โดยการใช้คำสั่ง v-bind เพื่อใช้เรียกค่าจากตัวแปรได้เลย

3. 2 way binding data

เราสามารถทำ 2 way binding ได้โดยการใช้ v-model เพื่อรับค่าจากช่อง input เพื่อนำข้อมูลไปแสดง

4.Render Condition if

การเขียนโปรแกรมมันก็ต้องมี if else ใน vue.js จะใช้ v-if , v-if-else,v-else นะครับ

5.Render Condition Loop

การวนลูปเราจะใช้ v-for และใช้ v-key เพื่อกำหนด key ของ for

วันที่ 2 มาต่อ Vue.js กับการ deploy ขึ้น firebase

1. Computed

เราจะใช้เมื่อต้องการแก้ไขข้อมูลบางตัว ซึ่งผูกมัดกับข้อมูลอื่น ๆ

2.Methods

ใช้เมื่อต้องการเปลี่ยนแปลงข้อมูลหรือกระทำต่าง ๆ กับ state หรือดักจับเหตุการณ์ต่าง ๆ จากผู้ใช้งาน

3.Watch

ใช้งานหลังจากที่ข้อมูลเปลี่ยนแปลงเสร็จแล้ว ซึ่งจะทำการเรียกใช้งาน method ที่ต้องการได้เลย การทำงานใน watcher นั้นมักจะเป็นงานแบบ asynchronous หรือ งานที่ใช้ resource เยอะ ๆ

4. Components

การเรียกใช้ share component มาใช้งาน

5. Props

data ที่ส่งผ่าน component

6.Router

เราต้องเพิ่ม tools ของ router ก่อนนะครับ

$ yarn add vue router

เปิดไฟล์ router.js

เปิดไฟล์ main.js

สร้างไฟล์ home.vue,about.vue และกำหนดหน้าที่จะ route ไปได้เลย

ใช้ router-ling เพื่อกำหนดหน้าที่จะไป

7. การต่อ api ด้วย Axios

เริ่มต้นด้วยการลง axios

$ npm i axios

import ตัวของ axios และกำหนด base url ของ api

axios.get เพื่อ get request ไปที่ api

axios.post เพื่อ post request ไปที่ api

8.สุดท้ายแย้ววววว เตรียม Deploy ขึ้น firebase

สร้างโปรเจคใน firebase แล้วทำตามขั้นตอนที่ firebase แนะนำเลย

พอสร้างเสร็จให้ไปที่เมนู hosting แล้วเริ่มต้นใช้งานเลย

$ npm install -g firebase-tools

$ firebase login

$ firebase init

เลือก hosting

พิมพ์กำหนด directory เป็น dist

ก่อนจะ deploy ให้ $ yarn build ก่อนนะครับ

ปะลุย deploy กัน $ firebase deploy

ตอน deploy จะมีให้เลือก project ใน firebase ให้เราเลือก project ที่เราสร้างได้เลย

เข้าลิ้งที่ Hosting URL ได้เลย สามารถมาลองของผมได้นะครับ link

ปล.ถ้าจะdeploy project ทุกครั้งให้ $ yarn build ก่อน deploy ทุกครั้งนะครับ

credit software development with vue.js แบบปอดีแจ่ม workshop

ที่มา https://firebase.google.com/docs/hosting/?hl=th

https://vuejs.org/v2/guide/