NakornCode นครโค้ด
🏠 หน้าแรก 📰 บทความ 👨‍💻 เกี่ยวกับนครโค้ด
รายละเอียดคอร์สเรียนทั้งหมด
  • คอร์สเรียนทั้งหมด
  • Vue 3 + Nuxt 3 + Tailwind CSS สำหรับ Front-end Web Developer

คอร์สเรียน 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 นาที

รีวิวจากผู้เรียน (ทั้งหมด 19 รีวิว คะแนนเฉลี่ย 4.8)

Wee B.

ดีสุดๆเลยครับ

⭐⭐⭐⭐⭐

สุธิพงษ์ ท.

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

⭐⭐⭐⭐⭐

Pharadol Nuanphin

⭐⭐⭐⭐⭐

Pitchayakorn Songboonkedkul

⭐⭐⭐⭐⭐

Nirat Kashom

⭐⭐⭐⭐

Wisan N.

⭐⭐⭐⭐

Phanuphun N.

⭐⭐⭐⭐⭐

Phreeratchai J.

⭐⭐⭐⭐⭐

กุลภัทร ใ.

⭐⭐⭐⭐

Ize P.

⭐⭐⭐⭐⭐

Suthee S.

⭐⭐⭐⭐⭐

นพดล จ.

⭐⭐⭐⭐⭐

Tanakorn P.

⭐⭐⭐⭐⭐

adireg p.

⭐⭐⭐⭐⭐

Somsit B.

⭐⭐⭐⭐⭐

อรรถพล ม.

⭐⭐⭐⭐⭐

Suttiruk S.

⭐⭐⭐⭐⭐

ธชา ศ.

⭐⭐⭐⭐⭐

Supatra P.

⭐⭐⭐⭐⭐
คลิกเพื่อดูคอร์สเรียนอื่นๆทั้งหมด
คอร์สเรียน Vue 3 + Nuxt 3 + Tailwind CSS สำหรับ Front-end Web Developer
จากราคาปกติ 2,290 บาท
ช่วงโปรโมชั่นทุกเดือนคู่ราคา 1,290 บาท
🛒 คลิกเพื่อสั่งซื้อผ่าน SkillLane
  • จำนวน: 32 วิดีโอ
  • ความยาว: 24 ชั่วโมง 47 นาที
  • ความรู้ที่จะได้: Vue.js, Nuxt.js, Tailwindcss, HTML, CSS, JavaScript, Web Form, Vuetify, Vue Router, State Management
ระดับขั้นสูง เหมาะสำหรับ Front-end และ Full-stack Web Developer
รีวิวจากผู้เรียนทั้งหมด 19 คน
คะแนนที่เต็ม 5.0 ได้ 4.8 คะแนน
คะแนนอัปเดตเมื่อวันที่ 13/12/2022

ผู้สอนคอร์สเรียน

นคร สินผดุง Nakorn Sinpadung

นคร สินผดุง
(Nakorn Sinpadung)

โปรแกรมเมอร์มืออาชีพ

  • ปัจจุบันเป็นติวเตอร์ออนไลน์ สอนพัฒนาโปรแกรม
  • ปัจจุบันเป็นพนักงานประจำระดับ Senior Programmer ที่ CareerVisa Digital
  • มีประสบการณ์ทำงานจริงในบริษัทต่างๆมากกว่า 4 ปี
  • มีประสบการณ์สอนผ่านออนไลน์นานกว่า 6 ปี
ดูคอร์สเรียนอื่นๆที่นครโค้ดสอนทั้งหมด
นครโค้ด NakornCode

นครโค้ด สอนเขียนโปรแกรม

สำหรับสายงาน Full-stack Web Developer ใช้ MEVN Stack

  • หน้าหลัก
  • คอร์สเรียนทั้งหมด
  • บทความทั้งหมด
  • เกี่ยวกับนครโค้ด

Copyright © 2023 NakornCode.com All rights reserved.

Online illustrations by Storyset. ติดต่อผ่าน Facebook

คอร์สเรียนสำหรับนักพัฒนาโปรแกรมสายงาน Full-stack Web Developer โดยการใช้ MEVN Stack ทั้งระบบ สอนตั้งแต่ระดับเริ่มต้น ระดับพื้นฐาน จนถึงระดับเชี่ยวชาญ จัดการเรียนการสอนโดย นครโค้ด | คอร์สเรียน คอร์สเรียนออนไลน์ คอร์สเรียนฟรี ขายคอร์สเรียนออนไลน์ เขียนโปรแกรม สร้างโปรแกรม พัฒนาโปรแกรม Certificate มีใบเซอร์ มีใบประกาศ SkillLane ระดับประถม ระดับมัธยม ระดับมหาวิทยาลัย ระดับปริญญาตรี ระดับเริ่มต้น ระดับเชี่ยวชาญ ระดับทำงาน คอร์สเรียนขั้นสูง สอนละเอียด ภาษาไทย ราคาถูก โปรโมชั่น 2023 2566 ภาษา HTML HTML5 CSS CSS3 Python JavaScript JS ES5 ES6 TypeScript TS Node.js Nodejs Express.js Expressjs MongoDB Vue.js Vuejs Vue Vue3 Nuxt.js Nuxtjs Nuxt Nuxt3 Bootstrap Vuetify Tailwind Tailwindcss Git GitHub DevOps CI/CD Docker สายงาน Full-stack Fullstack Front-end Frontend Back-end Backend Web Development Web Developer