คอร์สเรียน Vue 3 + Nuxt 3 + Tailwind CSS สำหรับ Front-end Web Developer
คำอธิบายคอร์สเรียน
คอร์สเรียนนี้จะเป็นการสอนเพื่อใช้งาน Vue.js สำหรับการสร้างเว็บที่ง่ายมากกว่าเดิมแบบมากๆ และเรียนรู้วิธีใช้งาน Nuxt.js สำหรับกรณีการทำ Full-stack รวมทั้งการใช้ Tailwindcss โดยพื้นฐานเพื่อสร้างหน้าเว็บได้อิสระกว่าการใช้ CSS Framework อื่นๆ
สิ่งที่คุณจะได้เรียนรู้
- มีชีทเป็นกระดาษสูตรโกง ช่วยสรุปหลังผู้เรียน เรียนจบไปแล้วแต่อาจจะลืมรูปแบบคำสั่งต่างๆได้
- มีแบบทดสอบ สำหรับการรับใบประกาศนียบัตรที่ออกให้โดยทาง SkillLane
- ได้เห็นวิธีการปฎิบัติจริง ที่ทำให้รู้จักคีย์ลัดต่างๆ และเทคนิคเสริมมากมายที่จะทำให้เราทำงานได้เร็วและง่ายขึ้น
- สอนโดยไม่เน้นสไลด์ สอนโดยเขียนให้ดูจริง และเห็นผลลัพธ์จริง พร้อมเล่าเรื่องเสริมตลอดเวลาการเรียนการสอน
- เรียนรู้วิธีการใช้งาน Vue.js ในเวอร์ชั่น 3 และการใช้ Nuxt.js ในเวอร์ชั่น 3 เพื่อการสร้าง Web Application ทั้งแบบ Single-page Application (SPA), Static Site Generator (SSG) และการใช้ Server-side Rendering (SSR) ที่แตกต่างกัน
- เรียนรู้ข้อแตกต่างระหว่าง Vue 2 และ Vue 3 แบบจัดเต็ม เพื่อป้องกันความสับสนการเลือกใช้ Modules เสริมต่างๆจากภายนอก
- ทำความเข้าใจกับ Vue.js แบบขั้นสูง ทั้งการใช้ Reactive, Binding, Methods, Event listening, Directive, Component, Computed, Watch และอื่นๆอีกมากมาย
- แยกแยะวิธีการใช้งานระหว่าง Options API และ Composition API พร้อมคำแนะนำดีๆในการใช้งานระหว่าง Vue 3 ร่วมกันกับ TypeScript
- ทำความรู้จักกับระบบ Composable ของ Vue 3 โดยเฉพาะ และ Modules เสริมชื่อดังอย่าง vueuse
- ทำความรู้จักกับ Modules เสริมชื่อดังอื่นๆ ไม่ว่าจะเป็น Vuetify, unplugin, vue-router, vue-i18n, vue-echarts และอื่นๆอีกมากมาย
- ดูวิธีการสร้าง Web Application และการทำเป็น Cross-platform ได้แทบจะทันที ด้วยการใช้ Tauri สำหรับ Desktop Application และ Capacitor.js สำหรับ Mobile Application
- ดูวิธีการใช้งาน Tailwind CSS ร่วมกับ Vue.js พร้อมตัวอย่างโดยคร่าวๆจาก Workshop ที่มีอยู่
- ดูแนวทางการใช้ Nuxt 3 แบบ SSR เต็มรูปแบบและทำความรู้จักกับ API Routing เสริมด้วยวิธีการทำ Proxy เพื่อแนวทางปฏิบัติระหว่างการทำ Front-end ด้วย Nuxt.js และ Back-end ด้วย Express.js
- รับฟังแนวทางปฎิบัติเพิ่มเติมหลังเรียนจบ เพื่อเสริมทักษะด้วยตนเองต่อหลังจากการเรียนจบ
ประโยชน์ที่คุณจะได้รับ
- การใช้ JavaScript Framework ใดๆก็ตามสำหรับทำ Front-end ไม่ว่าจะเป็น React, Angular, Vue, Svelte, Preact, Ember, jQuery หรืออื่นๆอีกมากมาย ล้วนอาจจะได้ผลลัพธ์ที่คล้ายกันหรือเหมือนกันได้ทั้งหมด แต่วิธีการเขียน ความยากง่าย ความซับซ้อน และชุมชนจะแตกต่างกัน ดังนั้นการเรียนเพียงตัวใดตัวหนึ่งก็จะสามารถใช้งานตัวอื่นๆได้ง่ายยิ่งขึ้น อีกทั้ง Vue.js จะถูกจัดว่าเป็น JavaScript Framework ที่ใช้งานง่ายอย่างมาก จึงได้เปรียบในการเรียนรู้ระดับเริ่มต้นมากกว่าตัวอื่นๆ
- ข้อดีในการใช้ JavaScript Framework ในปัจจุบันเพื่อสร้างหน้าเว็บต่างๆง่ายกว่าเดิมนั้น หน้าเว็บยังสามารถทำเป็น Web Application ก็ยังสามารถใช้ Framework อื่นๆเสริมรันบนระบบอื่นได้ด้วย เช่น ใช้ Tauri หรือ Electron.js เพื่อสร้าง Desktop Application และใช้ Capacitor.js
- สำหรับผู้ที่สนใจจะทำสายงาน Full-stack การใช้ Vue จับคู่กับ Nuxt ก็จะสามารถทำเป็น Web Application สำเร็จรูปได้ในตัวเดียว ถึงแม้ว่าเราจะต้องใช้ h3 (Nitro) แทนการใช้ Express.js แต่ก็เรียนรู้ได้ไม่ยาก และทำให้ Scope งานของเราจะใช้เครื่องมือที่น้อยลง และเป็นองค์ประกอบเดียวกันได้ด้วย
- ในการใช้ Vue.js จะมี Library, Modules, Plugins เสริมมากมายเต็มไปหมดที่เกิดจากชุมชนการใช้งาน ที่จะทำให้เราสร้างเว็บได้เร็วกว่าเดิม และมี UI Components สำหรับรูปอย่าง Vuetify, Naive UI, PrimeVue และอื่นๆอีกมากมายที่จะทำให้เราสร้างหน้าเว็บได้เร็วและง่ายอย่างมาก
- คุณรู้หรือไม่ว่า: Vue.js จัดว่าเป็น JavaScript Framework ที่ถูกใช้งานมากเป็นอันดับ 3 และถ้าดูจากแนวโน้มในแต่ละปี จะมีคนใช้มากขึ้นเรื่อยๆโดยอ้างอิงจาก stateofjs.com
ทักษะที่ผู้เรียนจะต้องมีก่อนเรียนคอร์สเรียนนี้
- ต้องสามารถเขียนภาษา HTML และ CSS เป็น หากคุณไม่เข้าใจวิธีการใช้งานแนะนำ คอร์สเรียน HTML + CSS โดยนครโค้ด
- ต้องสามารถเขียนภาษา JavaScript เป็น หากคุณไม่เข้าใจวิธีการใช้งานแนะนำ คอร์สเรียน JavaScript + Node.js โดยนครโค้ด
- เป็นข้อเสริม หากสามารถสร้าง Back-end เป็นของเราเองได้ก็จะยิ่งดีต่อการเรียนรู้ หากคุณไม่เข้าใจวิธีการใช้งานแนะนำ คอร์สเรียน Express.js + MongoDB โดยนครโค้ด
- สามารถอ่านและเขียนภาษาอังกฤษในระดับพื้นฐาน
- สามารถใช้งานอินเทอร์เน็ตโดยทั่วไปได้
เหมาะสำหรับ
- นักเรียนระดับประถมปลาย
- นักเรียนระดับมัธยม
- นักศึกษาที่กำลังศึกษาในสายงานที่เกี่ยวข้องกับการพัฒนาเว็บ
- ผู้ที่สนใจในสายงาน Web Development
- ผู้ที่สนใจในสายงาน Front-end Web Development
- ผู้ที่สนใจในสายงาน Full-stack Web Development
- ผู้ที่สนใจการสร้างเกมด้วยตนเอง
- ผู้ที่สนใจการสร้างโปรแกรมประยุกต์ใช้งานโดยทั่วไปบนระบบคอมพิวเตอร์
เนื้อหาที่มีทั้งหมด
บทนำ
-
แนะนำคอร์สออนไลน์
12:23 นาที -
Vue vs React vs Angular vs Svelte - ทำความเข้าใจข้อแตกต่างที่จะเลือกใช้แต่ละ Framework
15:28 นาที -
Ways of Vue - เส้นทางวิธีการใช้งาน Vue เพื่อสร้าง Application ต่างๆ
55:30 นาที -
Vue2 vs Vue3 - เรียนรู้ข้อแตกต่างของทั้งสองเวอร์ชั่น เพื่อป้องกันการใช้งานโค้ดที่เป็นคนละรุ่นกัน
23:04 นาที
ดาวน์โหลดไฟล์ตัวอย่าง
-
Cheatsheet - รวมสูตรโกงสำหรับการใช้งาน Vue 3
00:10 นาที -
Example - รวมตัวอย่างและเวิร์คช็อปที่มีทั้งหมดในการเรียนการสอน (ผู้เรียนจะต้องใช้คำสั่ง npm install ในการติดตั้งแต่ละโปรเจคด้วยตนเอง เหตุผลเพื่อลดพื้นที่ในการคลายไฟล์)
00:10 นาที
เนื้อหาหลัก
-
1. Getting Started - วิธีการเตรียมใช้งาน Vue
22:58 นาที -
2. Reactives, Binding - การเปลี่ยนข้อมูลตามปฏิกิริยาที่เปลี่ยนไปของข้อมูล และผูกข้อมูลกับ HTML
45:46 นาที -
3. Methods, Listening Events - การสร้างกระบวนการ เพื่อที่จะจัดการตามเหตุการณ์ที่เกิดขึ้น
35:19 นาที -
4. Directives - การสร้าง v-* ด้วยตนเอง
22:06 นาที -
5. Components - การสร้าง UI Components ขึ้นด้วยตนเอง 01
01:20:33 นาที -
6. Lifecycle Hooks - ทำความเข้าใจกับวงจรชีวิตของ Vue 3
08:54 นาที -
7. Methods, Computed, Watch - ทำความเข้าใจข้อแตกต่างของทั้งสามรูปแบบ 01
01:03:42 นาที -
8. Composition, TypeScript - เรียนรู้วิธีการใช้งาน Composition API ของ Vue 3 โดยเฉพาะ และการใช้ร่วมกับ TypeScript 01
01:14:22 นาที -
9. Workshop Typing Test - เวิร์คช็อปสำหรับการทำ Web Application ตัวอย่างเพื่อทบทวนเนื้อหาข้างต้น
59:41 นาที -
10. Composables - ระบบใหม่ของ Vue 3 เพื่อแทนที่การใช้ Mixin
16:49 นาที -
11. vueuse - Package สำหรับรวบรวม Composable ที่น่าสนใจต่าง ๆ
06:37 นาที -
12. Built-in Components - ทำความรู้จักกับ Components ที่ Vue 3 มีให้ใช้
18:25 นาที -
13. Vuetify - ทำความรู้จักกับ CSS Framework ชื่อดังของ Vue
26:15 นาที -
14. Tailwind CSS - เรียนรู้วิธีการใช้ Tailwind CSS เพื่อการสร้าง Web Page ที่สวยงามง่าย ๆ ผ่าน Utility Classes ที่มี
54:48 นาที -
15. unplugin - เรียนรู้วิธีการใช้งาน unplugin เพื่อทำระบบ Auto-import ของโค้ดเรา
22:53 นาที -
16. vue-router - เรียนรู้วิธีการสร้าง Router สำหรับ Multi-page Web Application 01
01:03:06 นาที -
17. vue-i18n - เรียนรู้วิธีการสร้างเว็บหลากหลายภาษาใน Vue 3
17:39 นาที -
18. pinia, vuelidate, vee-validate - กับการใช้วิธีอื่น ๆ เพื่อลด Learning Curve 01
01:11:47 นาที -
19. Data Table - วิธีการสร้าง Data Table ด้วยตนเอง และการระมัดระวังการส่งข้อมูลโดยการแสดงให้น้อยลงผ่าน Pagination 01
01:07:01 นาที -
20. vue-echarts - การแสดงผลข้อมูลแบบ Chart หรือ Visualization
26:02 นาที -
21. Nuxt 3 - ทำความรู้จักวิธีการใช้งาน Nuxt 3 และการเตรียมความพร้อมก่อนวันเปิดตัวใช้งานจริง 01
01:49:30 นาที -
22. Online Shopping (Part 1) - สร้างระบบ Shopping Online ตัวอย่าง เพื่อทดลองเชื่อมต่อ Nuxt 3 ร่วมกับ Express.js 02
02:06:53 นาที -
23. Online Shopping (Part 2) - การสร้างหน้าแอดมิน และการเตรียม CRUD ให้กับ API ร่วมกับหน้าบ้าน 02
02:18:07 นาที -
24. Online Shopping (Part 3) - การใช้ useAsyncData ร่วมกับ Axios และการทำระบบตะกร้าสินค้าด้วย State Management 02
02:02:06 นาที -
25. Deploy (DigitalOcean) - วิธีการ Deploy เว็บใช้งานจริงแบบรวบรัด เพื่อการเชื่อมต่อระหว่าง Linux, NGINX และ PM2 01
01:02:58 นาที -
26. บทส่งท้ายของคอร์สเรียน
16:25 นาที
รีวิวจากผู้เรียน (ทั้งหมด 32 รีวิว คะแนนเฉลี่ย 4.9)
Wee B.
ดีสุดๆเลยครับ
⭐⭐⭐⭐⭐
Gett S.
สอนดีมากครับ ละเอียดเข้าใจง่าย
⭐⭐⭐⭐⭐
สุธิพงษ์ ท.
สอนได้ละเอียดกระชับและชัดเจน เข้าใจได้ง่ายครับและเนื้อหาครบถ้วนแถมมีทริคและคำแนะนำที่ดีเสริมเข้ามาในการสอนครับ ประทับใจและชิอบมากครับ
⭐⭐⭐⭐⭐
Watcharanondh P.
สอนได้ละเอียดมากๆและนำไปใช้งานได้จริงครับ ยอดเยี่ยม
⭐⭐⭐⭐⭐
กฤษณะ ป.
เนื้อหาดี เทคนิคการสอนดี แต่พูดเร็วไป บางครั้งอธิบายเเล้วพิมพ์โค้ดไปด้วยทำให้ผู้เรียนอาจตามไม่ทัน อยากให้ปรับเรื่องการพูดครับ ลดความเร็วลงนิดนึง อาจจะพิมพ์โค้ดสร็จเเล้วอธิบายว่าคืออะไร เเต่โดยรวมถือว่าดีครับ
⭐⭐⭐⭐
สันติภาพ อ.
⭐⭐⭐⭐⭐
Sonsit P.
⭐⭐⭐⭐⭐
ยุทธศักดิ์ พ.
⭐⭐⭐⭐⭐
ถิรายุ ว.
⭐⭐⭐⭐⭐
ฐิติศักดิ์ นิ่.
⭐⭐⭐⭐⭐
Anuwat P.
⭐⭐⭐⭐⭐
นรภัทร หิ.
⭐⭐⭐⭐⭐
Quavthib V.
⭐⭐⭐⭐⭐
Ratchadech S.
⭐⭐⭐⭐⭐
sulvia l.
⭐⭐⭐⭐⭐
Pharadol N.
⭐⭐⭐⭐⭐
Pitchayakorn S.
⭐⭐⭐⭐⭐
Nirat K.
⭐⭐⭐⭐
Wisan N.
⭐⭐⭐⭐
Phanuphun N.
⭐⭐⭐⭐⭐
Phreeratchai J.
⭐⭐⭐⭐⭐
กุลภัทร ใ.
⭐⭐⭐⭐
Ize P.
⭐⭐⭐⭐⭐
Suthee S.
⭐⭐⭐⭐⭐
นพดล จ.
⭐⭐⭐⭐⭐
Tanakorn P.
⭐⭐⭐⭐⭐
adireg p.
⭐⭐⭐⭐⭐
Somsit B.
⭐⭐⭐⭐⭐
อรรถพล ม.
⭐⭐⭐⭐⭐
Suttiruk S.
⭐⭐⭐⭐⭐
ธชา ศ.
⭐⭐⭐⭐⭐
Supatra P.
⭐⭐⭐⭐⭐