มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep1
Tags: fullstack, fastai, vue, docker
Published: 2019-10-25 07:38:42

---
title: มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep1
published: true
date: 2019-09-22 21:08:05 UTC
tags: full-stack,fastai,vuejs,docker
canonical_url: 
---

โลกแห่ง web dev มันกว้างใหญ่ กว่าจะหากระบี่คู่ใจสักเล่มมันเหนื่อย ถ้าใจมันได้ไม้ไผ่ก็อาวุธได้ อันที่จริงผมเองก็หัดเล่นของพวกนี้อยู่บ้างเลยบันทึกไว้ กันลืม เพราะสร้าง project ทีไรก็ลืมทุกที เนื้อหาจะประกอบด้วย Docker + Yarn + Vue.js + Vuetify.js + FastAPI ลองดูกันสักตั้ง

### Docker

ใครไม่รู้จัก Docker ไปหาอ่านนะคนอื่นเขียนไว้เยอะ แต่ถ้าอยากงงก็อ่านของผมก็ได้ บน Windows ผมไม่เคยลองสักทีอาจจะช่วยเหลือได้ไม่มากถ้าใครมีปัญหา

หลายคนสงสัยว่าชวนใช้ docker ทำไม จริงๆ สามารถทำบนเครื่องได้นะแหละแต่หลายคนแค่อยากลอง หรือ ไม่อยากให้ชุดนี้ไปลงในระบบโดยไม่รู้ว่ามันไปอยู่ที่ไหน การใช้ docker เมื่อทำเละ หรือ เบื่อแล้วก็ลบทิ้งได้ง่ายๆ โดยใช้คำสั่ง docker ลบทั้ง container และ image

- [EP1 Docker ทีเล่น ทีจริง](https://medium.com/nectec/ep1-docker-%E0%B8%97%E0%B8%B5%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99-%E0%B8%97%E0%B8%B5%E0%B8%88%E0%B8%A3%E0%B8%B4%E0%B8%87-60e58b1cb095)
- [EP2 Docker ทีเล่น ทีจริง](https://medium.com/nectec/ep2-docker-%E0%B8%97%E0%B8%B5%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99-%E0%B8%97%E0%B8%B5%E0%B8%88%E0%B8%A3%E0%B8%B4%E0%B8%87-71d1a7f3f3bb)
- [EP3 Docker ทีเล่น ทีจริง](https://medium.com/nectec/ep3-docker-%E0%B8%97%E0%B8%B5%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99-%E0%B8%97%E0%B8%B5%E0%B8%88%E0%B8%A3%E0%B8%B4%E0%B8%87-9d08d7b4b8dd)
- [EP4 Docker ทีเล่น ทีจริง](https://medium.com/nectec/ep4-docker-%E0%B8%97%E0%B8%B5%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99-%E0%B8%97%E0%B8%B5%E0%B8%88%E0%B8%A3%E0%B8%B4%E0%B8%87-c4dafb7a7e37)

### Docker Compose

ผมเตรียมชุด service ของ docker ที่ใช้สำหรับ dev (ย้ำว่าสำหรับ dev) ไว้เป็น docker-compose file ซึ่งจะประกอบด้วย

#### vuejs

nodejs สำหรับใช้จัดการ project ผมตั้งชื่อ service ว่า vuejs จะทำการติดตั้ง vue-cli ไว้ ถ้ามีการ down service นี้ก็ต้องติดตั้งใหม่ซึ่งก็ไม่ได้ยุ่งยากอะไร

#### api

เป็น service ที่ใช้ python ผมยกตัวอย่างเป็น fastAPI รายละเอียดศึกษากันได้ที่

[https://fastapi.tiangolo.com](https://fastapi.tiangolo.com/)

### เริ่มกันเลย!!

```
git clone [https://github.com/mrchoke/vuejs\_fastapi](https://github.com/mrchoke/vuejs_fastapi)
```

เข้าไปใน directory ที่ clone มาแล้วทำการ up service

```
cd vuejs\_fastapi/ep1

docker-compose up -d
```

ตรวจสอบว่าแต่ละ service run ได้สมบูรณ์หรือไม่ โดยใช้คำสั่ง

```
docker-compose ps
```

![](https://cdn-images-1.medium.com/max/1024/1*BWDRxRLjnt9UMQy9vJnqTg.png)

ดู log

```
docker-compose logs -f

ถ้ากรณีใช้ไปนานๆแล้ว log มันเยอะ อาจจะ limit output สัก 50 บรรทัดต่อ service ไม่ต้องรอนาน

docker-compose logs -f --tail 50
```

{% gist https://gist.github.com/mrchoke/896285d48d9b3418bd523c62a252a456 %}

### เล่นกับ Vue.js

บางท่านอาจจะเคยเล่นกันมาบ้างวันนี้เปลี่ยนรสชาติมาเล่นบน docker กัน ก่อนที่จะใช้คำสั่ง vue ได้เราต้องแน่ใจก่อนว่า docker-compose ได้ run service vuejs เสร็จหรือยังโดยให้สังเกต log ของ service vuejs

![](https://cdn-images-1.medium.com/max/1024/1*f_fsGfnr_Ft8xVglN2CVFg.png)<figcaption>ติดตั้ง vue cli 3เสร็จแล้ว</figcaption>

เมื่อติดตั้งเสร็จแล้วลองเช็คโดยใช้คำสั่ง

```
docker-compose exec vuejs vue --version

ถ้ามี version แสดงก็เป็นอันเรียบร้อย
```

### Vue UI

ครั้งนี้เอาแบบง่ายๆ ดีกว่าเนอะ ผมจะพาใช้ Vue UI กัน ซึ่งใน docker-compose file ผมได้เปิด port ไว้ 2 port คือ

- 8111:8080 → สำหรับ vuejs
- 8112:8000 → สำหรับ vue ui

ท่านสามารถเปลี่ยนเป็น port อื่นได้ตามใจชอบนะครับไม่ต้องอึดอัดทำตัวตามสบาย :P

ให้ start vue ui โดยใช้คำสั่ง

```
docker-compose exec vuejs vue ui --host 0.0.0.0
```

กรณีนี้ต้องระบุ host เป็น 0.0.0.0 ด้วยเพราะรันอยู่ใน container เมื่อ run เสร็จแล้วก็ให้เปิด browser แล้วเปิด

```
http://localhost:8112
```

จะได้ดังรูป

![](https://cdn-images-1.medium.com/max/1024/1*cSZS6mr-ecf0lnMG-qEaMQ.png)<figcaption>Vue UI</figcaption>

### สร้าง project

ใน docker-compose ผมระบุ work directory ไว้ ที่ /project ซึ่งได้ mount เข้าไปตั้งแต่ต้น

![](https://cdn-images-1.medium.com/max/921/1*EFMbaaZnO2JcKDCb1oNtcg.png)<figcaption>Click ที่ tab สร้าง</figcaption>

click ที่ปุ่มด้านล่างเพื่อสร้าง project

![](https://cdn-images-1.medium.com/max/678/1*uBkoDBn7N8rdmEyZpNfP_g.png)<figcaption>สร้าง project ชื่อ ui</figcaption>

ผมสร้าง project ชื่อว่า ui โดยใช้ yarn เป็นตัวจัดการ ให้ click ปุ่ม ต่อไป

![](https://cdn-images-1.medium.com/max/914/1*oOX11JBNp_COUAgqPeThfA.png)

ตรงนี้ถ้าใครอยากจบก็เลือกตัวเลือกแรก แต่ถ้าอยากเปิดหูเปิดตาก็เลือกตัวเลือกที่สอง แล้ว click ต่อไป

![](https://cdn-images-1.medium.com/max/920/1*tMx-BdgQsX6pmwMBHTra9w.png)

![](https://cdn-images-1.medium.com/max/921/1*2c6dXdwA7VaU9KLxmjMcDg.png)

เลือก option ต่างๆ เพื่อใช้กับ project ส่วนตัวที่ผมใช้ประจำก็จะมี

- babel → ใช้ JSใหม่ๆ ได้
- Router → สร้าง Router หลายๆ หน้า
- Vuex → เก็บ state ใช้ร่วมกันระหว่าง components
- CSS Pre-Processors → ตั้งค่า fonts หรือ อื่นๆ ได้
- Linter/Formatter → จัดการ format ของ JS ตามที่เราถนัด
- ใช้ไฟล์การตั้งค่า → แยกการตั้งค่าต่างๆ ออกมาจาก package.json

![](https://cdn-images-1.medium.com/max/921/1*F8gG5BE1rbGR5BO79p6imQ.png)<figcaption>ตั้งค่าเพิ่มเติม</figcaption>

ถ้าเรามีการเลือก option ที่ต้องตั้งค่าเพิ่มก็จะตั้งในหน้านี้

- ถ้าเลือก Router ก็จะถามว่าจะใช้ history mode หรือเปล่า ถ้าเราไม่ใช้ history mode path ด้านหลังก็จะมี /#/ คั่น ถ้าเป็น history mode ก็จะใช้แบบปกติ
- ถ้าเลือก CSS pre-processor ก็จะถามว่าจะใช้ตัวไหน ผมใช้ Sass/SCSS node-sass เดี๋ยวจะใช้ตอนเปลี่ยนค่า font
- linter / formatter ปกติผมใช้ ESlint กับ Prettier ไม่ค่อยชำนาญนักงงทุกที

![](https://cdn-images-1.medium.com/max/774/1*hFH7DC-GjfVx1PlqWMkMxw.png)<figcaption>จะ save ไว้ไหม คราวหน้าไม่ต้องเลือกแบบนี้อีก</figcaption>

![](https://cdn-images-1.medium.com/max/605/1*eaSRnYO35loJqVtFgcH9Vg.png)<figcaption>กำลังติดตั้งรอสักพักใหญ่ๆ</figcaption>

ซึ่งด้านบนนั้นสามารถสั่งด้วย command line ได้ดังนี้

```
docker-compose exec vuejs vue create ui
```

เมื่อ setup project เสร็จแล้วก็จะปรากฎหน้า Dashboard ขึ้นมา

![](https://cdn-images-1.medium.com/max/1024/1*RtiTrndN7n-FgZzA-SU1Zw.png)<figcaption>Dashboard</figcaption>

โดยแถบด้านซ้ายจะมี icons หมวดต่างๆสำหรับปรับแต่งและควบคุม project

![](https://cdn-images-1.medium.com/max/1024/1*MFO-Nx90nPwHRfpjt1j_hA.png)<figcaption>Plugins ติดตั้งถอดถอนที่นี่</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*6HbLGh_NxqTn8Kf3uXmhig.png)<figcaption>Packages ต่างๆ จัดการที่นี่</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*hiyEw3Na7QCZspdpVvV2lQ.png)<figcaption>Config Vuejs และ ESLint จัดการตรงนี้ได้เลย</figcaption>

![](https://cdn-images-1.medium.com/max/999/1*5hh4yZp1OEvpnkIQFrGW0w.png)<figcaption>ESLint แนะนำให้เลือก แนะนำ (recommended)</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*pfGdEIarwAxdpizH7IRaXg.png)<figcaption>หน้าจัดการ task</figcaption>

### Start Vue.js มาดูหน่อย

ให้ไปยัง tab สุดท้ายหรือหน้าจัดการ task นะครับแล้วเลือก serve แล้ว click ปุ่ม

```
เริ่มการทำงาน
```

![](https://cdn-images-1.medium.com/max/1024/1*KILDg4XY36MLjpFVEwdpSw.png)

![](https://cdn-images-1.medium.com/max/1024/1*9O8N1WB5EoguP3zuXyGJqA.png)<figcaption>run task</figcaption>

นอกจากหน้า dashboard ของ task ลอง click ที่ เอาท์พุต ก็จะเห็นว่าทำงานเสร็จหรือมีอะไรผิดพลาดหรือเปล่า

การ run task สามารถใช้คำสั่ง command line ได้ดังนี้

```
docker-compose exec -w /project/ui vuejs yarn serve
```

ลองเปิดหน้าเว็บดูว่า Vue.js ทำงานจริงหรือไม่

![](https://cdn-images-1.medium.com/max/1024/1*mSWk9eR2mFXw5oycLRe46g.png)<figcaption><a href="http://localhost:8111">http://localhost:8111</a></figcaption>

### ติดตั้ง Vuetify.js

อันนี้ความชอบส่วนตัวสำหรับ framework ที่มาเขียน UI ผมใช้ Vuetify.js ซึ่งจะมี components ให้ใช้อย่างครบครันแบบฉบับของ Material Design ใครสนใจศึกษาเพิ่มเติมได้ที่

[Vue Material Design Component Framework - Vuetify.js](https://vuetifyjs.com/)

การติดตั้ง Vuetify.js ให้ท่าน click ที่ icon plugin หรือ icon ที่สองด้านซ้ายมือ แล้ว พิมพ์ vuetify ในช่องค้นหา แล้ว click icon ด้านขวา ของ ชื่อ vue-cli-plugin-vuetifyเพื่อเพิ่มโดย icon ด้านหน้าชื่อจะเปลี่ยนเป็นเครื่องหมายถูกดูรูป

![](https://cdn-images-1.medium.com/max/1024/1*p0jo5lp5XBb-e06f-5yW0g.png)<figcaption>ค้นหาและเลิอก vuetify plugin</figcaption>

หลังจากนั้นก็ Click **ปุ่มติดตั้ง** ด้านล่างขวา

![](https://cdn-images-1.medium.com/max/411/1*4N9dztfEl4X3BUWul1-V3w.png)<figcaption>รอติดตั้งสักครู่</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*gMWO9yrjt3Q88uegkvSGVg.png)<figcaption>ตั้งค่า plugin</figcaption>

การตั้งค่า plugin ถ้าไม่อยากคิดมากก็เลือกเป็นค่าปกติก็ได้ แต่ในรูปด้านบนผมเลือกแบบ advanced เพื่อให้เห็นว่าเราสามารถเลืือกค่าอะไรได้บ้าง เมื่อปรับแต่งตามต้องการแล้วก็ click ปุ่ม **สำเร็จการติดตั้ง**

![](https://cdn-images-1.medium.com/max/582/1*BCzqnFihD4B_hOXszqPzWA.png)<figcaption>รอสักครู่สำหรับการติดตั้ง</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*iWOf30wc4gOzpdUEZejZVw.png)<figcaption>Vue Cli จะถามว่าจะ commit การเปลี่ยนแปลงหรือเปล่า</figcaption>

โดยปกติแล้วการใช้ Vue Cli จะสร้าง git โดยอัตโนมัติ ดังนั้นบางครั้ง Vue UI จะถามว่า Commit เลยไหม ถ้ายังไม่พร้อมก็ค่อยคราวหลังก็ได้

![](https://cdn-images-1.medium.com/max/1024/1*kp6xwgm04kHfGBnQCyST0w.png)<figcaption>ติดตั้งสำเร็จจะมีรายชื่อ plugin เพิ่ม</figcaption>

ตอนนี้ถ้าสลับไปดูที่หน้าเว็บจะพบว่ามีข้อความ error อยู่ไม่ต้องตกใจให้ทำการ stop แล้ว run task serve ใหม่

![](https://cdn-images-1.medium.com/max/680/1*c_teIFMSOr_M9qI02NWQtQ.png)<figcaption>run task serve ใหม่</figcaption>

คราวนี้จะมีข้อความ warnings เยอะแยะไปหมดก็ไม่ต้องตกใจลอง reload หรือเว็บใหม่ซึ่งหน้าตาจะเปลี่ยนเป็นของ Vuetify.js แล้ว

![](https://cdn-images-1.medium.com/max/1024/1*CgXbZBs5BtVH3jS8cd5J3Q.png)<figcaption>Vuetify.js</figcaption>

command line สำหรับติดตั้ง Vuetify.js ด้านบนสามารถสั่งด้วย

```
docker-compose exec -w /project/ui vuejs vue add vuetify
```

ตรงนี้ต้องระบุ workdir เป็น path ของ project vue ที่สร้างขึ้นนั้นคือ /project/ui แล้วสั่ง add vuetify นั่นเอง

### lint

สำหรับการจัดการเรื่อง warning ตะกี้เราสามารถใช้ task lint จัดการได้ โดยการ click ไปยังตัวจัดการ task แล้วทำการ run task lint

![](https://cdn-images-1.medium.com/max/1007/1*Fwe0_Hm5njSJPNIGo3ZS1w.png)<figcaption>lint fixed warning</figcaption>

ถ้าไม่เหลือบ่ากว่าแรง lint มักจะจัดการได้ซึ่งจะจัดการให้เป็นไปตามกฎถ้ามีแรงจะแนะนำที่ผมใช้อยู่เบื้องต้นให้ ส่วน command line สำหรับ lint ด้านบนสามารถสั่งได้ดังนี้

```
docker-compose exec -w /project/ui vuejs yarn lint
```

### ลองแก้ Code กัน

วิธีนี้จะมีปัญหาเรื่อง permission ของ file ที่ถูกสร้างภายใน container ซึ่งจะเป็นสิทธิ root ดังนั้นเวลาเราจะแก้ไขก็จะไม่ได้ต้องเปลี่ยนสิทธิให้เป็น user ของเราก่อน โดยใช้คำสั่ง

```
sudo chown -R $UID:$GID project/ui
```

เมื่อสั่งเสร็จแล้วหลังจากนี้เราก็สามารถใช้ Editor ที่เรารักเข้าไปปู้ยี่ปู้ยำ Code ได้ละ ผมใช้ VSCodium เปิดไปยัง directory project/ui

![](https://cdn-images-1.medium.com/max/1006/1*FtnNmwx65Z6GwH_mPmsB2w.png)<figcaption>โครงสร้างของ Vue.js</figcaption>

### โครงสร้าง

เบื้องต้นผมคงยังไม่ลงลึกนะครับ แนะนำโครงสร้างคร่าวๆ พอเป็นแนวทางไปศึกษากันต่อ

- public → จะเก็บพวก file static ที่ไม่ค่อยมีการเปลี่ยนแปลงเช่นพวก favicon ที่สำคัญ file index.html จะเก็บในนี้จะแก้ไข title หรือ จะใส่ค่า metadata อะไรเพิ่มก็แก้ที่นี่
- node\_modules → เป็นที่เก็บพวก module ต่างๆ ที่สั่งด้วย yarn หรือ npm จะมีขนาดใหญ่หน่อยซึ่งจะใช้ระหว่างการ dev เท่านั้น production ไม่ได้เอาไปด้วย
- package.json → เป็น metadata file ของ project เก็บรายการ package ต่างๆ และ task ไว้
- .eslintrc.js → เป็น config ของ
- vue.config.js → เป็น config ของ Vue.js รวมไปถึง webpack ด้วย
- dist → จะเก็บ static file ของ production
- src → เราจะเขียน code กันที่นี่โดยข้างในจะแบ่งย่อยไปอีกตามหน้าที่เช่น

1. assets → เก็บพวก static file ที่มีการเปลี่ยนแปลงได้เช่น รูปภาพ
2. components → เก็บ vue components ที่เขียนขึ้นอาจจะมีนามสกุล vue หรือ js แต่ส่วนใหญ่ใช้ vue เข่น components ที่เรียกใช้บ่อยๆ พวกปุ่ม กราฟ เป็นต้น
3. plugins → เก็บ plugins ที่ติดตั้งด้วยคำสั่ง vue add เช่น vuetify และ axios
4. views → เก็บหน้าต่างๆ ที่เขียนขึ้นมีนามสกุล vue หรือ js เช่น Home.vue Abount.vue เป็นต้น
5. App.vue → เป็น template หลักของ Project ก็ว่าได้โครงหน้าจะวางไว้ที่นี่
6. main.js → เป็น file เริ่มต้นหลักของ Vue.js ค่าต่างๆ จะเริ่มต้นที่นี่
7. router.js → เราจะประกาศ router กันที่นี่
8. store.js → เป็น Vuex นั่นเองซึ่งเราจะประกาศ state ที่นี่ถ้าจะเขียนแบบแยกย่อยก็แนะนำสร้างเป็น directory แยกก็ได้ อาจจะเป็น store/index.js เป็นต้น

### เริ่มยำกันดู

การเรียนรู้ที่ดีที่สุดก็คือการทดลองทำครับ เรามาลองกันเลยง่ายสุดก็เริ่มจากการแก้ไข view เป้าหมายคือเปลี่ยนหน้าแรกให้เป็นข้อความของเขาเสีย

```
src/views/Home.vue
```

![](https://cdn-images-1.medium.com/max/1024/1*vljezycr4rwT4HpcA4MVJQ.png)<figcaption>ของเดิม</figcaption>

เดิมที่ file ตัวอย่างนั้นจะเรียก component HelloWorld มาแสดงผลอีกทีเดียวเราจะเริ่มกันใหม่เลย แสดงผล “สวัสดีครับ” ตัวใหญ่ๆ เลย

![](https://cdn-images-1.medium.com/max/1024/1*fzs7oTsvP1sjXqEoBvks8g.png)<figcaption>แก้ Home.vue</figcaption>

![](https://cdn-images-1.medium.com/max/796/1*ZA2BcxUpkBWdsU2-IWWOcg.png)<figcaption>ผลลัพธ์</figcaption>

ลองเปลี่ยนตรง toolbar ด้านบนดูครับ ซึ่งจะอยู่ใน App.vue คือ template หลักนั่นเอง

![](https://cdn-images-1.medium.com/max/1024/1*s6jU6LocWs7yecWFomY9Cw.png)<figcaption>App.vue หลังแก้ไข</figcaption>

![](https://cdn-images-1.medium.com/max/791/1*0zX-RxXg18bGwiS7fystGg.png)<figcaption>ผลลัพธ์</figcaption>

ผมลองแก้ toolbar โดยเปลี่ยนชื่อ Title และ ใส่ link และ เปลี่ยนปุ่มด้านขวาให้ click ไปยัง /about จากผลลัพธ์จะเห็นว่าตรง Title จะมีขีดเส้นใต้และ ตัวหนังสือสีฟ้า แต่จริงๆ มันควรเป็นตามที่เราตั้งไว้ใน Class งั้นเรามาเพิ่ม CSS ให้สักหน่อยโดยการเพิ่ม block style ด้านล่างดังรูป

![](https://cdn-images-1.medium.com/max/958/1*dqW-NzJhCcZR1BddvYNryQ.png)<figcaption>กำหนด class</figcaption>

![](https://cdn-images-1.medium.com/max/1010/1*yw6MyD16pXJNcFdScKC07A.png)<figcaption>เพิ่ม class ให้ router-link</figcaption>

![](https://cdn-images-1.medium.com/max/801/1*i-1Egb0-2ywyYswBiVYugw.png)<figcaption>ผลลัพธ์</figcaption>

จากตัวอย่างการแก้ด้านบนนั้น จะสังเกตโครงสร้างพื้นฐานของ component vue ได้ว่ามีหลักๆ 3 block คือ

1. template → จะบรรจุ HTML หรือ component ย่อย และ คำสั่งควบคุมต่างๆ ของ Vue Template
2. script → เป็นชุดคำสั่ง Java Script นั่นเองซึ่งจะประกอบไปด้วยส่วนต่างๆ เช่น Life Cycle Hook ซึ่งมีส่วนต่างๆ ที่ต้องเจอบ่อยๆ เช่น created, mounted , destroyed เป็นต้น และ อีกอย่างที่ขาดไม่ได้คือ Options เช่น data, methods, computed, watch เป็นต้น
3. style → เป็นส่วนควบคุม CSS อาจจะเขียนด้วย SASS/LESS หรืออื่นๆ ที่ support ก็ได้

### หน้าตัวอย่าง

มาสร้างหน้าตัวอย่างอีกสักหน้าเพื่อความเข้าใจ

1. สร้าง view Sample.vue
2. Add router /sameple
3. เพิ่ม link บน toolbar

![](https://cdn-images-1.medium.com/max/1024/1*HX4vDAE1_TBfhILVxb9A-A.png)<figcaption>src/views/Sample.vue</figcaption>

จากภาพด้านบนผมยกตัวอย่างโครงสร้างพื้นฐานที่ใข้บ่อยๆ ใน vue component เพื่อให้จิตนการออกและนำไปใช้ได้

![](https://cdn-images-1.medium.com/max/1024/1*XAP0wpQjAkVGjA7LNRHlZg.png)<figcaption>เพิ่ม router /sample</figcaption>

เมื่อสร้าง vue component เสร็จก็ต้อง regist ใน router จากตัวอย่างที่ vue สร้างไว้ให้จะเห็นการเรียก router สองแบบคือแบบปกติ คือ home และแบบที่ 2 คือ /about ที่ต่างกันเห็นได้ชัดคือแบบแรกจะถูกดึงไปรวมกับก้อนหลักคือ app.js ตอน production ส่วนแบบหลังจะแยกออกมาจะเรียกตอน click เท่านั้น ดังนั้นตอนออกแบบก็ดูให้ดี ว่าหน้าไหนใช้บ่อย หน้าไหนไม่ค่อยได้ใช้ หรือมีขนาดใหญ่ก็แยกออกมาก็ได้

![](https://cdn-images-1.medium.com/max/1024/1*kCUcRRMqpqERl9uQm59dmA.png)<figcaption>เพิ่มปุ่ม link บน toolbar</figcaption>

ปกติถ้าใส่ใน router เรียบร้อยแล้วเราสามารถเรียกใช้งานได้เลย แต่ถ้าทำให้ผู้ใช้ click ก็ต้องหาที่วาง link

![](https://cdn-images-1.medium.com/max/798/1*PocnMbnt1bSjbRENYhPkJQ.png)<figcaption>ผลลัพธ์</figcaption>

ผลลัพธ์ที่ได้เป็นหน้าที่เราออกแบบไว้คือมี การแสดงผลจากสองตัวแปร และ มีการแสดงออกทาง console.log ด้วย ซึ่งจะทำตอน component ถูก mount เรียบร้อยแล้ว โดยการเรียก method ชื่อ ว่า debug ให้สังเกตว่าในส่วนของ script เวลาเรียก data หรือ method จะใช้ this ได้เลย แต่ใน template ไม่ต้องใช้ this

### API

มาแนะนำหลังบ้านสักนิดซึ่งไม่ได้ยากมาก (ถ้าไม่ลงลึก ฮา) เพื่อปูพื้นไปสู่อนาคตเผื่อได้เป็น full stack กับเข้าบ้าง ในที่นี่ผมจะแนะนำ fastAPI ซึ่งใช้ python 3.6 ขึ้นไป

ใน docker-compose file จะมี service นี้มาให้แล้วโดย bind port 8113 ลองเรียกจาก browser

```
http://localhost:8113
```

![](https://cdn-images-1.medium.com/max/797/1*Zi8mdsNO6flF_2qxYA2Jow.png)<figcaption>ตัวอย่าง enpoint / ของ api</figcaption>

### มาเริ่ม API แรกกัน

ลองมาแก้ไขโดยเพิ่ม enpoint ใหม่เข้าไปชื่อว่า /info โดยจะส่งค่า title1 และ title2

![](https://cdn-images-1.medium.com/max/1024/1*XlyfAZZQX5vJu7BabGG9wg.png)<figcaption>/info</figcaption>

![](https://cdn-images-1.medium.com/max/583/1*mm84ilYtdVLlAjUyL6iGWw.png)<figcaption>ผลลัพธ์</figcaption>

หรือจะลองทดสอบด้วย swagger ของ fastAPI โดยเรียกไปยัง

```
http://localhost:8113/docs
```

![](https://cdn-images-1.medium.com/max/842/1*vkqODOD2mXElgpj2DfHs1A.png)<figcaption>Swagger UI</figcaption>

Swagger UI สามารถทดสอบ API ที่เราเขียนขึ้นมาว่าเป็นไปตามที่เราออกแบบไว้หรือไม่

![](https://cdn-images-1.medium.com/max/849/1*vJZwed_3-l84izNHwcGLKQ.png)<figcaption>ตัวอย่างการทดสอบ API</figcaption>

### เชื่อมต่อ UI กับ API

medium เตือนว่าความยาวเกินดังนั้นต้องยกไปเขียนอีกตอนนะครับ….

[มา dev Vue.js แบบหรอยๆ ฉบับเตาะแตะ Ep2](https://medium.com/@mrchoke/%E0%B8%A1%E0%B8%B2-dev-vue-js-%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%AB%E0%B8%A3%E0%B8%AD%E0%B8%A2%E0%B9%86-%E0%B8%89%E0%B8%9A%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%95%E0%B8%B2%E0%B8%B0%E0%B9%81%E0%B8%95%E0%B8%B0-ep2-7e0cb647dd9b)

* * *