آموزش دوره Nuxt.js را کامل کنید

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

با استفاده از Vue-CLI 3 یک برنامه Vue ایجاد کنید Create a Vue App using Vue-CLI 3

• یک برنامه Vue را با استفاده از Vue-CLI 3 تنظیم کنید Set up a Vue app using Vue-CLI 3

• تجزیه و تحلیل دایرکتوری ریشه پروژه Project root directory analysis

• طراحی اپلیکیشن App design

• قسمت 1 برنامه را ایجاد کنید Create the App Part 1

• برنامه قسمت 2 را ایجاد کنید Create the App Part 2

• جمع بندی پروژه Project wrap-up

• کد منبع را دریافت کنید Get source code

مبانی Nuxt Nuxt fundamentals

• Nuxt را تنظیم کنید Set up Nuxt

• تجزیه و تحلیل ساختار فایل پروژه Project file structure analysis

• چیدمان Layout

• صفحه خطای سفارشی Custom error page

• تمرین کوتاه: طرح بندی صفحه سفارشی Mini practice: custom page layout

اصول Nuxt: مرور و تمرین Nuxt fundamentals: review and practice

• Reivew Reivew

• هدر، اصلی و پاورقی ایجاد کنید Create the header, main and footer

• نوار ناوبری را ایجاد کنید Create the navi bar

• صفحات ایجاد کنید Create pages

• صفحه خطا و چالش The error page and challenge

پلاگین های Nuxt Nuxt plugins

• CSS و CDN جهانی Universal CSS and CDN

• دارایی ها در مقابل ایستا Assets VS. static

• ماژول رابط کاربری: bootstrap-vue UI Module: bootstrap-vue

• Vue Meta در Nuxt Vue Meta in Nuxt

• VueX در Nuxt قسمت 1 VueX in Nuxt Part 1

• VueX در Nuxt قسمت 2 VueX in Nuxt Part 2

افزونه های Nuxt: بررسی و تمرین Nuxt plugins: review and practice

• مرور Review

• CDN، پلاگین و ماژول Nuxt CDN, plugin and Nuxt module

• اطلاعات سر سفارشی Custom head information

• CSS جهانی و linkExactActiveClass Universal CSS and linkExactActiveClass

• VueX VueX

سیستم مسیریابی Nuxt Nuxt routing system

• معرفی روتر Nuxt Nuxt Router Introduction

• مسیر تو در تو Nested route

• nuxt-link nuxt-link

• پیوند فعال active-link

• ایجاد افکت های انتقال و animate.css Create transition effects and animate.css

• مسیر پویا قسمت 1 Dynamic route Part 1

• مسیر پویا قسمت 2 Dynamic route Part 2

• مسیر تودرتو پویا Dynamic nested route

• تایید اعتبار Validate

سیستم مسیریابی Nuxt: بررسی و تمرین Nuxt routing system: review and practice

• مرور Review

• دکمه فعال و مشکلات غیر منتظره را برجسته کنید Highlight the active button and unexpected problems

• مسیر تو در تو Nested route

• مسیر تودرتو پویا Dynamic nested route

• صفحه اصلی و روش اعتبارسنجی The home page and the validate method

زمینه و میان افزار Context and middleware

• مقدمه ای بر زمینه Introduction to Context

• نحوه ایجاد و ثبت میان افزارها How to create and register middlewares

• میان افزار و روتر Nuxt Middleware and Nuxt router

• Middleware و VueX Middleware and VueX

چهار روش زمینه Nuxt: بررسی و تمرین The four Nuxt context methods: review and practice

• مرور Review

• برنامه Express ما استفاده می کنیم The Express program we use

• عملیات کوکی با استفاده از Middleware Operating Cookie using Middleware

• Cookie-universal-nuxt Cookie-universal-nuxt

• کاربران ثبت نام نشده را قفل کنید Lock out unregistered users

بازیابی اطلاعات از برنامه Backend Retrieve data from the backend program

• مقدمه ای بر asyncData Introduction to asyncData

• قول بازگشت Return promise

• ناهمگام در انتظار async await

• ماژول axios axios module

• روش واکشی The fetch method

• روش اقدام nuxtServerInit The nuxtServerInit Action Method

• کد منبع را دریافت کنید Get Source Code

بازیابی داده ها از برنامه Backend: بررسی و تمرین Retrieve data from the backend program: review and practice

• مرور Review

• بازیابی اطلاعات برای صفحه اصلی با استفاده از nuxtServerInit Retrieve data for the homepage using nuxtServerInit

• بازیابی داده ها برای کامپ گالری. با استفاده از واکشی Retrieve data for the gallery comp. using fetch

• با استفاده از asyncData داده ها را برای صفحه معرفی بازیابی کنید Retrieve data for the introduction page using asyncData

• کد منبع نهایی برنامه Final app source code