Vue 3 in Action: 6 پروژه برای تسلط بر چارچوب

Vue 3 in Action: 6 Projects to Master the Framework

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Master Vue 3 با پروژه های عملی، آموزش های گام به گام و برنامه های کاربردی دنیای واقعی برای توسعه دهندگان در همه سطوح. Master Vue 3 با Composition API و TypeScript ساخت 6 پروژه در دنیای واقعی از ابتدا ایجاد اجزای قابل استفاده مجدد و مقیاس پذیر پیاده سازی مدیریت حالت قوی با Pinia توسعه برنامه های کاربردی تک صفحه ای پویا با استفاده از Vue Router یادگیری ایجاد و استفاده از ترکیب های سفارشی برای استفاده مجدد از کد. اعمال بهترین روش های Vue. و الگوهای طراحی کسب تجربه عملی با توسعه Vue مدرن پیش نیازها:آشنایی با مبانی جاوا اسکریپت درک اولیه ساختار HTML دانش کاری سبک CSS

در این دوره جامع و به‌روز Vue 3، شش پروژه (به‌علاوه یک پروژه به عنوان تمرین) ایجاد می‌کنید تا بر تمام موارد ضروری چارچوب Vue تسلط داشته باشید و به شما امکان می‌دهد پروژه‌های خود را بسازید یا شغلی را ایمن کنید. .


پوشش خواهیم داد:


- الگوها و دستورالعمل‌های Vue

- اجزاء، از جمله وسایل، رویدادها، و اسلات

- انتقالات

- TypeScript

- Composition API، از جمله ساخت اجزای سازنده خودتان

- روتر Vue (برای ساخت SPA)

- Pinia (مدیریت دولتی مشترک)


پروژه هایی که خواهید ساخت:


1. آیا می توانید رانندگی کنید؟

2. آزمون ساده (پروژه تمرین)

3. گالری تصاویر

4. لیست وظایف

5. مینی برنامه ثبت رویداد

6. برنامه تنظیمات کاربر

7. برنامه کتاب دستور غذا


به این دوره بپیوندید تا تجربه عملی را با Vue 3 به دست آورید، از Vite برای راه اندازی پروژه استفاده کنید و به کاربردهای عملی Vue's Composition API و Pinia برای مدیریت حالت بپردازید. بیاموزید که چگونه با Vue Router برنامه‌های تک صفحه‌ای پویا (SPA) ایجاد کنید، برنامه‌های خود را با انتقال صاف تقویت کنید و از TypeScript برای کدهای ایمن تایپ استفاده کنید. چه مبتدی باشید و چه به دنبال ارتقاء مهارت های خود باشید، این دوره شما را به دانشی برای موفقیت در دنیای توسعه وب مدرن مجهز می کند.


در طول دوره، پروژه‌های دنیای واقعی می‌سازید که قدرت Vue 3 را به نمایش می‌گذارد، از ایجاد یک برنامه آزمون ساده تا مدیریت وضعیت با Pinia در برنامه تنظیمات کاربر. در پایان این دوره، درک کاملی از نحوه استفاده از Composition API Vue 3 برای ساخت برنامه‌های مقیاس‌پذیر و قابل نگهداری خواهید داشت. همچنین بهترین روش‌ها را برای ساختاربندی برنامه‌های Vue و کارکرد مؤثر با TypeScript برای تشخیص زودهنگام خطاها و بهبود گردش کار توسعه خود یاد خواهید گرفت.


این دوره به گونه ای طراحی شده است که عملی و مبتنی بر پروژه باشد و به شما اطمینان دهد که نه تنها تئوری را یاد می گیرید بلکه دانش خود را در ساخت برنامه های کاربردی کاربردی نیز به کار می گیرید. چه بخواهید وارد صنعت شوید یا مهارت های موجود خود را افزایش دهید، این دوره آموزشی Vue 3 دروازه شما برای تبدیل شدن به یک توسعه دهنده ماهر Vue است.


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

معرفی دوره Course Introduction

  • Vue.js چیست و چرا باید آن را بیاموزید؟ What is Vue.js and Why You Should Learn It?

  • The Essence of Vue.js - Vue.js چگونه در 3 دقیقه کار می کند The Essence of Vue.js - How Vue.js Works in 3 Minutes

  • نمای کلی دوره: آنچه یاد خواهید گرفت و پروژه هایی که خواهید ساخت Course Overview: What You'll Learn and the Projects You'll Build

  • چرا Vue 3 را انتخاب کنید: مزایا و مزایا Why Choose Vue 3: Benefits and Advantages

  • به حداکثر رساندن یادگیری خود: چگونه از این دوره بهترین استفاده را ببرید Maximizing Your Learning: How to Make the Most Out of This Course

  • دسترسی به کد منبع: کجا آن را پیدا کنیم Accessing the Source Code: Where to Find It

  • راه اندازی VSCode: میانبرها، برنامه های افزودنی و نکات ضروری VSCode Setup: Essential Shortcuts, Extensions, and Tips

  • به یک یادآوری در HTML، جاوا اسکریپت یا CSS نیاز دارید؟ در اینجا مقداری کمک وجود دارد Need a Reminder on HTML, JavaScript, or CSS? Here's Some Help

  • به Discord بپیوندید! Join Discord!

اولین پروژه کوچک - آیا می توانید رانندگی کنید؟ 1st Mini Project - Can you Drive?

  • مقدمه: پروژه 1 Intro: Project 1

  • زنده کردن برنامه Vue! Making the Vue App Alive!

  • واکنش پذیری در Vue - با استفاده از ref() Reactivity in Vue - Using ref()

  • ویژگی های محاسبه شده - با استفاده از () Computed Properties - Using computed()

  • کلاس های CSS شرطی Conditional CSS Classes

  • اتصالات ورودی Input Bindings

  • تمرین 1 - یک بازی امتحانی ساده بسازید Exercise 1 - Build a Simple Quiz Game

  • تمرین 1 - راه حل Exercise 1 - Solution

2nd Mini Project - گالری تصاویر با موارد دلخواه 2nd Mini Project - Image Gallery with Favorites

  • معرفی: دومین پروژه کوچک Intro: 2nd Mini Project

  • مدیریت رویداد (v-on) Event Handling (v-on)

  • اصلاح کننده های مدیریت رویداد Event Handling Modifiers

  • رندر شرطی (v-if) Conditional Rendering (v-if)

  • فهرست‌های رندر (v-for) Rendering Lists (v-for)

  • صفت Binding Attribute Binding

  • تمرین 2 - تغییر حالت دلخواه/حذف تصویر Exercise 2 - Favorite Toggling/Image Removing

  • تمرین 2 - راه حل برای کار 1 Exercise 2 - Solution to Task 1

  • تمرین 2 - راه حل برای کار 2 Exercise 2 - Solution to Task 2

سومین پروژه کوچک - مدیر وظیفه 3rd Mini Project - Task Manager

  • معرفی: سومین پروژه کوچک Intro: 3rd Mini Project

  • قلاب چرخه حیات Lifecycle Hooks

  • Refs الگو (دسترسی به عناصر DOM) Template Refs (Accessing DOM Elements)

  • نمایش لیست وظایف Displaying Task List

  • اضافه کردن وظایف جدید Adding New Tasks

  • ناظران و عوارض جانبی Watchers and Side Effects

  • مقایسه ساعت با ساعت افکت Comparing watch with watchEffect

  • استفاده از حافظه محلی Using Local Storage

  • تمرین 3 - حذف دکمه و وظایف فیلتر Exercise 3 - Remove Button & Filtering Tasks

  • تمرین 3 - راه حل Exercise 3 - Solution

پروژه متوسط ​​چهارم - ثبت رویداد (اجزا) 4th Medium Project - Event Registration (Components)

  • مقدمه: چهارمین پروژه متوسط Intro: 4th Medium Project

  • ایجاد پروژه Vue با استفاده از Vite Creating Vue Project using Vite

  • آشنایی با ساختار پروژه و فایل ها Understanding the Project Structure and Files

  • نصب و استفاده از TailwindCSS Installing and Using TailwindCSS

  • ایجاد و استفاده از کامپوننت ها Creating and Using Components

  • ارائه فهرستی از کامپوننت ها Rendering a List of Components

  • پاس پاس Passing Props

  • رویدادهای مؤلفه Component Events

  • سقوط از طریق صفات Fall through Attributes

  • شکاف های اجزای اصلی Basic Component Slots

  • تمرین 4 - یک جزء کارت قابل استفاده مجدد ایجاد کنید Exercise 4 - Create a Reusable Card Component

  • تمرین 4 - راه حل Exercise 4 - Solution

  • اسلات به نام Named Slots

  • شکاف های با نام مشروط Conditional Named Slots

  • انواع کامپوننت Component Variants

پروژه متوسط ​​چهارم - ثبت رویداد (واکشی داده ها) 4th Medium Project - Event Registration (Data Fetching)

  • مقدمه: چهارمین پروژه متوسط ​​- ایست بازرسی شماره 1 Intro: 4th Medium Project - Checkpoint #1

  • راه اندازی Mock API Server Setting Up the Mock API Server

  • واکشی داده ها Fetching Data

  • حالت بارگیری Loading State

  • جلوگیری از تغییر چیدمان (جایگزین‌ها) Preventing Layout Shifts (Placeholders)

  • ارسال اطلاعات به سرور Posting Data to the Server

  • تمرین 5 - بارگیری رزروها Exercise 5 - Loading Bookings

  • تمرین 5 - راه حل Exercise 5 - Solution

پروژه متوسط ​​چهارم (واسط کاربری خوش‌بینانه، مدیریت خطا) 4th Medium Project (Optimistic UI, Error Handling)

  • مقدمه: چهارمین پروژه متوسط ​​- ایست بازرسی شماره 2 Intro: 4th Medium Project - Checkpoint #2

  • رابط کاربری خوش‌بینانه با مثال رزرو رویداد توضیح داده شده است Optimistic UI Explained with Event Booking Example

  • پیاده‌سازی رابط کاربری خوش‌بینانه رزرو رویداد Implementing Event Booking Optimistic UI

  • لغو رزرو با رابط کاربری خوش‌بینانه Cancelling Bookings with Optimistic UI

  • استخراج EventList: چرا؟ Extracting EventList: Why?

  • استخراج EventList: Let's Go! Extracting EventList: Let's Go!

  • استخراج لیست رویدادها: مدیریت وضعیت های خالی Extracting EventList: Handling Empty States

  • استخراج EventList: مدیریت خطا و بازیابی خطا Extracting EventList: Error Handling and Error Recovery

  • طراحی واکنشگرا Responsive Design

  • مؤلفه ها و نمادهای پویا Dynamic Components & Icons

پروژه متوسط ​​چهارم (قابلیت ترکیب و وضعیت اشتراک) 4th Medium Project (Composables & Sharing State)

  • مقدمه: Composables و State Sharing Intro: Composables and State Sharing

  • ایجاد و استفاده از Composables Creating and Using Composables

  • استفاده از رویدادهای قابل ترکیب و حذف Using Composable and Eliminating Events

  • جزء BookingList The BookingList Component

  • مولفه و تمرین 6 رسیدگی به خطا Error Handling Component & Exercise 6

  • راه حل تمرین 6 Exercise 6 Solution

پروژه متوسط ​​پنجم (TypeScript، Transitions، Tabs) 5th Medium Project (TypeScript, Transitions, Tabs)

  • مقدمه: معرفی پروژه متوسط ​​پنجم Intro: 5th Medium Project Introduction

  • یک پروژه Vue TypeScript ایجاد کنید و Tailwind را اضافه کنید Create a Vue TypeScript Project & Add Tailwind

  • Props و Events را با TypeScript تعریف کنید Define Props and Events with TypeScript Types

  • محدود کردن انواع refs و سایر داده ها Narrowing Down the Types of refs and Other Data

  • تب های رندر - چگونه حالت فعال برگه را نمایش دهیم؟ Rendering Tabs - How to Display the Tab Active State?

  • رندر کردن محتوای برگه با استفاده از اجزای پویا Rendering Tab Content using Dynamic Components

  • Transitions - نحوه اضافه کردن CSS Transitions به محتوای Tab Transitions - How to Add CSS Transitions on Tab Content

  • مولفه های انتقال سفارشی - چگونه از انتقال ها استفاده مجدد کنیم؟ Custom Transition Components - How to Reuse Transitions?

پنجمین پروژه متوسط ​​(TypeScript، Teleport، KeepAlive، وضعیت مشترک) 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)

  • مقدمه: پنجمین ایستگاه بازرسی پروژه متوسط ​​شماره 2 Intro: 5th Medium Project Checkpoint #2

  • فرم عمومی نشانه گذاری و انتقال گوچا General Form Markup & Transition Gotcha

  • تابع واکنشی با ref در Vue 3 چه تفاوتی دارد؟ How is the reactive Function Different from ref in Vue 3?

  • کامپوننت KeepAlive - چگونه وضعیت اجزای پویا را از دست ندهیم؟ KeepAlive Component - How to Not Lose the State of Dynamic Components?

  • ایجاد فرم‌های حریم خصوصی و اعلان‌ها: افزودن نشانه‌گذاری و حفظ داده‌های کاربر Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data

  • همگام سازی فضای ذخیره سازی محلی: نحوه ذخیره و بازیابی تنظیمات Syncing Local Storage: How to Store and Retrieve Settings

  • ایمنی TypeScript: Generics و Keyof - ایمنی نوع ذهنی! TypeScript Safety: Generics and Keyof - Mindblowing Type Safety!

  • ساخت یک سیستم اعلان با استفاده از Toast Component Building a Notification System using Toast Component

  • ایجاد useNotifications Composable Creating a useNotifications Composable

  • مؤلفه Teleport - نحوه انتقال نشانه گذاری به عنصر دیگر (به عنوان مثال بدنه) Teleport Component - How to Move Markup to Another Element (e.g. body)

ششمین پروژه متوسط ​​(روتر Vue) 6th Medium Project (Vue Router)

  • معرفی: پروژه ششم Intro: 6th Project

  • ایجاد پروژه کتاب دستور غذا Creating the Recipe Book Project

  • آشنایی با روتر Vue و پیکربندی آن Understanding Vue Router and it's Config

  • نماهای مسیر چگونه رندر می شوند و چگونه لینک ها را اضافه کنیم؟ How Route Views are Rendered and How to Add Links?

  • اضافه کردن Routes، RouterLink در مقابل یک عنصر و استفاده از Route Name Adding Routes, RouterLink vs A Element and Using Route Name

  • مسیرهای پویا - چگونه آنها را تعریف کرده و پارامترها را در کامپوننت بخوانید؟ Dynamic Routes - How to Define Them and Read Parameters in the Component?

  • پیوند دادن به مسیرهای پویا با Params Linking to Dynamic Routes with Params

  • مسیر بازگشتی، صفحه 404 - آسان نیست! Fallback Route, 404 Page - It's not Easy!

  • ناوبری برنامه ای Programmatic Navigation

  • واکشی داده ها در داخل قلاب نصب شده هشدار و راه حل! Data Fetching Inside the onMounted Hook Caveat and Solution!

  • تغییر مسیرها و نام مستعار Redirects and Aliases

ششمین پروژه متوسط ​​(مدیریت ایالتی پینیا) 6th Medium Project (Pinia State Management)

  • درک Pinia: چیست، چگونه کار می کند و چرا به آن نیاز دارید Understanding Pinia: What It Is, How It Works, and Why You Need It

  • تعریف و ایجاد فروشگاه Defining and Creating Store

  • افزودن اقدامات به فروشگاه Pinia شما Adding Actions to Your Pinia Store

  • کار با Getters در Pinia Working with Getters in Pinia

  • فهرست و دستور العمل های فیلتر: منطق متعادل در فروشگاه Listing and Filtering Recipes: Balancing Logic in the Store

  • پلاگین های پینیا Pinia Plugins

  • پلاگین Pinia: همگام سازی با محل ذخیره سازی Pinia Plugin: Syncing with Local Storage

  • Pinia و TypeScript: تایپ کردن ویژگی های سفارشی Pinia and TypeScript: Typing Custom Properties

  • تمرین 7 - ویرایش فرم Exercise 7 - Edit Form

  • راه حل تمرین 7 - ویرایش فرم Exercise 7 Solution - Edit Form

  • موارد مورد علاقه: Pinia Action، Getter و Changes Component Favorites: Pinia Action, Getter and Component Changes

  • موارد دلخواه: ترکیب ایالت پینیا و لیست موارد دلخواه Favorites: Mixing Pinia State and List of Favorites

  • افزودن Tailwind CSS و استایل کردن برنامه شما Adding Tailwind CSS and Styling Your App

پاداش Bonus

  • پاداش Bonus

نمایش نظرات

Vue 3 in Action: 6 پروژه برای تسلط بر چارچوب
جزییات دوره
13.5 hours
118
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
516
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Piotr Jura  45,000+ Enrollments Piotr Jura 45,000+ Enrollments

پرفروش ترین و بالاترین امتیاز مدرس توسعه وب