آموزش جامع Vue.js (مناسب بازار کار)

Vue.js یک فریم‌ورک جاوا اسکریپت قدرتمند، انعطاف‌پذیر و کاربرپسند برای مبتدیان است که ساخت اپلیکیشن‌های وب مدرن را به کاری لذت‌بخش تبدیل می‌کند. این فریم‌ورک سبک، آسان برای یادگیری و دارای قابلیت ادغام بی‌نقص با سایر ابزارها و کتابخانه‌هاست. با قابلیت‌های Vue مانند اتصال داده‌های واکنش‌گرا (reactive data binding)، معماری مبتنی بر کامپوننت و API بصری، می‌توانید رابط‌های کاربری پویا و تعاملی را به سرعت بسازید.

به طور کلی چه یک مبتدی باشید و چه یک توسعه‌دهنده باتجربه، سادگی و تطبیق‌پذیری Vue آن را به انتخابی ایده‌آل برای ساخت اپلیکیشن‌های مقیاس‌پذیر و واقعی تبدیل کرده است.

در این دوره چه مباحثی آموزش داده شده است؟

ما در این دوره به آموزش جامع Vue.js می پردازیم. با دوره آموزش جامع Vue.js از یک مبتدی مطلق به یک توسعه‌دهنده Vue.js با اعتماد به نفس تبدیل می شوید! این مسیر یادگیری عملی، شما را با تمام جنبه‌های ضروری توسعه Vue.js آشنا می‌کند و با انجام پروژه‌های واقعی، مهارت‌های شما را به تدریج ارتقا می‌دهد.

در این دوره، با مفاهیم پایه Vue شروع می‌کنید و سپس به سراغ مباحث پیشرفته‌تر از جمله موارد زیر خواهید رفت:

• مفاهیم و سینتکس اصلی Vue.js
• معماری کامپوننت و ارتباط بین آن‌ها
• مدیریت وضعیت (State Management) با Pinia
• مسیریابی (Routing) با Vue Router
• ادغام با Firebase برای قابلیت‌های بک‌اند
• احراز هویت و مدیریت کاربران
• مصرف API و مدیریت داده‌ها
• استقرار (Deploy) اپلیکیشن

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

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

سرفصل های دوره آموزش جامع Vue.js (مناسب بازار کار)

مقدمه

• مقدمه
• پیش‌نمایش
• Vue چیست؟
• چه مطالبی را پوشش می‌دهیم؟
• پروژه نهایی – دموی نمونه
• کتاب الکترونیکی Vue
• دسترسی به کتاب الکترونیکی
• نصب Node JS
• افزونه VS Code
• منابع دوره

مبانی Vue

• ایجاد پروژه
• شروع کار با Vue
• بازگرداندن چند ویژگی
• اشیاء و آرایه‌ها
• جاوا اسکریپت و Vue.js
• توابع در Vue
• تمرین ۱ – توابع
• حل تمرین ۱ – توابع

واکنش‌پذیری در Vue

• Ref
• Timeout در توابع
• Ref روی شی
• Reactive در Vue
• Reactive و غیرواکنش‌پذیری در Vue

دستورات (Directives) در Vue

• V-html
• دستور V-once
• دستور V-bind
• پاک‌سازی
• دستور V-show
• دستور V-if
• دستور V-else و V-else-if
• دستور V-for
• تکرار روی آرایه‌ای از اشیاء
• کلید در یک شی
• V-once در حلقه
• کلید در V-for
• پاک‌سازی پروژه

استایل‌ها در Vue

• اتصال استایل‌ها در Vue
• اتصال استایل داینامیک
• اتصال کلاس‌ها در Vue
• ادامه اتصال کلاس‌ها
• آرایه‌ای از کلاس‌ها و اشیاء استایل سفارشی
• نوشتار کوتاه V-bind
• پاک‌سازی

رویدادها در Vue

• رویداد کلیک دکمه
• ارسال پارامتر به توابع
• شیء رویداد
• مبدل‌های رویداد
• مبدل‌های کلید
• پاک‌سازی

اتصال داده‌ها (Data Binding)

• اتصال داده دوطرفه
• مبدل‌های مدل
• ویژگی‌های محاسبه شده (Computed)
• مقدار قبلی ویژگی محاسبه شده
• Watchers در Vue
• Watchers در ویژگی واکنش‌پذیر
• راه‌اندازی اولیه MovieOPedia
• تمرین – رویدادهای دکمه در MovieOPedia
• حل تمرین – رویدادهای دکمه
• تمرین – Watcher و ویژگی محاسبه شده
• حل تمرین – Watcher و ویژگی محاسبه شده
• Watchers می‌تواند Async باشد
• میانبر برای v-on

فرم‌ها (Forms)

• راه‌اندازی فرم‌ها
• جلوگیری از ارسال فرم
• مبدل‌های مدل
• دکمه‌های رادیویی
• Dropdown در Vue
• اعتبارسنجی هنگام خروج از فیلد
• اعتبارسنجی فرم‌ها

ایجاد پروژه

• ایجاد پروژه Vue با Vite
• ابزارهای توسعه در Vue
• حذف تمام فایل‌های Vue از پروژه
• سلام دنیا در Vue
• Vue در عمل

کامپوننت‌ها (Components)

• ایجاد اولین کامپوننت
• ایجاد کامپوننت دیگر
• تنظیمات تمیزتر
• کامپوننت محلی در مقابل سراسری
• تمرین – کامپوننت محلی
• حل تمرین – کامپوننت محلی
• افزودن Bootstrap

ارتباط بین کامپوننت‌ها

• ارسال Props
• Props متصل
• اعتبارسنجی Props
• Props و متغیر محلی
• لیست مخاطبین
• ارسال Binding داینامیک Prop
• تغییر داینامیک کلاس و متن دکمه
• نکته اضافی (TIP)
• Emits در عمل
• ارسال پارامتر در Emits
• ارسال آرایه در Emit
• نکته اضافی (TIP) – دریافت مقدار از کامپوننت والد
• ارسال اشیاء در Emit
• Emit درون خطی

Provide و Inject

• افزودن کامپوننت مخاطب جدید
• تمرین – Emit در Vue
• حل تمرین – Emits در Vue
• تولیدکننده عدد شانس
• ارسال Props به نوه
• مشکل با Props
• Provide و Inject
• ارسال متد به عنوان Props

Slots و Lifecycle

• پاک‌سازی و Lucky Number V2
• کامپوننت‌های داینامیک
• نکته اضافی (TIP)
• Keep Alive
• پاک‌سازی
• Slots
• مالک داده‌های Slots
• Slots نام‌گذاری شده
• استایل Scoped
• پاک‌سازی Lifecycle
• دموی Lifecycle
• پاک‌سازی پروژه
• Composibles در عمل
• Composible در چند کامپوننت
• Props در Composibles

Routing

• ایجاد پروژه
• افزودن Vue Router
• ایجاد کامپوننت‌ها
• ایجاد Router در Vue
• Routing در عمل
• پیکربندی Vite
• افزودن هدر
• لینک Router
• اتصال مسیر داینامیک
• چند پارامتر در URL
• مسیر با مقادیر داینامیک
• مسیرهای نام‌گذاری شده
• استفاده از مسیرهای نام‌گذاری شده
• Redirect URL
• Not Found
• هدایت از اسکریپت به کامپوننت دیگر
• دکمه بازگشت
• محافظت سراسری Navigation
• محافظت صفحات از دسترسی غیرمجاز
• کامپوننت بدون دسترسی در عمل
• کلاس لینک فعال

درخواست‌های API

• ایجاد پروژه و پاک‌سازی
• Axios در عمل
• Fetch در عمل
• json server آماده
• درخواست GET روی json server
• کد سازمان‌دهی شده
• Loader در عمل
• کامپوننت Loader

Pinia

• ایجاد پروژه
• Routing در عمل
• افزودن Pinia به App
• ایجاد فروشگاه Pinia
• UI صفحه اصلی
• استفاده از Store در کامپوننت
• به‌روزرسانی State در Pinia
• Getters در Pinia و یک مشکل
• Actions در Pinia
• ریست بازی
• Pinia در چند کامپوننت
• سبک Composition API

راه‌اندازی پروژه نهایی

• ایجاد پروژه و پکیج‌ها
• افزودن پوشه و کامپوننت‌های خالی
• پیکربندی Routes و Constants
• طراحی هدر
• کامپوننت فوتر
• بخش اول UI هدر
• هدر در عمل

Theme Store

• افزودن تنظیم رنگ در Navbar
• Theme Store
• Themes در عمل

محصول و Firebase

• ایجاد اپ در Firebase
• ایجاد پایگاه داده Firestore
• سرویس محصول
• ایجاد UI محصول
• فرم محصول
• پردازش شیء محصول
• اعتبارسنجی فرم
• Dropdown دسته‌بندی
• نکته اضافی (TIP)
• Sweet alert
• مشکل با Tags
• ایجاد محصول در Firebase و هدایت

مدیریت محصول

• قالب لیست محصولات
• واکشی تمام محصولات
• نمایش تمام محصولات
• Loader Bootstrap
• Endpoints در سرویس محصول
• حذف محصول در عمل
• بارگذاری محصول برای به‌روزرسانی
• به‌روزرسانی در عمل

صفحه اصلی

• دریافت لیست محصولات برای صفحه اصلی
• قالب‌ها برای صفحه اصلی و کارت محصول
• کامپوننت کارت محصول داینامیک
• تنظیمات نمایش فروش
• مودال جزئیات محصول
• جزئیات محصول در عمل
• نمایش لیست دسته‌بندی
• فیلتر دسته‌بندی در عمل
• جستجوی محصول
• گزینه‌های مرتب‌سازی
• مرتب‌سازی در عمل

احراز هویت (Authentication)

• افزودن قالب‌ها
• افزودن Auth در Firebase
• راه‌اندازی اولیه Sign Up
• راه‌اندازی اولیه Sign In
• ایجاد Auth Store
• ایجاد کاربر در Firebase
• پیام خطای اعتبارسنجی
• افزودن مجموعه کاربران در Firebase با نقش‌ها
• Sign-in در عمل
• به‌روزرسانی هدر پس از ورود
• بررسی جلسه در Firebase
• Sign-Out در عمل
• بررسی Auth State قبل از Mount کردن App
• کامپوننت Contact US

مجوزها (Authorization)

• کاربر ادمین و معمولی
• افزودن روش‌های Authorization
• نقش‌ها در عمل
• نمایش ایمیل
• پاک‌سازی

Cloudinary و استقرار

• یک باگ
• هم‌تراز کردن Theme Store با Composition API
• حفظ State در Pinia
• روش آپلود به Cloudinary
• آپلود در Cloudinary
• باگ رفع شد
• Swal Composibles
• استقرار برنامه

آیا این دوره پیش نیاز دارد؟

بله، برای شروع این دوره آشنایی اولیه با HTML، CSS و JavaScript مورد نیاز می باشد.

این دوره برای چه کسانی مناسب است؟

هر کسی که علاقه‌مند به یادگیری Vue.js از پایه است.

حاصل دوره

شما دانشجویان عزیز با گذراندن این دوره از یک مبتدی مطلق به یک توسعه‌دهنده Vue.js با اعتماد به نفس تبدیل خواهید شد. مهارت‌های لازم برای ساخت اپلیکیشن‌های وب پویا، تعاملی و مقیاس‌پذیر را کسب کرده و قادر خواهید بود پروژه‌های واقعی را از 0 تا 100 بسازید و وارد بازار کار شوید.