آموزش Vue 3: یک برنامه موبایل و دسک تاپ (با Quasar 2 & Pinia) ایجاد کنید - آخرین آپدیت

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

مقدمه Introduction

• مقدمه و برنامه دوره: Moneyballs Introduction & Course App: Moneyballs

• کوازار چیست؟ What is Quasar?

• Vue 3 & Composition مبانی API Vue 3 & Composition API Basics

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

• Chrome & Vue Devtools Chrome & Vue Devtools

شروع Getting Started

• node.js و quasar cli را نصب کنید Install Node.js and Quasar CLI

• یک پروژه جدید Quasar را در مرورگر ایجاد و راه اندازی کنید Create & launch a new Quasar Project in the Browser

• ساختار پوشه - چیدمان ، صفحات ، مسیرها و موارد دیگر Folder structure - Layouts, Pages, Routes & more

• بارگیری کد منبع Download Source Code

چیدمان ، صفحات و ناوبری Layout, Pages & Navigation

• طرح بندی را سفارشی کنید Customize Layout

• رنگ و سبک Colors & Style

• صفحات و مسیرها Pages & Routes

• ناوبری Navigation

• حالت ناوبری فعال Active Navigation State

• عرض کشو و نقطه شکست را بهبود بخشید Improve Drawer width and Breakpoint

• بارگیری کد منبع Download Source Code

طراحی صفحه ورودی Entries Page Design

• لیست ورودی ها Entries List

• قالب بندی ارز Currency formatting

• سازگار - UseCurrencify Composable - useCurrencify

• Composable - UseAmountColorClass Composable - useAmountColorClass

• متن ورود را بهبود بخشید Improve the Entry Text

• فرم ورود را اضافه کنید Add Entry Form

• نوار تعادل Balance Bar

• خاصیت محاسبه شده - تعادل Computed Property - Balance

• بارگیری کد منبع Download Source Code

ورود را اضافه کنید Add Entry

• زمینه ها را به شیء واکنشی متصل کنید Connect Fields to Reactive Object

• ارسال فرم و اضافه کردن ورودی Submit Form & Add Entry

• خطای تعادل را برطرف کنید Fix the Balance Error

• تنظیم مجدد فرم و کد مرتب Reset Form & Tidy Code

• قسمت نام مجدد Refocus Name Field

• بارگیری کد منبع Download Source Code

برای حذف ورود به کشیدن ضربه بزنید Swipe to Delete Entry

• برای حذف با SlideItem بکشید Swipe to Delete with SlideItem

• قبل از حذف Prompt before Delete

• ورودی را حذف کنید Delete the Entry

• پیام گفتگو را با HTML بهبود بخشید Improve the Dialog Message with HTML

• یک اعلان حذف شده را نشان دهید Show a Deleted Notification

• بارگیری کد منبع Download Source Code

Pinia - فروشگاه راه اندازی Pinia - Setup Store

• مدیریت دولت و پینیا State Management & Pinia

• گزینه ها در مقابل فروشگاه های تنظیم Options vs Setup Stores

• یک فروشگاه راه اندازی Pinia را تنظیم کنید Setup a Pinia Setup Store

• داده ها را به حالت پینیا منتقل کنید Move Data into Pinia State

• تعادل محاسبه شده را به pinia getter منتقل کنید Move Computed Balance into Pinia Getter

• اقدام به ورود پینیا را اضافه کنید Add Entry Pinia Action

• اقدامات پینیا را حذف کنید Delete Entry Pinia Action

• صفحه ورودی ها را مرتب کنید Tidy Up the Entries Page

• بارگیری کد منبع Download Source Code

مؤلفه های کودک Child Components

• تعادل Balance

• ورود را اضافه کنید Add Entry

• ورود Entry

• هیچ چیز اینجا برگشت Nothing Here Fallback

• بارگیری کد منبع Download Source Code

نام و مقدار ویرایش Edit Name & Amount

• setup qpopupedit برای نام Setup QPopupEdit for Name

• qpopupedit - سفارشی سازی و سبک QPopupEdit - Customization & Style

• setup qpopupedit برای مقدار Setup QPopupEdit for Amount

• نام و مقدار را به روز کنید Update the Name & Amount

• بارگیری کد منبع Download Source Code

علامت گذاری شده Mark as Paid

• علامت گذاری شده Mark as Paid

• سبک ورود پرداخت شده Paid Entry Style

• تراز پرداخت شده را نمایش دهید Display the Paid Balance

• تعادل پرداخت شده Paid Balance Getter

• بارگیری کد منبع Download Source Code

ورودی ها Sort Entries

• نصب sortable.js (نسخه VUE 3) Install Sortable.js (Vue 3 version)

• نمایش دسته های مرتب سازی Show Sort Handles

• برای مرتب سازی بر روی دکمه ضامن اضافه کنید Add a Toggle Button for Sort Handles

• فقط روی دستگیره ها مرتب سازی کنید Only Sort on Handles

• حالت را در تنظیم مجدد به روز کنید Update the State on Reorder

• سبک را برطرف کنید Fix the Style

• بارگیری کد منبع Download Source Code

برای بهبود تجربه از دستورالعمل ها و انتقال ها استفاده کنید Use Directives & Transitions to Improve the Experience

• بخشنامه - Selectall Directive - selectAll

• شماره منوی متن Context Menu Issue

• انتقال - هیچ چیز در اینجا Transition - Nothing Here

• انتقال - نوار تعادل Transition - Balance Bar

• بارگیری کد منبع Download Source Code

صفحه تنظیمات Settings Page

• یک فروشگاه تنظیمات ایجاد کنید Create a Settings Store

• سریع برای حذف ضامن Prompt to Delete Toggle

• Delete Prompt را اختیاری کنید Make the Delete Prompt Optional

• تعادل در حال اجرا - تنظیم و سبک ها Show Running Balance - Setting & Styles

• تعادل در حال اجرا - گیرنده Show Running Balance - Getter

• تعادل در حال اجرا را نشان دهید - مشکلات سبک را برطرف کنید Show Running Balance - Fix Style Issues

• نماد ارز را تغییر دهید Change Currency Symbol

• UseCurrencify Composible را به روز کنید Update useCurrencify Composable

• بارگیری کد منبع Download Source Code

حالت تاریک Dark Mode

• تنظیمات حالت تاریک را اضافه کنید Add Dark Mode Settings

• افزونه تاریک Dark Plugin

• سبک های ورودی پرداخت شده Paid Entry Styles

• ترکیب - useLightorDark Composable - useLightOrDark

• کلاسهای CSS تیره و سبک Dark & Light CSS Classes

• اضافه کردن سبک فرم ورود Add Entry Form Style

• سایه ها را در حالت تاریک حذف کنید Remove Shadows in Dark Mode

• رنگ اولیه تیره تر Darker Primary Color

• هیچ چیز در اینجا جزء و ترفندهای دیگر Nothing Here Component & Other Tweaks

• بارگیری کد منبع Download Source Code

LocalStorage - داده های ما را ذخیره کنید LocalStorage - Save our Data

• داده های تنظیمات را ذخیره کنید Save Settings Data

• تنظیمات را در شروع برنامه بارگذاری کنید Load Settings on App Start

• داده های ورودی را ذخیره و بارگیری کنید Save & Load Entries Data

• مسئله مرتب سازی/حذف عجیب و غریب را برطرف کنید Fix Strange Sort / Delete Issue

• بارگیری کد منبع Download Source Code

سیستم عامل ها - وب Platforms - Web

• Icon Genie - مقدمه و نصب Icon Genie - Introduction & Installation

• نماد منبع را با FIGMA ایجاد کنید (یا فقط آن را بارگیری کنید) Create the Source Icon with Figma (or just download it)

• نمادها را با نماد Genie تولید کنید Generate Icons with Icon Genie

• برای دستور ما یک اسکریپت NPM ایجاد کنید Create an NPM Script for our Command

• ایجاد و استقرار برنامه به وب Build and Deploy App to the Web

• بارگیری کد منبع Download Source Code

سیستم عامل ها - MAC (الکترون) Platforms - Mac (Electron)

• پلت فرم MAC را اضافه کنید Add the Mac Platform

• فایل فرآیند اصلی الکترونی و مرتب کردن Electron Main Process file & Tidying Up

• تنظیمات پنجره مرورگر را سفارشی کنید Customize Browser Window Settings

• منو را با یک الگوی منو قابل تنظیم کنید Make Menu Customizable with a Menu Template

• الگوی منو را در پرونده جداگانه قرار دهید Put Menu Template into Separate File

• منو - گزینه تنظیمات را اضافه کنید Menu - Add a Settings Option

• برای گوش دادن به گزینه Settings از Bridge Bridge & Ipcrenderer استفاده کنید Use Context Bridge & ipcRenderer to listen to Settings Option

• میانبر صفحه کلید تنظیمات را اضافه کنید Add a Settings Keyboard Shortcut

• یک دکمه ترک اضافه کنید (فقط برای الکترون) Add a Quit Button (only for Electron)

• برای ترک رویداد گوش دهید و برنامه را ترک کنید Listen for Quit Event and Quit the App

• حذف داده های برنامه (محلی و غیره) Removing App Data (LocalStorage etc)

• نماد برنامه را با نماد Genie ایجاد کنید Generate App Icon with Icon Genie

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

• بارگیری کد منبع Download Source Code

سیستم عامل ها - ویندوز (الکترون) Platforms - Windows (Electron)

• ماشین مجازی (موازی یا VirtualBox) Virtual Machine (Parallels or VirtualBox)

• ساخت نسخه ویندوز (& Setup NPM Script) Build the Windows Version (& setup NPM Script)

• گزینه تنظیمات را به منوی پرونده اضافه کنید Add Settings Option to File Menu

• بارگیری کد منبع Download Source Code

سیستم عامل ها - iOS (خازن) Platforms - iOS (Capacitor)

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

• راه اندازی برنامه در iOS Simulator برای توسعه Launch app on iOS Simulator for Development

• پوشه SRC-Capacitor src-capacitor folder

• با Safari بازرسی کنید و تعادل شفاف را برطرف کنید Inspect with Safari & Fix Transparent Balance

• عنوان عنوان را برطرف کنید و فرم ورود را اضافه کنید Fix Header Title & Add Entry Form

• اضافه کردن فرم ورود - اعتبار سنجی مقدار Add Entry Form - Amount Validation

• ورود - اعتبار مقدار مبلغ Entry - Amount Amount Validation

• تمرکز خودکار را بر روی خازن غیرفعال کنید Disable Auto Focus on Capacitor & Fix Validation

• بخشنامه - تمرکز خودکار - فوکوس خودکار را روی خازن تأخیر کنید Directive - Auto Focus - delay the autofocus on Capacitor

• افزونه خازن - گفتگو - گفتگوی بومی Capacitor Plugin - Dialog - Show Native Dialog

• افزونه دیالوگ - گفتگوی را سفارشی کنید Dialog Plugin - Customize the Dialog

• آیکون ها و صفحه های چلپ چلوپ را با icongenie تولید کنید Generate Icons & Splash Screens with IconGenie

• افزونه Splash Screen را نصب کنید Install the Splash Screen Plugin

• راه اندازی در شبیه سازهای مختلف دستگاه Launch on Different Device Simulators

• در یک دستگاه iOS واقعی توسعه دهید Develop on a Real iOS Device

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

• بارگیری کد منبع Download Source Code

سیستم عامل ها - Android (خازن) Platforms - Android (Capacitor)

• Android Studio & SDK را نصب کنید Install Android Studio & SDK

• Android را به مسیر خود اضافه کنید Add Android to your Path

• دستگاه مجازی را تنظیم کنید Setup Virtual Device

• راه اندازی در Android Simulator Launch on Android Simulator

• وضعیت و نوار ناوبری را برطرف کنید Fix Status & Navigation Bar Color

• اشکال زدایی با chrome بازرسی Debug with Chrome Inspect

• نماد و چلپ چلوپ اندرویدی خود را با نماد Genie ایجاد کنید Generate your Android Icon & Splash Screen with Icon Genie

• در دستگاه Android واقعی راه اندازی کنید Launch on Real Android Device

• برنامه تولید را بسازید Build the App for Production

• بارگیری کد منبع Download Source Code

دوره دور Course Round Up

• ویدیوی جایزه: پیشنهادات و دوره های شما Bonus Video: Your Suggestions & Course Round Up