Vue 3 Typescript Tutorial - ขั้นตอนการเข้าสู่ระบบผู้ใช้ขั้นพื้นฐานด้วย Typescript และ Vue 3

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

เรียนรู้พื้นฐานของวิธีใช้ Vue และ Typescript เพื่อสร้างแบบฟอร์มการลงนามรับรองความถูกต้อง วันนี้เราจะสร้างขั้นตอนการลงชื่อเข้าใช้ของผู้ใช้ขั้นพื้นฐานด้วย typescript และ Vue 3 เราจะไม่สร้างแบ็กเอนด์สำหรับตัวอย่างนี้ แต่เราจะสร้างฟังก์ชัน async เพื่อแสดงให้คุณเห็นว่าคุณจะเรียก API แบ็กเอนด์ในแอปพลิเคชันของคุณอย่างไร

ก่อนอื่นเราจะสร้างโปรเจ็กต์ Vue ใหม่พร้อมรองรับ typescript โดยใช้ Vue CLI จากนั้นเราจะอธิบายเบื้องต้นเกี่ยวกับ typescript ด้วย Vue บทช่วยสอนนี้จะถือว่าคุณมีความเข้าใจใน API องค์ประกอบแล้ว เนื่องจากเราจะใช้ API นี้เพื่อสร้างส่วนประกอบ ถ้าไม่ใช่คุณควรตรวจสอบวิดีโออื่น ๆ ของฉันที่ฉันลงรายละเอียดเพิ่มเติมเกี่ยวกับหัวข้อนี้ เนื่องจากแอปพลิเคชันนี้มีขนาดเล็ก เราจะใช้ API องค์ประกอบเพื่อสร้างสถานะส่วนกลางแทน Vuex ฉันจะแสดงให้คุณเห็นว่าคุณสามารถตั้งค่า VSCode ให้ได้รับการอนุมานจาก typescript ที่ดีขึ้นภายในเทมเพลตขององค์ประกอบ Vue เดียวได้อย่างไร

⚡ ทรัพยากร ⚡
รหัสแหล่งที่มา - https://github.com/codingwithjustin/vue-typescript-login
Vue typescript เอกสาร - https://v3.vuejs.org/guide/typescript-support.html
มุมมององค์ประกอบ API - https://v3.vuejs.org/guide/composition-api-introduction.html
พื้นฐานของ API องค์ประกอบ - https://www.youtube.com/watch?v=p4iOYO_St_Y



⭐ การประทับเวลา ⭐

  • 0:00 - typescript + Vue
  • 0:22 - โครงร่าง
  • 1:30 - การสร้างโครงการ / Vue CLI
  • 2:00 - Vue Components พร้อม Typescript
  • 3:15 - การเปิดใช้งานการสรุป Typescript ของเทมเพลต
  • 4:28 - จุดสิ้นสุดการตรวจสอบสิทธิ์ปลอม
  • 5:54 - ส่วนประกอบเคาน์เตอร์พื้นฐาน
  • 7:45 - ส่วนประกอบผู้ใช้
  • 9:53 - นำส่วนประกอบมารวมกัน
  • 10:36 - บทสรุป

#typescript #vue #javascript

www.youtube.com

Vue 3 Typescript Tutorial - ขั้นตอนการเข้าสู่ระบบผู้ใช้ขั้นพื้นฐานด้วย Typescript และ Vue 3

เรียนรู้พื้นฐานของวิธีใช้ Vue และ Typescript เพื่อสร้างแบบฟอร์มการลงนามรับรองความถูกต้อง วันนี้เราจะสร้างขั้นตอนการลงชื่อเข้าใช้ของผู้ใช้ขั้นพื้นฐานด้วย typescript และ Vue 3 เราจะไม่สร้างแบ็กเอนด์สำหรับตัวอย่างนี้ แต่เราจะสร้างฟังก์ชัน async เพื่อแสดงให้คุณเห็นว่าคุณจะเรียก API แบ็กเอนด์ในแอปพลิเคชันของคุณอย่างไร

ดูสิ่งนี้ด้วย: