آموزش Vuetify 2: ایجاد یک برنامه با Vue JS 2 و Vuex - در 5 ساعت!

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

معرفی Introduction

• معرفی Introduction

• Vuetify چیست؟ What is Vuetify?

معرفی Introduction

• معرفی Introduction

• Vuetify چیست؟ What is Vuetify?

• ویرایشگر و راه اندازی نرم افزار Editor & Software Setup

• ویرایشگر و راه اندازی نرم افزار Editor & Software Setup

شروع شدن Getting Started

• Node.js و Vue CLI را نصب کنید Install Node.js & Vue CLI

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

• Vue Devtools را روی کروم نصب کنید Install Vue Devtools on Chrome

• مبانی Vue.js Vue.js Basics

• پروژه را پاکسازی کنید Clean up the Project

شروع شدن Getting Started

• Node.js و Vue CLI را نصب کنید Install Node.js & Vue CLI

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

• پوشه و ساختار فایل Folder & File Structure

• پوشه و ساختار فایل Folder & File Structure

• Vue Devtools را روی کروم نصب کنید Install Vue Devtools on Chrome

• مبانی Vue.js Vue.js Basics

• پروژه را پاکسازی کنید Clean up the Project

طرح بندی، صفحات و مسیرها Layout, Pages & Routes

• با Wireframe شروع کنید Start with a Wireframe

• صفحات را آماده کنید Get Pages Ready

• سبک های سرصفحه Header Styles

• کد ماژول تمام شده Finished Module Code

طرح بندی، صفحات و مسیرها Layout, Pages & Routes

• با Wireframe شروع کنید Start with a Wireframe

• کشو را راه اندازی کنید Setup the Drawer

• کشو را راه اندازی کنید Setup the Drawer

• راه اندازی صفحات و مسیرها Setup Pages & Routes

• راه اندازی صفحات و مسیرها Setup Pages & Routes

• صفحات را آماده کنید Get Pages Ready

• سبک های سرصفحه Header Styles

• تصویر و عنوان را جایگزین کنید Replace Image & Title

• تصویر و عنوان را جایگزین کنید Replace Image & Title

• کد ماژول تمام شده Finished Module Code

صفحه کار Todo Page

• فهرستی از وظایف ایجاد کنید Create a List of Tasks

• یک ویژگی داده برای Tasks اضافه کنید Add a Data Property for the Tasks

• Task را اضافه کنید Add Task

• کد ماژول تمام شده Finished Module Code

صفحه کار Todo Page

• فهرستی از وظایف ایجاد کنید Create a List of Tasks

• یک ویژگی داده برای Tasks اضافه کنید Add a Data Property for the Tasks

• علامت گذاری کار به عنوان انجام شده Mark Task as Done

• علامت گذاری کار به عنوان انجام شده Mark Task as Done

• Task را حذف کنید Delete Task

• Task را اضافه کنید Add Task

• بدون بازگشت به کار No Tasks Fallback

• بدون بازگشت به کار No Tasks Fallback

• کد ماژول تمام شده Finished Module Code

Vuex Vuex

• Vuex چیست؟ What is Vuex?

• Tasks را به Vuex Store منتقل کنید Move Tasks into Vuex Store

• متد addTask() را به Vuex Store منتقل کنید Move addTask() Method into Vuex Store

• متد doneTask() را به Vuex Store منتقل کنید Move doneTask() Method into Vuex Store

• کد ماژول تمام شده Finished Module Code

Vuex Vuex

• Vuex چیست؟ What is Vuex?

• Tasks را به Vuex Store منتقل کنید Move Tasks into Vuex Store

• متد addTask() را به Vuex Store منتقل کنید Move addTask() Method into Vuex Store

• متد doneTask() را به Vuex Store منتقل کنید Move doneTask() Method into Vuex Store

• متد ()deleteTask را به Vuex Store منتقل کنید Move deleteTask() Method into Vuex Store

• متد ()deleteTask را به Vuex Store منتقل کنید Move deleteTask() Method into Vuex Store

• کد ماژول تمام شده Finished Module Code

اجزای کودک Child Components

• چرا از اجزای کودک استفاده کنیم؟ Why Use Child Components?

• ایجاد مؤلفه فرزند فهرست وظایف Create Task List Child Component

• کد ماژول تمام شده Finished Module Code

اجزای کودک Child Components

• چرا از اجزای کودک استفاده کنیم؟ Why Use Child Components?

• ایجاد Add Task Field Component Child Create Add Task Field Child Component

• ایجاد Add Task Field Component Child Create Add Task Field Child Component

• ایجاد مؤلفه فرزند فهرست وظایف Create Task List Child Component

• کامپوننت Task Child را ایجاد کنید Create Task Child Component

• کامپوننت Task Child را ایجاد کنید Create Task Child Component

• مؤلفه کودک «بدون کار» را ایجاد کنید Create “No Tasks” Child Component

• مؤلفه کودک «بدون کار» را ایجاد کنید Create “No Tasks” Child Component

• کد ماژول تمام شده Finished Module Code

اسنک بار Snackbars

• یک مؤلفه Snackbar ایجاد کنید Create a Snackbar Component

• نمایش Snackbar هنگام حذف وظیفه Show Snackbar when Task Deleted

• به Snackbar ها اجازه دهید به صورت پیاپی سریع نمایش داده شوند Allow Snackbars to be Shown in Quick Succession

• اجازه دهید Snackbar رد شود Allow Snackbar to be Dismissed

• کد ماژول تمام شده Finished Module Code

اسنک بار Snackbars

• یک مؤلفه Snackbar ایجاد کنید Create a Snackbar Component

• نمایش Snackbar هنگام اضافه شدن وظیفه Show Snackbar when Task Added

• نمایش Snackbar هنگام اضافه شدن وظیفه Show Snackbar when Task Added

• نمایش Snackbar هنگام حذف وظیفه Show Snackbar when Task Deleted

• متن اسنکبار را پویا کنید Make the Snackbar Text Dynamic

• متن اسنکبار را پویا کنید Make the Snackbar Text Dynamic

• به Snackbar ها اجازه دهید به صورت پیاپی سریع نمایش داده شوند Allow Snackbars to be Shown in Quick Succession

• اجازه دهید Snackbar رد شود Allow Snackbar to be Dismissed

• کد ماژول تمام شده Finished Module Code

دیالوگ ها Dialogs

• دیالوگ را سفارشی کنید و روی حذف کلیک کنید Customize Dialog and Show on Delete Click

• هنگامی که دکمه "بله" کلیک کردید، وظیفه را حذف کنید Delete the Task when “Yes” Button Clicked

• کد ماژول تمام شده Finished Module Code

دیالوگ ها Dialogs

• دیالوگ "Prompt to Delete" را نمایش دهید Show a “Prompt to Delete” Dialog

• دیالوگ "Prompt to Delete" را نمایش دهید Show a “Prompt to Delete” Dialog

• دیالوگ را سفارشی کنید و روی حذف کلیک کنید Customize Dialog and Show on Delete Click

• هنگامی که دکمه "بله" کلیک کردید، وظیفه را حذف کنید Delete the Task when “Yes” Button Clicked

• بستن دیالوگ روی "نه" کلیک کنید Close the Dialog on “No” Click

• بستن دیالوگ روی "نه" کلیک کنید Close the Dialog on “No” Click

• کد ماژول تمام شده Finished Module Code

منوی کار Task Menu

• Task را حذف کنید Delete Task

• کد ماژول تمام شده Finished Module Code

منوی کار Task Menu

• یک منوی کار اضافه کنید Add a Task Menu

• یک منوی کار اضافه کنید Add a Task Menu

• آیتم ها و نمادهای منو را اضافه کنید Add the Menu Items & Icons

• آیتم ها و نمادهای منو را اضافه کنید Add the Menu Items & Icons

• رسیدگی به کلیک ها Handle Clicks

• رسیدگی به کلیک ها Handle Clicks

• Task را حذف کنید Delete Task

• Task را حذف کنید Delete Task

• کد ماژول تمام شده Finished Module Code

ویرایش وظیفه Edit Task

• دیالوگ را ایجاد کنید Create the Dialog

• اعتبار سنجی فیلد Field Validation

• نمایش نوار اسنک Show a Snackbar

• کد ماژول تمام شده Finished Module Code

ویرایش وظیفه Edit Task

• دیالوگ را ایجاد کنید Create the Dialog

• نمایش عنوان کار فعلی در گفتگو Display Current Task Title in Dialog

• نمایش عنوان کار فعلی در گفتگو Display Current Task Title in Dialog

• Task را ذخیره کنید Save the Task

• Task را ذخیره کنید Save the Task

• دیالوگ را ببندید Close the Dialog

• دیالوگ را ببندید Close the Dialog

• اعتبار سنجی فیلد Field Validation

• اعتبار سنجی فیلد وظیفه را اضافه کنید Add Task Field Validation

• اعتبار سنجی فیلد وظیفه را اضافه کنید Add Task Field Validation

• نمایش نوار اسنک Show a Snackbar

• کد ماژول تمام شده Finished Module Code

• کد ماژول تمام شده Finished Module Code

طبق قرار ها Due Dates

• دیالوگ را ایجاد کنید Create the Dialog

• ذخیره تاریخ سررسید و بستن گفتگو Save Due Date & Close Dialog

• کد ماژول تمام شده Finished Module Code

طبق قرار ها Due Dates

• Data & Styles را تنظیم کنید Setup the Data & Styles

• Data & Styles را تنظیم کنید Setup the Data & Styles

• تاریخ را با date-fns فیلتر کنید Filter the Date with date-fns

• تاریخ را با date-fns فیلتر کنید Filter the Date with date-fns

• دیالوگ را ایجاد کنید Create the Dialog

• نمایش دیالوگ و انتخاب تاریخ فعلی Show Dialog and Select Current Date

• نمایش دیالوگ و انتخاب تاریخ فعلی Show Dialog and Select Current Date

• ذخیره تاریخ سررسید و بستن گفتگو Save Due Date & Close Dialog

• کد ماژول تمام شده Finished Module Code

گسترش جستجو Expanding Search

• فیلد جستجو را اضافه کنید Add the Search Field

• فقط اگر خالی باشد ببندید Only Close if Empty

• یک Getter برای فیلتر کردن وظایف ایجاد کنید Create a Getter to Filter the Tasks

• کد ماژول تمام شده Finished Module Code

گسترش جستجو Expanding Search

• فیلد جستجو را اضافه کنید Add the Search Field

• بهبود سبک Improve the Style

• بهبود سبک Improve the Style

• فیلد جستجو را ببندید Close the Search Field

• فیلد جستجو را ببندید Close the Search Field

• باز کردن روی Focus، Close روی Blur Open on Focus, Close on Blur

• باز کردن روی Focus، Close روی Blur Open on Focus, Close on Blur

• افزودن انیمیشن Add Animation

• افزودن انیمیشن Add Animation

• فقط اگر خالی باشد ببندید Only Close if Empty

• رفع مشکلات هدر Fix Header Issues

• رفع مشکلات هدر Fix Header Issues

• آن را به Vuex State متصل کنید Hook it up to Vuex State

• آن را به Vuex State متصل کنید Hook it up to Vuex State

• یک Getter برای فیلتر کردن وظایف ایجاد کنید Create a Getter to Filter the Tasks

• کد ماژول تمام شده Finished Module Code

تاریخ و زمان زنده Live Date & Time

• یک مؤلفه تاریخ و زمان زنده ایجاد کنید Create a Live Date & Time Component

• تاریخ واقعی را نشان دهید Show the Real Date

• تاریخ و زمان کامل را نمایش دهید و آن را زنده کنید Display Full Date & Time and Make it Live

• کد ماژول تمام شده Finished Module Code

تاریخ و زمان زنده Live Date & Time

• یک مؤلفه تاریخ و زمان زنده ایجاد کنید Create a Live Date & Time Component

• تاریخ واقعی را نشان دهید Show the Real Date

• تاریخ و زمان کامل را نمایش دهید و آن را زنده کنید Display Full Date & Time and Make it Live

• کد ماژول تمام شده Finished Module Code

کشو را زیبا کنید Beautify the Drawer

• یک تصویر اضافه کنید Add an Image

• کد ماژول تمام شده Finished Module Code

کشو را زیبا کنید Beautify the Drawer

• یک تصویر اضافه کنید Add an Image

• یک آواتار اضافه کنید Add an Avatar

• یک آواتار اضافه کنید Add an Avatar

• اضافه کردن نام و نام کاربری Add Name & Username

• اضافه کردن نام و نام کاربری Add Name & Username

• کشو را به صورت پیش فرض در تبلت و بالاتر نشان دهید Show the Drawer by Default on Tablet & Above

• کشو را به صورت پیش فرض در تبلت و بالاتر نشان دهید Show the Drawer by Default on Tablet & Above

• کد ماژول تمام شده Finished Module Code

عنوان صفحه پویا و متغیرهای محیطی Dynamic Page Titles & Environment Variables

• عنوان صفحه پایه را تنظیم کنید Set a Base Page Title

• از متغیر محیطی در اجزای ما استفاده کنید (1) Use the Environment Variable in Our Components (1)

• از متغیر محیطی در اجزای ما استفاده کنید (2) Use the Environment Variable in Our Components (2)

• کد ماژول تمام شده Finished Module Code

عنوان صفحه پویا و متغیرهای محیطی Dynamic Page Titles & Environment Variables

• عنوان صفحه پایه را تنظیم کنید Set a Base Page Title

• در تغییر مسیر نام صفحه را به عنوان اضافه کنید Add Page Name to Title on Route Change

• در تغییر مسیر نام صفحه را به عنوان اضافه کنید Add Page Name to Title on Route Change

• متغیر محیطی برای عنوان برنامه Environment Variable for App Title

• متغیر محیطی برای عنوان برنامه Environment Variable for App Title

• از متغیر محیطی در صفحه و روتر HTML استفاده کنید Use Environment Variable in HTML Page & Router

• از متغیر محیطی در صفحه و روتر HTML استفاده کنید Use Environment Variable in HTML Page & Router

• از متغیر محیطی در اجزای ما استفاده کنید (1) Use the Environment Variable in Our Components (1)

• از متغیر محیطی در اجزای ما استفاده کنید (2) Use the Environment Variable in Our Components (2)

• کد ماژول تمام شده Finished Module Code

با Vue Draggable کارها را دوباره مرتب کنید Reorder Tasks with Vue Draggable

• افزودن آیتم منوی مرتب سازی و دکمه مرتب سازی انجام شد Add Sort Menu Item & Done Sorting Button

• Vue Draggable را نصب کنید Install Vue Draggable

• کمی سبک اضافه کنید Add Some Style

• وضعیت Vuex را به روز کنید Update the Vuex State

• کد ماژول تمام شده Finished Module Code

با Vue Draggable کارها را دوباره مرتب کنید Reorder Tasks with Vue Draggable

• Sort Handle & Setup State را اضافه کنید Add the Sort Handle & Setup State

• Sort Handle & Setup State را اضافه کنید Add the Sort Handle & Setup State

• افزودن آیتم منوی مرتب سازی و دکمه مرتب سازی انجام شد Add Sort Menu Item & Done Sorting Button

• Vue Draggable را نصب کنید Install Vue Draggable

• کمی سبک اضافه کنید Add Some Style

• وضعیت Vuex را به روز کنید Update the Vuex State

• کد ماژول تمام شده Finished Module Code

داده های پایدار با پایگاه محلی Persistent Data with Localbase

• Localbase را نصب کنید Install Localbase

• عنوان به‌روزرسانی را حفظ کنید Make Update Title Persist

• سفارش مجدد را ادامه دهید Make Reordering Persist

• کد ماژول تمام شده Finished Module Code

داده های پایدار با پایگاه محلی Persistent Data with Localbase

• Localbase را نصب کنید Install Localbase

• افزودن وظیفه را ادامه دهید Make Add Task Persist

• افزودن وظیفه را ادامه دهید Make Add Task Persist

• Tasks را از Localbase در بارگیری دریافت کنید Get Tasks from Localbase on Load

• Tasks را از Localbase در بارگیری دریافت کنید Get Tasks from Localbase on Load

• تداوم کار انجام شده Make Done Task Persist

• تداوم کار انجام شده Make Done Task Persist

• عنوان به‌روزرسانی را حفظ کنید Make Update Title Persist

• تاریخ سررسید را ثابت نگه دارید Make Due Date Persist

• تاریخ سررسید را ثابت نگه دارید Make Due Date Persist

• Delete Task را ادامه دهید Make Delete Task Persist

• Delete Task را ادامه دهید Make Delete Task Persist

• سفارش مجدد را ادامه دهید Make Reordering Persist

• کد ماژول تمام شده Finished Module Code

• کد ماژول تمام شده Finished Module Code

موبایل، تست و تعمیر Mobile, Testing & Fixing

• تست روی iOS Testing on iOS

• تست در اندروید Testing on Android

• پنهان کردن فیلد افزودن وظیفه در صفحه درباره Hide Add Task Field on About Page

• رفع مشکلات اسکرول Fix Scrolling Issues

• اسنک بارها را تعمیر کنید Fix the Snackbars

• هنگام جستجو، مرتب سازی را غیرفعال کنید Disable Sorting when Searching

موبایل، تست و تعمیر Mobile, Testing & Fixing

• تست روی iOS Testing on iOS

• تست در اندروید Testing on Android

• فیلد Add Task را برطرف کنید Fix the Add Task Field

• فیلد Add Task را برطرف کنید Fix the Add Task Field

• پنهان کردن فیلد افزودن وظیفه در صفحه درباره Hide Add Task Field on About Page

• رفع مشکلات اسکرول Fix Scrolling Issues

• اسنک بارها را تعمیر کنید Fix the Snackbars

• هنگام جستجو، مرتب سازی را غیرفعال کنید Disable Sorting when Searching

• کد برنامه تمام شده Finished App Code

• کد برنامه تمام شده Finished App Code

در Netlify مستقر شوید Deploy to Netlify

• ساخت برای تولید Build for Production

• یک مخزن گیت محلی راه اندازی کنید Setup a Local Git Repository

در Netlify مستقر شوید Deploy to Netlify

• ساخت برای تولید Build for Production

• یک مخزن گیت محلی راه اندازی کنید Setup a Local Git Repository

• یک مخزن از راه دور در GitHub راه اندازی کنید Setup a Remote Repository on GitHub

• یک مخزن از راه دور در GitHub راه اندازی کنید Setup a Remote Repository on GitHub

• در Netlify مستقر شوید Deploy to Netlify

• در Netlify مستقر شوید Deploy to Netlify

بعدش چی؟ What Next?

• سخنرانی پاداش: بعد چه؟ از من بیشتر بیاموزید Bonus Lecture: What Next? & Learn More from Me

بعدش چی؟ What Next?

• سخنرانی پاداش: بعد چه؟ از من بیشتر بیاموزید Bonus Lecture: What Next? & Learn More from Me