Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
در حال بارگزاری، لطفا صبر کنید...
توضیحات دوره:
برنامه های پیچیده و جذاب Vue را با Nuxt3 بسازید. Nuxt3 رندر جهانی، روتر مبتنی بر فایل و سایر ویژگیها را فراهم میکند. درک ویژگیهای اضافی که Nuxt در بالای Vue ارائه میکند، مانند رندر جهانی، واردات خودکار، و مسیریابی مبتنی بر فایل استفاده از Nuxt برای ساخت برنامه آماده تولید با شیوههای توسعه مبتنی بر استفاده از Nuxtهای متعدد. 3 قابل ترکیب مانند useFetch، useAsyncData، useState یا useMeta پیاده سازی مسیریابی با رویکرد مبتنی بر فایل پیش نیازها: Basics of Vue 3 Basics JavaScript
این جامع ترین دوره آموزشی Nuxt 3 در بازار است. در حین ساختن شش پروژه دنیای واقعی، بسیاری از ویژگی های باورنکردنی Nuxt را یاد خواهید گرفت. با هر پروژه جدید ما عمیقاً به مفاهیم پیشرفته تر و پیشرفته تر Nuxt 3 می پردازیم. در پایان دوره می توانید با افتخار خود را به عنوان یک متخصص Nuxt معرفی کنید!
آنچه خواهید آموخت
در مقدمه، دقیقاً یاد خواهید گرفت که Nuxt چیست و مشکلاتی را که حل می کند. شما با رندر سمت مشتری آشنا خواهید شد و آن را با رندر جهانی مقایسه خواهید کرد.
در پروژه اول، دانش Vue 3 شما را با ساختن یک برنامه با API ترکیبی تازهسازی میکنیم. همچنین در مورد TypeScript و نحوه مدیریت کامپوننت ها توسط Nuxt آشنا خواهیم شد.
در پروژه دوم، عمیقتر به اکوسیستم Nuxt خواهیم رفت. ما درباره مسیریابی مبتنی بر فایل، طرحبندیها و تعریف ابردادههای صفحه یاد خواهیم گرفت.
در پروژه سوم، همه چیز را در مورد اینکه چگونه میتوانیم حالت را در سطح جهانی با composables مدیریت کنیم، یاد خواهیم گرفت.
در پروژه شماره چهار، نحوه ایجاد درخواست های HTTP با استفاده از useFetc h و useAsyncData را یاد خواهیم گرفت.
در پروژه پنجم، ما از قدرت های Nuxt برای ساخت REST API خودمان و استفاده از آن در مشتری استفاده خواهیم کرد.
در نهایت، در پروژه ششم، ما برنامه خود را با Supabase ادغام خواهیم کرد تا از احراز هویت و خدمات پایگاه داده SQL استفاده کنیم.
سرفصل ها و درس ها
ساخت عناصر رابط کاربری
Building The UI Elements
دو گزینه شما
Your Two Options
ایجاد یک برنامه Nuxt
Creating a Nuxt App
اضافه کردن Tailwind CSS
Adding Tailwind CSS
ساخت NavBar
Building the NavBar
ساخت نوار کناری
Building the Side Bar
ساخت صفحه جزئیات خودرو
Building the Car Details Page
ساخت عناصر رابط کاربری
Building The UI Elements
آنچه ما خواهیم ساخت
What We Will Be Building
آنچه ما خواهیم ساخت
What We Will Be Building
دو گزینه شما
Your Two Options
ایجاد یک برنامه Nuxt
Creating a Nuxt App
ایجاد یک برنامه Nuxt
Creating a Nuxt App
اضافه کردن Tailwind CSS
Adding Tailwind CSS
ساخت NavBar
Building the NavBar
ساختن قهرمان خانگی
Building the Home Hero
ساختن قهرمان خانگی
Building the Home Hero
ساخت نوار جستجو
Building the Search Bar
ساخت نوار جستجو
Building the Search Bar
ساخت نوار کناری
Building the Side Bar
ساخت کارت ماشین
Building the Car Card
ساخت کارت ماشین
Building the Car Card
ساخت صفحه جزئیات خودرو
Building the Car Details Page
مسیریابی و ناوبری مبتنی بر فایل
File Based Routing & Navigation
مقدمه ای بر مسیریابی مبتنی بر فایل
Intro to File Based Routing
مسیرهای پویا و اختیاری
Dynamic and Optional Paths
مسیرهای پویا منحصر به فرد
Unique Dynamic Paths
اضافه کردن ناوبری برنامه ای
Adding Programmatic Navigation
مسیریابی و ناوبری مبتنی بر فایل
File Based Routing & Navigation
مقدمه ای بر مسیریابی مبتنی بر فایل
Intro to File Based Routing
وارد کردن خودکار قطعات
Auto Importing Components
وارد کردن خودکار قطعات
Auto Importing Components
مسیرهای پویا و اختیاری
Dynamic and Optional Paths
پر کردن صفحه با کامپوننت ها
Filling the Page With Components
پر کردن صفحه با کامپوننت ها
Filling the Page With Components
مسیرهای پویا منحصر به فرد
Unique Dynamic Paths
مؤلفه NuxtLink
The NuxtLink Component
مؤلفه NuxtLink
The NuxtLink Component
اضافه کردن ناوبری برنامه ای
Adding Programmatic Navigation
پیاده سازی صفحات تو در تو
Implementing Nested Pages
پیاده سازی صفحات تو در تو
Implementing Nested Pages
عناوین را با useHead تغییر دهید
Change Titles With useHead
عناوین را با useHead تغییر دهید
Change Titles With useHead
تعریف صفحه آرایی
Defining Page Layouts
تعریف یک چیدمان سفارشی
Defining a Custom Layout
ذخیره عملکرد مشترک در Composables
Storing Common Functionality in Composables
تعریف صفحه آرایی
Defining Page Layouts
تعریف طرح بندی پیش فرض
Defining a Default Layout
تعریف طرح بندی پیش فرض
Defining a Default Layout
تعریف یک چیدمان سفارشی
Defining a Custom Layout
ذخیره عملکرد مشترک در Composables
Storing Common Functionality in Composables
رسیدگی به خطاهای سرویس گیرنده و سرور
Handling Client and Server Errors
رندر پویا کارت های ماشین
Dynamically Rendering the Car Cards
NuxtErrorBoundary برای رسیدگی به خطاهای سمت مشتری
NuxtErrorBoundary to Handle Client Side Errors
رسیدگی به خطاهای سرویس گیرنده و سرور
Handling Client and Server Errors
افزودن صفحه یافت نشد
Adding a Page Not Found Page
افزودن صفحه یافت نشد
Adding a Page Not Found Page
useError Composable
The useError Composable
useError Composable
The useError Composable
رندر پویا کارت های ماشین
Dynamically Rendering the Car Cards
نمایش پویا صفحه جزئیات خودرو
Dynamically Rendering the Car Details Page
نمایش پویا صفحه جزئیات خودرو
Dynamically Rendering the Car Details Page
پرتاب خطای سرور سفارشی
Throwing a Custom Server Error
پرتاب خطای سرور سفارشی
Throwing a Custom Server Error
Nuxt چگونه محتوا را رندر می کند
How Nuxt Renders Content
Nuxt چگونه محتوا را رندر می کند
How Nuxt Renders Content
به روز رسانی مکان
Updating the Location
به روز رسانی مکان
Updating the Location
پرتاب خطای سمت مشتری
Throwing a Client Side Error
پرتاب خطای سمت مشتری
Throwing a Client Side Error
NuxtErrorBoundary برای رسیدگی به خطاهای سمت مشتری
NuxtErrorBoundary to Handle Client Side Errors
بهبود عملکرد با Utilities
Improving Functionality With Utilities
useState Composable
The useState Composable
اجباری کردن رندر سمت کلاینت
Forcing Client Side Rendering
بهبود عملکرد با Utilities
Improving Functionality With Utilities
بهینه سازی تصاویر با NuxtImg
Optimizing Images with NuxtImg
بهینه سازی تصاویر با NuxtImg
Optimizing Images with NuxtImg
useState Composable
The useState Composable
اضافه کردن ماژول Vueuse
Adding the Vueuse Module
اضافه کردن ماژول Vueuse
Adding the Vueuse Module
اجباری کردن رندر سمت کلاینت
Forcing Client Side Rendering
بازبینی عملکرد نادیده گرفته شده
Revisiting the Skipped Functionality
افزودن فیلتر ساخت خودرو
Adding the Car Make Filter
بازبینی عملکرد نادیده گرفته شده
Revisiting the Skipped Functionality
افزودن فیلتر ساخت خودرو
Adding the Car Make Filter
افزودن فیلتر قیمت خودرو
Adding the Car Price Filter
افزودن فیلتر قیمت خودرو
Adding the Car Price Filter
احراز هویت و میان افزار
Authentication and Middleware
[اختیاری] - مونتاژ صفحات
[OPTIONAL] - Assembling the Pages
فعال کردن Google Authentication
Enabling Google Authentication
محافظت از مسیرها با میان افزار مسیر داخلی
Protecting Routes With Inline Route Middleware
به نام Middleware For DRY Code
Named Middleware For DRY Code
میان افزار جهانی برای کد DRYER
Global Middleware for DRYER Code
احراز هویت و میان افزار
Authentication and Middleware
ویژگی جدید ما
Our New Feature
ویژگی جدید ما
Our New Feature
[اختیاری] - مونتاژ صفحات
[OPTIONAL] - Assembling the Pages
ایجاد یک حساب کاربری Supabase
Creating a Supabase Account
ایجاد یک حساب کاربری Supabase
Creating a Supabase Account
اتصال Supabase به برنامه Nuxt ما
Connecting Supabase to Our Nuxt App
اتصال Supabase به برنامه Nuxt ما
Connecting Supabase to Our Nuxt App
فعال کردن Google Authentication
Enabling Google Authentication
پیاده سازی Google OAuth
Implementing Google OAuth
پیاده سازی Google OAuth
Implementing Google OAuth
رندر مشروط UI بر اساس وضعیت Auth
Conditionally Rendering UI Based on Auth Status
رندر مشروط UI بر اساس وضعیت Auth
Conditionally Rendering UI Based on Auth Status
پیاده سازی عملکرد خروج
Implementing the Logout Functionality
پیاده سازی عملکرد خروج
Implementing the Logout Functionality
محافظت از مسیرها با میان افزار مسیر داخلی
Protecting Routes With Inline Route Middleware
به نام Middleware For DRY Code
Named Middleware For DRY Code
میان افزار جهانی برای کد DRYER
Global Middleware for DRYER Code
نقاط پایانی سرور و درخواست های HTTP
Server Endpoints and HTTP Requests
ایجاد نقطه پایانی سرور
Creating a Server Endpoint
استخراج پارامترهای مسیر
Extracting the Path Parameters
استخراج پارامترهای پرس و جو
Extracting the Query Parameters
یکی دیگر از Fetch Composable
Another Fetch Composable
رفع مشکل در رسیدگی به خطا
Fixing an Issue With Error Handling
نقاط پایانی سرور و درخواست های HTTP
Server Endpoints and HTTP Requests
معرفی نقاط پایانی سرور
Intro to Server Endpoints
معرفی نقاط پایانی سرور
Intro to Server Endpoints
ایجاد نقطه پایانی سرور
Creating a Server Endpoint
استخراج پارامترهای مسیر
Extracting the Path Parameters
استخراج پارامترهای پرس و جو
Extracting the Query Parameters
واکشی داده ها از مشتری
Fetching the Data From the Client
واکشی داده ها از مشتری
Fetching the Data From the Client
یک روش هک برای بازیابی داده ها
A Hacky Way of Refetching Data
یک روش هک برای بازیابی داده ها
A Hacky Way of Refetching Data
افزودن پیام یافت نشد برای رابط کاربری بهتر
Adding a Not Found Message for Better UI
افزودن پیام یافت نشد برای رابط کاربری بهتر
Adding a Not Found Message for Better UI
افزودن نقطه پایانی Fetch Car
Adding the Fetch Car Endpoint
افزودن نقطه پایانی Fetch Car
Adding the Fetch Car Endpoint
یکی دیگر از Fetch Composable
Another Fetch Composable
رفع مشکل در رسیدگی به خطا
Fixing an Issue With Error Handling
استفاده از Postgres برای تراکنش های داده
Utilizing Postgres for Data Transactions
افعال HTTP
HTTP Verbs
واکشی داده ها از پایگاه داده
Fetching Data From the Database
اضافه کردن دو نقطه پایانی دیگر
Adding the Other Two Endpoints
فیلترهای پیچیده
Complex Filters
آخرین نقطه پایان ما
Our Last Endpoint
ایجاد یک درخواست POST از مشتری
Making a POST Request From the Client
رفع نقاط پایانی GET
Fixing the GET Endpoints
یک نقطه پایانی پیام دریافت کنید
A GET Message Endpoint
استفاده از Postgres برای تراکنش های داده
Utilizing Postgres for Data Transactions
یک دوره کوچک خرابی SQL
A Small SQL Crash Course
یک دوره کوچک خرابی SQL
A Small SQL Crash Course
نصب ORM
Installing an ORM
نصب ORM
Installing an ORM
ایجاد جداول ما به صورت برنامه ای
Programmatically Creating Our Tables
ایجاد جداول ما به صورت برنامه ای
Programmatically Creating Our Tables
نقطه پایانی کامل
A Perfect Endpoint
نقطه پایانی کامل
A Perfect Endpoint
افعال HTTP
HTTP Verbs
واکشی داده ها از پایگاه داده
Fetching Data From the Database
حذف داده ها از پایگاه داده
Deleting Data From the Database
حذف داده ها از پایگاه داده
Deleting Data From the Database
اضافه کردن دو نقطه پایانی دیگر
Adding the Other Two Endpoints
فیلترهای پیچیده
Complex Filters
آخرین نقطه پایان ما
Our Last Endpoint
ایجاد یک درخواست POST از مشتری
Making a POST Request From the Client
ایجاد یک درخواست دریافت از مشتری
Making a GET Request From the Client
ایجاد یک درخواست دریافت از مشتری
Making a GET Request From the Client
درخواست DELETE از مشتری
Making a DELETE Request From the Client
درخواست DELETE از مشتری
Making a DELETE Request From the Client
رفع نقاط پایانی GET
Fixing the GET Endpoints
نقطه پایانی پیام POST
A POST Message Endpoint
نقطه پایانی پیام POST
A POST Message Endpoint
یک نقطه پایانی پیام دریافت کنید
A GET Message Endpoint
ذخیره سازی و بازیابی تصویر
Image Storage and Retrieval
ذخیره سازی و بازیابی تصویر
Image Storage and Retrieval
ذخیره تصاویر در یک سطل
Storing Images in a Bucket
ذخیره تصاویر در یک سطل
Storing Images in a Bucket
بازیابی URL تصویر
Retrieving the Image URL
بازیابی URL تصویر
Retrieving the Image URL
شروع دوره میراث. در آینده حذف خواهد شد
BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE
لطفا این را تماشا کنید
Please Watch This
شروع دوره میراث. در آینده حذف خواهد شد
BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE
لطفا این را تماشا کنید
Please Watch This
[میراث] - مقدمه
[LEGACY] - Introduction
سمت کلاینت در مقابل سمت سرور در مقابل رندر جهانی
Client-Side vs Server-Side vs Universal Rendering
[میراث] - مقدمه
[LEGACY] - Introduction
مقدمه ای بر Nuxt و مزایای آن
Introduction to Nuxt and it's Benefits
مقدمه ای بر Nuxt و مزایای آن
Introduction to Nuxt and it's Benefits
سمت کلاینت در مقابل سمت سرور در مقابل رندر جهانی
Client-Side vs Server-Side vs Universal Rendering
مزایا و معایب رندر سمت مشتری و یونیورسال
Pros and Cons of Client-Side and Universal Rendering
مزایا و معایب رندر سمت مشتری و یونیورسال
Pros and Cons of Client-Side and Universal Rendering
پیش نیاز دوره
Course Prerequisite
پیش نیاز دوره
Course Prerequisite
[LEGACY] - غواصی در Nuxt
[LEGACY] - Diving into Nuxt
نمای کلی برنامه
App Overview
ایجاد یک برنامه Nuxt
Creating a Nuxt App
ساخت Boilerplate HTML
Building the Boilerplate HTML
سبک دادن به برنامه ما
Styling Our App
دولت مدیریت
Managing State
کمی TypeScript
A Little Bit of TypeScript
به روز رسانی ایالت ما پس از یک رویداد کلیک
Updating Our State After a Click Event
ایجاد کارت های نام
Creating the Name Cards
انتقال لوازم جانبی به اجزا
Passing Props to the Components
محاسبه نام کلاس ها
Computing the Class Names
برخورد با اجزای تو در تو
Dealing with Nested Components
[LEGACY] - غواصی در Nuxt
[LEGACY] - Diving into Nuxt
نمای کلی برنامه
App Overview
ایجاد یک برنامه Nuxt
Creating a Nuxt App
ایجاد یک برنامه Nuxt
Creating a Nuxt App
کاوش در Boilerplate
Exploring the Boilerplate
کاوش در Boilerplate
Exploring the Boilerplate
ساخت Boilerplate HTML
Building the Boilerplate HTML
سبک دادن به برنامه ما
Styling Our App
دولت مدیریت
Managing State
کمی TypeScript
A Little Bit of TypeScript
به روز رسانی ایالت ما پس از یک رویداد کلیک
Updating Our State After a Click Event
اضافه کردن آرایه نام ها
Adding the Names Array
اضافه کردن آرایه نام ها
Adding the Names Array
محاسبه نام ها بر اساس گزینه ها
Computing Names Based on Options
محاسبه نام ها بر اساس گزینه ها
Computing Names Based on Options
ایجاد کارت های نام
Creating the Name Cards
کار با کامپوننت ها
Working with Components
کار با کامپوننت ها
Working with Components
انتقال لوازم جانبی به اجزا
Passing Props to the Components
محاسبه نام کلاس ها
Computing the Class Names
برخورد با اجزای تو در تو
Dealing with Nested Components
انتشار رویدادها به مؤلفه والد
Emitting Events to the Parent Component
انتشار رویدادها به مؤلفه والد
Emitting Events to the Parent Component
[LEGACY] - صفحات و مسیریابی مبتنی بر فایل
[LEGACY] - Pages and File-Based Routing
نمای کلی برنامه
App Overview
افزودن بوت استرپ به صورت جهانی
Adding Bootstrap Globally
نمایش نظرات