ملزومات Nuxt 3

معرفی
سرفصل

✅ سرفصل و جزئیات آموزش

در این دوره فریمورک شهودی Nuxt 3 را می آموزید که شامل ابزارها و ساختار داخلی برای ساخت اپلیکیشن های Vue است که می توانند مقیاس بندی شوند.

Nuxt چیست؟

Nuxt فریمورکی است که روی Vue ساخته شده و به ما اجازه می دهد بر برخی از مشکلات ذاتی با یک اپلیکیشن تک صفحه ای (معروف به SPA) غلبه کنیم.

چرا به Nuxt نیاز داریم؟

مشکل اصلی SPA مربوط به بهینه سازی موتور جستجو (معروف به سئو) است. این به خودی خود یک مبحث بزرگ است، اما اصل مطلب این است که صفحه وب آن حاوی اطلاعات مختلفی است که بات های موتور جستجو هنگام ایندکس گذاری صفحه قابل خواندن هستند. هر چه اطلاعات بیشتری را بتوان ایندکس گذاری کرد، شانس بیشتری برای یافتن صفحه توسط موتورهای جستجو دارد.

Nuxt با الف) تولید محتوا در سمت سرور و ارسال HTML کاملا رندر شده به قالب‌ ها، یا ب) ایجاد صفحات HTML استاتیک، که سریع‌ ترین راه برای ارائه محتوا به مرورگر است، این مشکل را برطرف می‌ کند.

بیایید در مورد این دو رویکرد به سرعت صحبت کنیم.

دو رویکرد رایج برای شروع پروژه وب مدرن وجود دارد. اول، رندرینگ سمت سرور یا به اختصار SSR وجود دارد. هنگامی که یک کلاینت از یک سرور درخواست می کند، SSR صفحه را به صورت بلادرنگ روی سرور رندر می کند. از آنجایی که صفحه به صورت بلادرنگ واقعی رندر می شود، همیشه بروز خواهد بود.

اکنون در مقابل، تولید سایت استاتیک یا به اختصار SSG، تمام صفحات وب سایت شما را در زمان بیلد رندر می کند، یعنی زمانی که وب سایت شما مستقر می شود. از آنجایی که صفحات ما قبلا رندر شده اند، زمانی که کلاینت در حال درخواست است، فقط باید صفحه مناسب را ارسال کند. متفاوت از SSR، هیچ رندرینگی در سرور به صورت بلادرنگ انجام نمی شود. در زمان بیلد به همه چیز رسیدگی شده است، بنابراین سریع تر است.

علاوه بر این، از آنجا که هیچ اتصال API یا اتصال پایگاه داده وجود ندارد و لاگین ها و حساب های کاربری وجود ندارد، هیچ نگرانی امنیتی وجود ندارد.

ما در پایان دوره نحوه استقرار سایت خود را به هر دو روش نشان خواهیم داد.

Nuxt چه ویژگی های دیگری را ارائه می دهد؟

یکی از مزایای اصلی این است که Nuxt با پیش‌ فرض‌ های معقول از پیش پیکربندی شده است. با یک اپلیکیشن معمولی Vue، باید پیکربندی دستی بسیار بیشتری را انجام دهید. به عنوان مثال، Nuxt در حال حاضر شامل Vue Router و Vue Meta، در میان موارد دیگر است.

یکی از ویژگی های اصلی Nuxt نحوه تولید مسیرها است. در Vue SPA، کاربر مسئول ایجاد مسیرهای مختلف برای اپلیکیشن و کامپوننت های مرتبط در یک فایل پیکربندی بزرگ است. Nuxt از ساختار پوشه در دایرکتوری pages/ استفاده می کند تا به طور خودکار Vue Router را برای شما پیکربندی کرده و URL های شما را ایجاد کند.

به عنوان مثال، اگر pages/about.vue/ را ایجاد کنید، می توانید به محتوای about.vue در <a href="http://mysite.com/about" target="blank">mysite.com/about< دسترسی داشته باشید. چند گزینه دیگر وجود دارد که بعدا در مورد آن ها صحبت خواهیم کرد، اما زیبایی این رویکرد این است که تنها کاری که باید انجام دهید این است که دایرکتوری ها و کامپوننت های خود را ایجاد کنید و Nuxt پیکربندی مسیر را برای شما انجام می دهد.

یکی دیگر از نیازهای رایج برای یک سایت بزرگتر، طرح بندی های سفارشی است. به عنوان مثال، ممکن است بخواهید یک طرح بندی برای صفحه اول خود، یک طرح بندی دیگر برای صفحات مقاله، یک طرح بندی دیگر برای صفحات محصول و یک طرح بندی دیگر برای صفحات پرسش و پاسخ داشته باشید. با Nuxt می‌ توانید به راحتی طرح‌ بندی‌ های سفارشی ایجاد کنید و سپس آن‌ ها را به صورت دلخواه روی کامپوننت های خود اعمال کنید.

آنچه در این دوره به آن خواهیم پرداخت:

نصب Nuxt
ویرایش محتوای کامپوننت
ایجاد طرح بندی سفارشی
استفاده از ساختار دایرکتوری برای تعریف URLs
ارسال مقادیر پویا به کامپوننت از URL
Consume کردن داده از یک API خارجی
- ایجاد اندپوینت API سرور
- استفاده از useFetch برای دریافت داده
استفاده ازcomposition API

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