สอน VueJS / NuxtJS / Javascript วีดีโอ ตั้งแต่เตรียมเครื่อง ยันเขียนเป็น
Tags: vue, nuxt, thai
Published: 2020-04-09 09:53:37

---
title: สอน VueJS / NuxtJS / Javascript วีดีโอ ตั้งแต่เตรียมเครื่อง ยันเขียนเป็น
published: true
description: ใครสนใจเขียน VueJS + NuxtJS ลองเข้ามาอ่านดูครับ
tags: vue,nuxtjs,thai
---

สวัสดีครับ ผมศักดิ์ เปิดบริษัท Softwarehouse มากว่า 10 ปี ประสบการณ์ด้าน Programming 10 ปี รับเขียนโปรแกรมมามากมายหลายภาษา/Framework ครับ

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

[![เกิดอยากจะเป็นโปรแกรมเมอร์](https://dev-to-uploads.s3.amazonaws.com/i/0631t35n384uh23bve1e.png)](https://leanpub.com/soon-to-be-programmer)

[กดที่นี่เพื่อเข้าไปซื้อหนังสือครับ](https://leanpub.com/soon-to-be-programmer)

ผมพยายามทำและรวบรวมวีดีโอที่ผมทำเอง และ ถ้าเป็นไปได้จะพยายามเอาวีดีโออื่นๆที่เกี่ยวข้องมารวมด้วยครับ (ข้ามไปดูวีดีโอด้านล่างสุดได้เลยครับ สำหรับคนใจร้อน)

[Youtube Channel SaKKosama 🐶 กดติดตามหน่อยนะครับ] (https://www.youtube.com/channel/UC1Jindq-cR4nryXJF2gybbQ?sub_confirmation=1&fbclid=IwAR2hQSaMSUnXp-9uIjFkSSdSucovYHenEOmIpRBnAfyX_yFH5PWO-zSLmQM)

เป้าหมายคือ อยากให้เป็นประโยชน์กับทุกๆคน ไม่ว่าจะพนักงานของผมเอง หรือ จะเป็นคนที่มีความสนใจศึกษา VueJS / NuxtJS และอยากให้มี Developer ชาวไทยเยอะขึ้นครับ

List ข้อดีของ VueJS + NuxtJS

1. เขียนง่าย เขียนเร็ว ขอแค่เขียน Javascipt เป็น
1. Support SSR, SPA, PWA
1. ไม่ต้องเขียน JSX แต่จะเขียนก็ได้
1. Library / Components ช่วยเยอะแยะมากมาย
1. Doc อ่านเข้าใจง่ายมาก

แถมนิดนึงสำหรับคนอยาก deploy nuxtjs โดยใช้ Google Cloud Run (Serverless ครับ)

[Deploying Nuxtjs on Google Cloud Run (Serverless)] (https://dev.to/sakko/deploying-nuxtjs-on-google-cloud-run-1fic)

วีดีโอเริ่มต้นครับ สำหรับคนได้เครื่องใหม่มา หรือว่าอยาก clean up เครื่อง

- [วิธีเตรียม MACOS Catalina จากเครื่องใหม่ จนพร้อมใช้งาน] (https://dev.to/sakko/how-i-upgrade-my-mac-for-development-in-catalina-macos-33g1)
- [วิธีเตรียมเครื่องสำหรับ NodeJS อย่างเดียว] (https://www.youtube.com/watch?v=k20Srsf2r7k)
- [สอนลง NodeJS บน Windows 10 ด้วย NVM สลับ Version Node ได้ไม่จำกัด] (https://youtu.be/DA4csMg7XqM)

วีดีโอ

- [Full Playlist ครับ] (https://www.youtube.com/playlist?list=PLXm-UJjVcJCMd24NIQTPcqHhfnK-QbPmD)

แยกร่างครับ

- [Nuxt+Vue EP1: Creating NuxtJS Project] (https://youtu.be/NcqZjTg_1PI)
- [Nuxt+Vue EP1.1: Atom Text editor guide (มือใหม่ต้องดูครับ)] (https://youtu.be/aPVAncMcBCM)
- [Nuxt+Vue EP2: Basic VueJS] (https://youtu.be/pBMbQLIY1zA)
- [Nuxt+Vue EP3: Creating Components] (https://youtu.be/4Ihi506N_6M)
- [Nuxt+Vue EP4: Vue Instance] (https://youtu.be/VJlvILjcGQI)
- [Nuxt+Vue EP5: Vue Template Syntax] (https://youtu.be/m4kLme7Tl4s)
- [Nuxt+Vue EP6: Compute and Methods] (https://youtu.be/fz79jFIUuE4)
- [Nuxt+Vue EP7: Vue Watch + NuxtJS install/import library] (https://youtu.be/iztFcYxqo8E)
- [Nuxt+Vue EP8: Adding Class and Styles] (https://youtu.be/wsuUlMoEmlA)
- [Nuxt+Vue EP9: $EMIT, Listen to component custom events] (https://youtu.be/zDZOZN2BOe0)
- [Nuxt+Vue EP10: Call API + Vuetify Framework on NuxtJS] (https://youtu.be/qDTFK4tKfpU)
- [Nuxt+Vue EP10.1: Call API + iView UI Framework on NuxtJS] (https://youtu.be/IxWebuaHAjg)
- [Nuxt+Vue EP11: Nuxt Route, vue-router, Named route (Vuetify)] (https://youtu.be/CrSG2GcW2HQ)
- [Nuxt+Vue EP12: Javascript Async Await] (https://youtu.be/EbyWKAak2MU)
- [Nuxt+Vue EP13: Nuxt Store, Vuex, Vuetify Drawer State] (https://youtu.be/pd96dsgjAXo)
- [Nuxt+Vue EP14: Vuetify Layout Tutorial (Clean up code)] (https://youtu.be/V-5tnxu7HBI)
- [Nuxt+Vue EP15: Workshop - Nuxt Auth Login and Vuetify preparation for CRUD] (https://youtu.be/2DwdzXyYJo4)
- [Nuxt+Vue EP16: Workshop - CRUD+REST API after Login] (https://youtu.be/0xeJpQik9Kg)
- [สร้าง API EP15,EP16 ด้วย Ruby on Rails] (https://youtu.be/P5s0DRSbqug)
- [Nuxt+Vue EP17: Import Components && Plugins] (https://youtu.be/b0_9A7jBD-c)
- [Nuxt+Vue EP18: How to use asyncData?] (https://youtu.be/h2aBakYfirI)
- [Nuxt+Vue EP19: How to use fetch?] (https://youtu.be/V-IrHn9e5fY)
- [Nuxt+Vue EP20: Create Card Component and Using Vue Slots] (https://youtu.be/y6DMjz_eKtk)
- [Nuxt+Vue EP21: Add Global Configs / Settings to Nuxtjs ENV] (https://youtu.be/jeFGAnxpuz0)

วิธี deploy NuxtJS ไป Google Cloud Run ครับ

- [Introduction] (https://www.youtube.com/watch?v=pFQxDS5Uamo&list=PLXm-UJjVcJCMd24NIQTPcqHhfnK-QbPmD&index=23&fbclid=IwAR3q_-akG0PpEshkuzoA4wlJVLgT689S1JZyZb8i40nS3FxmHFE6BXXXV6k)
- [ลงทะเบียน Google Cloud Platform] ( https://www.youtube.com/watch?v=mNJ0HLU4dWw&list=PLXm-UJjVcJCMd24NIQTPcqHhfnK-QbPmD&index=24&fbclid=IwAR21dNbrTC04tS-HOcN3Y-Nq2UvzNEsfhBKPNNtu6TI_XTAA29EeiBZfjGc)
- [ลง Google Cloud CLI / Login ผ่าน Command Line (ต้องทำนะครับ)] (https://www.youtube.com/watch?v=cogW9M4s68E&list=PLXm-UJjVcJCMd24NIQTPcqHhfnK-QbPmD&index=25&fbclid=IwAR0pfj34GS62UI-nJ11VKZM9mxEe6scsmD6wlYhALD1q-a-tvkGCfeDnxg4)
- [สร้าง Nuxt Project, Dockerfile, Cloud-build, และ deploy ไป Cloud run] (https://www.youtube.com/watch?v=8Pq79ZQ1r-E&list=PLXm-UJjVcJCMd24NIQTPcqHhfnK-QbPmD&index=26&fbclid=IwAR1_gb7rXInhiyX5ei8UBZ-klQeRH6PU7jymwknzd-u0ThQAYOJJrjbRxtI)