آموزش دوره جامع Vue.js 3: Vuejs 3، Vite، TailwindCSS، Pinia - آخرین آپدیت

دانلود Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

آموزش گام به گام ساخت پروژه‌های Vue 3 با Tailwind CSS، Pinia و Vue Router

در این دوره جامع، با استفاده از Vue 3، Tailwind CSS، Pinia و Vite پروژه‌های واقعی بسازید.

قابلیت‌های کلیدی دوره

  • توسعه پروژه‌های واقعی با به‌کارگیری Vue 3، Tailwind، Pinia و Vue Router.
  • ترکیب Vue با فناوری‌های غیر Vue مانند Cookie، بازگشتی (Recursion)، و درخواست‌های قابل لغو Axios.
  • درک عمیق و تسلط کامل بر Composition API و بهره‌گیری حداکثری از قابلیت‌های آن.
  • قابلیت انطباق سریع با سایر فریم‌ورک‌ها مانند React، Svelte و موارد مشابه.

پیش‌نیازها

دانش پایه جاوا اسکریپت (JavaScript) و HTML.

درباره دوره

این دوره آموزشی، شما را با تکنولوژی‌های مدرن Vue 3، Tailwind، Pinia و Vite آشنا می‌کند. بخش مربوط به Vue شامل آموزش Vue 3، Vue Router، VueX و Composition API است.

نیازی به تجربه Vue 2 ندارید. تمامی مفاهیم از ابتدا آموزش داده می‌شوند و دانش پایه جاوا اسکریپت نیز پوشش داده خواهد شد.

Vue صرفاً یک جعبه ابزار است؛ مسئولیت انتخاب ابزار مناسب برای هر وظیفه بر عهده ماست. هدف این دوره، تحلیل دقیق پروژه‌ها و یافتن ویژگی‌های مورد نیاز Vue است که نیازمند درک عمیق و جزئی از قابلیت‌های Vue می‌باشد. ما تلاش می‌کنیم تا این درک عمیق را در شما ایجاد کنیم.

به عنوان مثال، دستورالعمل "v-on" ممکن است با متد native "addEventListener" یکسان به نظر برسد، اما تفاوت‌های مهمی دارند. زمانی که "بستار (Closure)" در میان باشد، این تفاوت‌ها خود را نشان می‌دهند. عدم اطلاع از این موضوع در طراحی برنامه‌های مبتنی بر "Closure" می‌تواند منجر به شکست پروژه و اتلاف وقت در یافتن علت مشکلات شود.

فراتر از مرزهای یک فناوری (Crossing Disciplinary Boundaries)

پروژه‌های واقعی شما به قابلیت‌های Vue محدود نمی‌شوند. بنابراین، اغلب لازم است مرزهای بین فناوری‌ها را درنوردیده و Vue را با فناوری‌های غیر Vue ادغام کنید. به عنوان مثال، ذخیره ترتیب آیتم‌های جدید ممکن است نیازمند استفاده از Cookie باشد، در حالی که ایجاد یک لیست می‌تواند از بازگشتی (Recursion) بهره ببرد.

هدف ما ساخت یک پروژه کامل است، نه فقط بخش Vue آن. بنابراین، تمام مباحث غیر Vue قبل از استفاده در برنامه Vue آموزش داده خواهند شد.

هماهنگ‌سازی قابلیت‌های Vue و غیر Vue

عبور از مرزهای فناوری چالش‌های دیگری مانند سازگاری را به همراه دارد. نمی‌توان دو فناوری متفاوت را بدون بررسی و تنظیمات لازم کنار هم قرار داد و انتظار عملکرد بی‌نقص داشت.

به عنوان مثال، برای ادغام برنامه بازگشتی با متد رندر Vue، لازم است تغییراتی در برنامه بازگشتی ایجاد کنیم. همچنین، کتابخانه Axios به ما امکان لغو درخواست‌های در حال اجرا را می‌دهد. برای نصب آن در متد "watchEffect" در Vue، نیاز به قرض گرفتن دامنه تابع setup داریم که این امر نیازمند همکاری سه بخش است.

درباره کامپوننت‌های تک فایلی (Single-File Components)

معرفی کامپوننت‌های تک فایلی را عمداً به تعویق انداختیم. بیشتر پروژه‌ها در بخش Vue از تنها یک فایل HTML تشکیل شده‌اند تا تمرکز شما بر روی Vue باشد. اما نگران نباشید، فرصت‌های کافی برای کار با کامپوننت‌های تک فایلی خواهید داشت. بخش‌های Pinia و Tailwind CSS از کامپوننت‌های تک فایلی استفاده می‌کنند.


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

مبانی ویو، واکنش‌گرایی و دستورات Vue Basics, Reactivity, and Directives

  • MVVM، MVC، واکنش‌گرایی، اتصال داده دوطرفه، رندر سمت سرور MVVM, MVC, Reactivity, Two-way Data Binding, Server Sider Rendering

  • ویو ۲ چگونه واکنش‌گرا باقی می‌ماند؟ How Vue 2 Stays Reactive?

  • ویو ۳ چگونه واکنش‌گرا باقی می‌ماند؟ How Vue 3 Stays Reactive?

  • الگوی کارخانه و الگوی سینگلتون: سازگاری داده یا استقلال داده Factory Pattern and Singleton Pattern: Data Consistency or Data Independence

  • اولین برنامه ویو: نمونه برنامه، کامپوننت ریشه، $el، vNode، ویژگی ref First Vue Program: App Instance, Root Component, $el, vNode, ref Attribute

  • شیء گزینه‌ها، خصوصیات سفارشی، خصوصیات داده، expose Options Object, Custom Properties, Data Properties, Expose

  • نحو قالب، واکنش‌گرایی، به‌روزرسانی اجباری Template Syntax, Reactivity, Forced Update

  • v-bind: کنترل مقادیر ویژگی v-bind: Controlling Attribute Values

  • v-bind بخش دوم v-bind Part 2

  • v-text، v-html، v-once، v-pre و v-cloak v-text, v-html, v-once, v-pre, and v-cloak

  • رندر شرطی: v-show، v-if، v-else و v-else-if Conditional Rendering: v-show, v-if, v-else, and v-else-if

  • v-for: پیمایش آرایه‌ها و اشیاء v-for: Iterating Over Arrays and Objects

  • v-for: JSON v-for: JSON

ویژگی‌های محاسباتی، متدهای ویو و v-on Computed Properties, Vue Methods, and v-on

  • ویژگی‌های محاسباتی: مقدمه Computed Properties: Introduction

  • ویژگی‌های محاسباتی: ملاحظات Computed Properties: Caveats

  • ویژگی‌های محاسباتی: موقعیت‌های حساس Computed Properties: Edgy Situations

  • ویژگی‌های محاسباتی + v-for === ^_^ Computed Properties + v-for === ^_^

  • متدها و دستور v-ON Methods and the V-ON Directive

  • V-ON و بسته شدن V-ON and Closure

  • اصلاح‌کننده‌های رویداد: .once، .stop، .self، .capture و .prevent Event Modifiers: .once, .stop, .self, .capture, and .prevent

  • اصلاح‌کننده .passive The .passive Modifier

مهارت‌های ضروری دستکاری آرایه Must-have Array-manipulating Skills

  • جابجایی بدون استفاده از متغیر سوم Making Swaps Without Using a Third Variable

  • مرتب‌سازی عناصر آرایه Sorting Array Elements

  • چالش: مرتب‌سازی محصولات بر اساس قیمت Challenge: Sorting Products Based on Price

  • کاهش (Reducing) یک آرایه "Reducing" an Array

  • حذف موارد تکراری از طریق کاهش (Reducing) Deduplicating via "Reducing"

  • یافتن بیشترین عنصر یا عناصر XXX Finding the Most XXX Element or Elements

  • یافتن بالاترین قیمت و جمع‌آوری موارد با آن قیمت به طور همزمان Finding the Highest Price and Collecting Items With That Price at the Same Time

  • یافتن پرتکرارترین عناصر Finding the Most Frequently Occurring Elements

  • انجام "غیرممکن" Do the "impossible"

  • "شرطی نامرئی" The "Invisible IF"

کاربرد و چالش: کنترل ترتیب آیتم‌های لیست Application & Challenge: Controlling the Order of List Items

  • ایجاد یک لیست قابل تنظیم Creating an Adjustable List

  • پین کردن یک آیتم انتخاب شده در بالای لیست Pinning a Selected Item to the Top of the List

  • مرتب‌سازی جداگانه آیتم‌های لیست Sorting List Items INDIVIDUALLY

  • پیگیری تغییر ترتیب آیتم‌های لیست Tracking the Order Change of List Items

کاربرد و چالش: Vue + COOKIE Application & Challenge: Vue + COOKIE

  • مقدمه کوکی Cookie Intro

  • عملیات پایه کوکی Cookie Basic Operation

  • درخواست اجازه از کاربر Asking for User Permission

  • منویی که "به خاطر می‌سپارد" بخش ۱ A Menu that "Remembers" Part 1

  • منویی که "به خاطر می‌سپارد" بخش ۲ A Menu that "Remembers" Part 2

کاربرد و چالش: Vue + بازگشت (Recursion) Application & Challenge: Vue + Recursion

  • مقدمه بازگشت (Recursion) Introduction to Recursion

  • کپی عمیق یک آرایه یا شیء Deep Copy an Array or Object

  • لیست "بی‌نهایت" "Infinite" List

  • بهبود Improvement

جمع‌آوری داده از کاربران Collecting Data from Users

  • V-MODEL و اصلاح‌کننده‌های آن: Number، Lazy و Trim V-MODEL and Its Modifiers: Number, Lazy, and Trim

  • مینی اپلیکیشن: محدود کردن داده‌های ورودی کاربر Mini APP: Limiting User-submitted Data

  • V-MODEL در دکمه‌های رادیویی V-MODEL In Radio Buttons

  • V-MODEL در لیست‌های انتخاب و چک‌باکس‌ها V-MODEL In Selection Lists and Checkboxes

  • مینی اپلیکیشن Mini App

کنترل استایل‌های CSS با استفاده از Vue Controlling CSS Styles Using Vue

  • اتصال کلاس‌های CSS Binding CSS Classes

  • کنترل CSS درون‌خطی Controlling Inline CSS

  • اپلیکیشن و تمرین: برجسته کردن خودکار آیتم‌های لیست انتخاب شده App & Practice: Automatically Highlighting Selected List Items

اجرای خودکار: قلاب‌های چرخه حیات Automatic Execution: Lifecycle Hooks

  • قلاب‌های به‌روزرسانی و رندر Update and Render Hooks

اجرای خودکار: ناظرها (Watchers) Automatic Execution: Watchers

  • ناظرها (Watchers) Watchers

  • نظارت بر آرایه‌ها و اشیاء Watching Arrays and Objects

  • زمان‌بندی فلش (Flush Timing) Flush Timing

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

  • ناظرهای متعدد Multiple Watchers

  • $watch $watch

  • $watch: آرایه‌ها و اشیاء $watch: Arrays and Objects

  • تنظیم یک getter برای نظارت بر نتایج پیچیده Setting a Getter to Watch Complicated Results

کامپوننت‌های Vue Vue Components

  • مقدمه کامپوننت‌های فرزند Vue Vue Child Components Introduction

  • قلاب‌های چرخه حیات کامپوننت‌های فرزند Lifecycle Hooks of Child Components

  • Props Props

  • موارد متفرقه Props Props Misc

  • سینتکس شیء برای تنظیم Props: ویدئوی نگهدارنده موقعیت The Object Syntax for Setting Props: PLACEHOLDER VIDEO

  • رویدادهای سفارشی: ارسال داده از کامپوننت فرزند به کامپوننت والد Custom Events: Sending Data From A Child Component to Its Parent Component

  • ساخت مسیر داده دوطرفه بین کامپوننت والد و فرزند آن Building a Two-way Data Path Between a Parent Component and its Child One

  • استفاده از دستور v-model در تگ‌های کامپوننت فرزند Using the v-model Directive in Child Component Tags

  • مبانی اسلات‌ها (Slots) Slots Basics

  • اسلات‌های محدود شده (Scoped Slots) Scoped Slots

  • Teleport Teleport

  • به ارث بردن ویژگی‌های غیر prop Inheriting Non-prop Attributes

  • کامپوننت‌های پویا Dynamic Components

  • KeepAlive: استفاده مجدد از نمونه‌های کامپوننت KeepAlive: Reusing Component Instnances

  • خروجی گرفتن پویا از کامپوننت‌ها Outputting Components Dynamically

جلوه‌های انتقال (Transition Effects) Transition Effects

  • خصوصیات انتقال CSS CSS Transition Properties

  • کلاس‌های انتقال Vue Vue Transition Classes

  • ایجاد جلوه انتقال Creating a Transition Effect

  • انتقال آیتم‌های لیست Transitioning List Items

  • نحوه استفاده از Animate.css How to Use Animate.css

  • ایجاد جلوه‌های انتقال با استفاده از Animate.css Creating Transition Effects Using Animate.css

  • قلاب‌های انتقال Transition Hooks

  • نحوه "Tween" با استفاده از GSAP: پلتفرم انیمیشن Green Sock How to "Tween" using GSAP: Green Sock Animation Platform

  • انتقال وضعیت‌ها با استفاده از GSAP Transitioning States Using GSAP

  • کامپوننت انتقال Transition Component

استفاده مجدد از کد: Mixins و دستورات سفارشی Reusing Codes: Mixins and Custom Directives

  • Mixins Mixins

  • مقدمه دستورات سفارشی Introduction to Custom Directives

  • آرگومان اتصال: ارسال اطلاعات خارجی به دستورات سفارشی The Binding Argument: Passing External Information to Custom Directives

  • کاربرد واقعی دستور سفارشی A Real-life Application of the Custom Directive

رندرینگ Rendering

  • مقدمه رندرینگ Render Introduction

  • اسلات‌های رندرینگ Rendering Slots

  • دستورات Vue رندرینگ Rendering Vue Directives

  • دستورات v-for تودرتو رندرینگ: مدیریت آرایه‌های JSON Rendering Nested v-for Directives: Handling JSON Arrays

  • دستور v-model رندرینگ Rendering the V Model Directive

  • کامپوننت‌ها را با دستور v-model رندر کنید Render Components with the v-model Directive

  • رندرینگ کامپوننت‌های پویا Rendering Dynamic Components

  • رندرینگ دستورات سفارشی Rendering Custom Directives

واکنش‌گرایی Vue 3 در عمق: آماده‌سازی برای Composition API Vue 3 Reactivity in Depth: Preparing for the Composition API

  • واکنش‌گرایی Vue: Vue.ref() و Vue.reactive() Vue Reactivity: Vue.ref() & Vue.reactive()

  • Vue.computed() Vue.computed()

  • موارد متفرقه Vue.reactive() Vue.reactive() Misc

  • موارد متفرقه Vue.ref() Vue.ref() Misc

  • Vue.customRef() Vue.customRef()

  • مقدمه Provide و Inject Provide and Inject Intro

  • سینتکس تابع Provide و Inject Provide and Inject Function Syntax

Debounce و Throttling Debounce and Throttling

  • مقدمه Debounce Debounce Intro

  • Debouncing در Vue Debouncing in Vue

  • Debouncing با استفاده از Custom Ref Debouncing Using Custom Ref

  • Throttling Throttling

اختیاری: درک خوب THIS Optional: Understanding THIS for GOOD

  • همه چیز در مورد THIS Everything About THIS

  • آزمایش درک شما از THIS Testing Your Understanding of THIS

ناظر Vue و کاربرد آن Vue Watcher and Its Application

  • Vue.watch() Vue.watch()

  • Vue.watchEffect Vue.watchEffect

  • ایجاد یک درخواست Axios قابل لغو Creating a Cancelable Axios Request

  • ایجاد درخواست Axios قابل لغو با استفاده از Vue Creating a Cancelable Axios Request using Vue

  • کار با کاربران "صبور" Dealing With "IMPATIENT" Users

Vue 3 Composition API: تابع SetUp Vue 3 Composition API: the SetUp Function

  • Vue 3 Composition API: تابع SetUp Vue 3 Composition API: the SetUp Function

  • Provide و Inject Provide and Inject

  • تعریف متدها در تابع SetUp Defining Methods in the SetUp Function

  • دو آرگومان تابع SetUp: Props و Context The Two Arguments of the SetUp Function: Props and Context

  • ویژگی‌های غیر prop و اسلات‌ها Non-prop Attributes and Slots

  • context.expose(): کنترل آنچه از vm.$refs.ref_name دریافت می‌کنید context.expose(): Controlling What You Get From vm.$refs.ref_name

  • مرور Closure و الگوی کارخانه Closure and Factory Pattern Review

  • ایجاد یک برنامه شمارنده با استفاده از Closure و الگوی کارخانه Creating a Counter App Using Closure and the Factory Pattern

  • کاربرد تابع SetUp: حفاظت از اطلاعات حساس Application of the SetUp Function: Protecting Sensitive Information

  • کاربرد واقعی تابع SetUp: حفاظت از کلید تأیید Real-life Application of the SetUp Function: Protecting the Verification Key

  • انتقال همه چیز به تابع SetUp Moving Everything to the SetUp Function

کامپوننت‌های تک فایلی: Vue CLI & Vite Single File Components: Vue CLI & Vite

  • مقدمه کامپوننت‌های تک فایلی Single File Components Introduction

  • Vue CLI 4 Vue CLI 4

  • سفارشی‌سازی باندلینگ Customizing Bundling

  • دوره فشرده Vite Vite Crash Course

  • اپلیکیشن SFC بخش ۱ SFC App Part 1

  • اپلیکیشن SFC بخش ۲ SFC App Part 2

  • تگ "script setup" The "script setup" Tag

Vue Router Vue Router

  • مقدمه Vue Router Vue Router Introduction

  • حالت WebHistory The WebHistory Mode

  • مسیرهای نامگذاری شده Named Routes

  • نمای نامگذاری شده Named View

  • مسیرهای تودرتو و نمای تودرتو Nested Routes & Nested View

  • مسیرهای پویا Dynamic Routes

  • Regex RegEx

  • سوابق تاریخچه History Records

  • مسیریابی برنامه‌ای Programmatic Routing

  • موارد متفرقه: خصوصیات Query، Redirect مسیر، و نام مستعار مسیر Misc: Query Properties, Route Redirect, and Route Alias

  • Props مسیریاب Vue Vue Router Props

  • محافظ‌های مسیریابی (Route Guards) Per-route Guards

  • محافظ‌های درون کامپوننت In-component Guards

  • محافظ‌های سراسری Global Guards

  • KeepAlive و انتقال KeepAlive and Transition

  • انتقال‌های سفارشی Custom Transitions

  • تداخل ناشی از KeepAlive و Key The Conflict Caused by KeepAlive and Key

  • پرس و جو از API بک‌اند پس از ناوبری Querying the Backend API AFTER the Navigation

  • پرس و جو از API بک‌اند قبل از ناوبری Querying the Backend API BEFORE the Navigation

  • استفاده از Vue Router در تابع SetUp Using Vue Router in the SetUp Function

  • چرا نباید IMMEDIATE را TRUE قرار دهید Why You Should NOT Set IMMEDIATE to TRUE

  • محافظ‌های onBeforeRouteUpdate و onBeforeRouteLeave The onBeforeRouteUpdate and onBeforeRouteLeave Guards

  • نحوه برجسته کردن RouterLink فعال How to Highlight the Active RouterLink

  • RouterLink سفارشی Custom RouterLink

  • کامپوننت سفارشی RouterLink Custom RouterLink Component

  • RouterLink Replace RouterLink Replace

  • شکست ناوبری Navigation Failure

  • اسکرول Scroll

  • کامپوننت تک فایلی Vue Router Vue Router Single File Component

  • کاربرد کامپوننت تک فایلی Vue Router Vue Router Single File Component Application

VueX VueX

  • مقدمه VueX: نصب و راه‌اندازی پایه VueX Introduction: Installation and Basic Set-up

  • وضعیت VueX در جزئیات VueX State in Detail

  • Getter VueX در جزئیات VueX Getter in Detail

  • Mutation VueX در جزئیات VueX Mutation in Detail

  • وضعیت VueX و V-MODEL VueX State and V-MODEL

  • Actions VueX در جزئیات VueX Actions in Detail

  • اولین برنامه VueX: به‌کارگیری همه آنچه آموخته‌ایم First VueX App: Apply Everything We Have Learned

  • ماژول‌های VueX: وضعیت‌ها و Getterها VueX Modules: States and Getters

  • Namespace ماژول VueX VueX Module Namespace

  • Mutations ماژول VueX VueX Module Mutations

  • Actions ماژول VueX VueX Module Actions

  • ماژول‌های پویا VueX VueX Dynamic Modules

  • پلاگین‌های ماژول VueX VueX Module Plugins

  • کاربرد پلاگین VueX VueX Plugin Application

  • استفاده از VueX در تابع SetUp Use VueX in the SetUp Function

  • بازآفرینی اپلیکیشن هواشناسی با استفاده از Composition API Recreate the Weather APP Using the Composition API

  • راه‌اندازی VueX در کامپوننت‌های تک فایلی Setting up VueX in Single File Components

Pinia: جایگزینی بهتر و قدرتمندتر برای VueX Pinia: A Better and More Powerful Replacement for VueX

  • مقدمه Pinia و خداحافظی با VueX Introduction to Pinia and Farewell to VueX

  • راه‌اندازی Pinia Pinia Setup

  • مشکلات نسخه فعلی Pinia Problems with the Current Pinia Version

  • وضعیت‌های Pinia Pinia States

  • Actions Pinia Pinia Actions

  • Pinia $onActions Pinia $onActions

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

کتابخانه UI: Tailwind برای Vue 3 UI Library: Tailwind for Vue 3

  • مقدمه Tailwindcss Introduction to Tailwindcss

  • راه‌اندازی و پیکربندی Tailwind Tailwind Setup and Configuration

  • لایه ها و اولویت ها Layers and Priorities

  • لایه های Tailwind Tailwind Layers

  • @import @import

  • انواع Tailwind (Variants) Tailwind Variants

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

  • تم: سفارشی‌سازی کلاس‌های ابزار (Utility Classes) Theme: Customizing Utility Classes

Vite در جزئیات Vite in Detail

  • مقدمه Vite Vite Intro

  • بارگذاری تنبل Vite (Lazy Loading) Vite Lazy Loading

  • فایل‌های دارایی Vite (Asset Files) Vite Asset Files

  • فایل‌های دارایی Vite: RAW و Data URI Vite Asset Files: RAW and Data URI

  • فایل‌های دارایی Vite: پوشه عمومی و فایل‌های HTML Vite Asset Files: Public Directory and HTML Files

  • دایرکتوری کاری فعلی Current Working Directory

  • فایل پیکربندی Vite: ریشه سفارشی Vite Vite Config File: Custom Vite Root

  • فایل پیکربندی Vite: ورودی و خروجی سفارشی Vite Config File: Custom Input and Output

  • فایل پیکربندی Vite: جداسازی CSS و کنترل Data URI Vite Config File: Split CSS and Control Data URI

  • فایل پیکربندی Vite: مسیر پایه (Base Path) Vite Config File: Base Path

اختیاری: دوره پیشرفته JavaScript Optional: JavaScript Enhancement Course

  • متغیرهای جاوا اسکریپت، دامنه‌ها، هوئیستینگ (Hoisting) و THIS JavaScript Variables, Scopes, Hoisting, and THIS

  • مقادیر، انواع داده، مقادیر اولیه، و مقادیر ارجاعی Values, Data Types, Primitive Values, and Reference Values

  • آدرس حافظه و دو الگوی طراحی Memory Address and the Two Design Patterns

نمایش نظرات

آموزش دوره جامع Vue.js 3: Vuejs 3، Vite، TailwindCSS، Pinia
جزییات دوره
16.5 hours
209
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,442
4.2 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

OnlyKiosk Tech OnlyKiosk Tech

ارائه آموزش کدنویسی موثر