آموزش Vue JS 3: The Composition API (Inc Script Setup, TypeScript)

سرفصل ها و درس ها

Composition API و مبانی تست Composition API and Testing Basics

• معرفی دوره و مدرس! Introduction to Course and Lecturer!

• منابع Resources

• نصب و پیکربندی Installation and Configuration

• Bulma CSS Bulma CSS

• اجزای فایل واحد Vue Vue Single File Components

• دستورالعمل ها - حلقه ها با v-for Directives - Loops with v-for

• اتصالات با v-bind Bindings with v-bind

• رویدادها و واکنش پذیری Events and Reactivity

• بیشتر در مورد رویدادها More on Events

• واکنش پذیری با Ref Reactivity with Ref

• Safety را با TypeScript تایپ کنید Type Safety with TypeScript

• DateTimes با Luxon DateTimes with Luxon

• داده های مشتق شده با محاسبه شده Derived Data with Computed

• انتقال داده با Props و Refactor Passing Data with Props and a Refactor

بارگیری با Suspense و Reactive Store از ابتدا Loading with Suspense and a Reactive Store from Scratch

• ایجاد یک فروشگاه واکنشی سفارشی Creating a Custom Reactive Store

• اشتباه: نصب Pinia Errata: Installing Pinia

• انتقال به پینیا برای مدیریت دولتی Moving to Pinia for State Management

• ساختارهای داده دولتی State Data Structures

• استخراج پیچیدگی Extracting Complexity

• یک بیت از Node.js A Bit of Node.js

• واکشی داده ها با Fetch Fetching Data with Fetch

• بارگیری ایالات با تعلیق Loading States with Suspense

روتر Vue، ایجاد پست با علامت گذاری و برجسته سازی نحو Vue Router, Creating Posts with Markdown and Syntax Highlighting

• مقدمه ای بر ماژول - مسیریابی و پست ها Introduction to Module - Routing and Posts

• مسیریابی با روتر Vue Routing with Vue Router

• مسیر پست جدید New Post Route

• ایجاد مولفه Post Writer Creating the Post Writer Component

• اتصال دو طرفه با مدل v Two way binding with v-model

• دسترسی DOM با Refs الگو DOM Access with Template Refs

• دو طرفه صحافی با محتوای قابل ویرایش Two Way Binding with content editable

• Reactive Markdown با watchEffect Reactive Markdown with watchEffect

• برجسته سازی نحو! Syntax Highlighting!

• بهینه سازی با انحراف Optimization with debounce

• ارسال یک پست جدید Posting a New Post

• Node.js - Post Endpoint Node.js - Post Endpoint

• ارسال درخواست و داده های ماندگار Post Request and Persisting Data

ثبت نام کاربر، اعتبارسنجی و اجزای قابل استفاده مجدد User Sign Up, Validation and Reuseble Components

• مقدمه ای بر ماژول - تله پورت و فرم ها Introduction to Module - Teleport and Forms

• Teleport for Modals Teleport for Modals

• ایجاد useModal Composable Creating the useModal Composable

• v-model با اجزای سفارشی v-model with Custom Components

• اعتبار سنجی آگنوستیک چارچوب - قسمت 1 Framework Agnostic Validation - Part 1

• اعتبار سنجی آگنوستیک چارچوب - قسمت 2 Framework Agnostic Validation - Part 2

• پیوند اعتبارسنجی و ورودی‌های فرم Linking Validation and Form Inputs

• ارسال فرم و اصلاح کننده رویداد Submitting the Form and Event Modifiers

• تعریف فروشگاه کاربران Defining the Users Store

• Node.js - نقطه پایانی ایجاد کاربر Node.js - User Creation Endpoint

نکات مهم احراز هویت Ins and Outs of Authentication

• مقدمه ای بر ماژول - احراز هویت Introduction to Module - Authentication

• Tooling - Vite Proxy Configuration Tooling - Vite Proxy Configuration

• امضای JWT Signing a JWT

• احراز هویت کاربران Authenticating Users

• ارائه مشروط برای کاربران احراز هویت شده Conditionally Rendering for Authenticated Users

• پیاده سازی خروج Implementing Logout

• قدرت اجزای پویا The Power of Dynamic Components

• ساخت UserForm عمومی برای ثبت نام و ورود به سیستم Making UserForm Generic for Sign Up and Sign In

• مدیریت ورود ناموفق Handling Failed Login

• Node.js - Login Endpoint Node.js - Login Endpoint

• مشق شب و تمرین! Homework and Exercises!

اتمام برنامه، استقرار و مراحل بعدی! Finishing the App, Deployment and Next Steps!

• مقدمه ای بر ماژول - مجوز و پایان کار Introduction to Module - Authorization and Finishing Touches

• روتر Vue و گاردهای ناوبری Vue Router and Navigation Guards

• نمایش پست ها Showing Posts

• ویرایش پست ها Editing Posts

• ارتباط پست ها با کاربران Associating Posts with Users

• ویرایش مشروط پست ها Conditionally Editing Posts

• یک Refactor ضروری که توسط TypeScript هدایت می شود An Essential Refactor Guided by TypeScript

• Node.js - نقطه پایانی را برای به‌روزرسانی‌ها قرار دهید Node.js - PUT Endpoint for Updates

• حل شرایط مسابقه Solving the Race Condition

• استقرار در تولید - دیجیتال اقیانوس و Nginx Deploying to Production - Digital Ocean and Nginx

• توصیه های جدایی و مراحل بعدی! Parting Recommendations and Next Steps!

• تست (Cypress، Test Utils، Vite) Testing (Cypress, Test Utils, Vite)

تست کامپوننت (Vitest، Vue Test Utils) Component Testing (Vitest, Vue Test Utils)

• راه اندازی Vitest Setting Up Vitest

• ابزارهای دیگر Other Tools

• کامپوننت نصب با Vue Test Utils Mounting Component with Vue Test Utils

• تعامل با کامپوننت ها با استفاده از Trigger Interacting with Components using Trigger

• نصب پلاگین در تست ها Installing Plugins in Tests

• تست Navbar و وضعیت Auth Testing Navbar and Auth Status

• کلنگ زدن جهانی ها با Vitest Stubbing Globals with Vitest

• تست تله پورت Testing Teleport

• فرم های تست و رویدادهای منتشر شده Testing Forms and Emitted Events

• تست های Async و Snapshot های درون خطی Async Tests and Inline Snapshots

• برخی از TSX و فلسفه تست Some TSX and Testing Philosophy