دوره آموزش Nuxt.js برای توسعه با Vue همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره آموزش Nuxt.js برای توسعه با Vue

موضوع کلی: برنامه نویسی

موضوع میانی: توسعه وب: فرانت‌اند**

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر Vue.js و اکوسیستم آن
• 2. معرفی Nuxt.js: چرا به یک فریمورک متا نیاز داریم؟
• 3. تفاوت‌های کلیدی بین Nuxt و یک اپلیکیشن Vue SPA
• 4. آشنایی با حالت‌های مختلف رندر: SSR, SSG, CSR, Hybrid
• 5. نصب و راه‌اندازی اولین پروژه Nuxt
• 6. آشنایی با ساختار پوشه‌ها در Nuxt
• 7. فایل پیکربندی اصلی: `nuxt.config.ts`
• 8. اولین صفحه شما: کار با پوشه `pages`
• 9. مفهوم Auto-imports در Nuxt
• 10. اجرای پروژه در حالت توسعه (Development Mode)
• 11. مسیریابی مبتنی بر فایل (File-based Routing)
• 12. ایجاد صفحات ایستا (Static Routes)
• 13. ایجاد صفحات پویا (Dynamic Routes) با پارامتر
• 14. کار با پارامترهای مسیر (`useRoute`)
• 15. مسیرهای تودرتو (Nested Routes)
• 16. صفحات ایندکس (Index Pages) در پوشه‌ها
• 17. ایجاد لینک و ناوبری با کامپوننت `<NuxtLink>`
• 18. ناوبری برنامه‌ریزی شده (Programmatic Navigation) با `navigateTo`
• 19. مدیریت صفحات خطا (404 Not Found)
• 20. اعتبارسنجی پارامترهای مسیر (Route Validation)
• 21. مفهوم Layoutها و استفاده از `<NuxtLayout>`
• 22. ایجاد Layout پیش‌فرض (`layouts/default.vue`)
• 23. ساخت و استفاده از Layoutهای سفارشی
• 24. تغییر Layout به صورت پویا در صفحات
• 25. کار با کامپوننت‌ها در پوشه `components`
• 26. کامپوننت‌های گلوبال و Auto-import آنها
• 27. کامپوننت‌های سمت کلاینت (`<ClientOnly>`)
• 28. اسلات‌ها در Layoutها و کامپوننت‌ها (`<slot />`)
• 29. مقدمه‌ای بر دریافت داده در Nuxt
• 30. استفاده از `useFetch` برای دریافت داده از API
• 31. گزینه‌های `useFetch`: `lazy`, `server`, `initialCache`
• 32. رفرش کردن داده‌ها با `refresh`
• 33. استفاده از `useAsyncData` برای موارد پیچیده‌تر
• 34. تفاوت بین `useFetch` و `useAsyncData`
• 35. مدیریت وضعیت خطا و انتظار (Pending, Error)
• 36. ارسال داده (POST, PUT, DELETE) با `useFetch`
• 37. کش کردن داده‌ها و استراتژی‌های آن
• 38. دریافت داده در سمت سرور در مقابل سمت کلاینت
• 39. مدیریت وضعیت سراسری با `useState`
• 40. معرفی Pinia به عنوان راه‌حل رسمی مدیریت وضعیت
• 41. نصب و راه‌اندازی Pinia در Nuxt
• 42. تعریف یک Store در Pinia
• 43. استفاده از State, Getters, و Actions در کامپوننت‌ها
• 44. پایداری وضعیت (Persistence) Pinia با LocalStorage
• 45. مدیریت وضعیت سمت سرور و هیدریشن (Hydration)
• 46. کار با پوشه‌های `assets` و `public`
• 47. تفاوت بین `assets` و `public`
• 48. وارد کردن استایل‌های CSS سراسری
• 49. استایل‌دهی محدود (Scoped CSS) در کامپوننت‌ها
• 50. استفاده از پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 51. یکپارچه‌سازی با فریمورک‌های CSS (مانند Tailwind CSS)
• 52. بهینه‌سازی تصاویر با ماژول Nuxt Image
• 53. مدیریت فونت‌ها در پروژه Nuxt
• 54. اهمیت SEO در اپلیکیشن‌های مدرن
• 55. مدیریت Head و متا تگ‌ها با `useHead`
• 56. تنظیم عنوان (Title) و توضیحات (Description) پویا
• 57. مدیریت تگ‌های Open Graph برای شبکه‌های اجتماعی
• 58. ایجاد `sitemap.xml` با استفاده از ماژول
• 59. مدیریت فایل `robots.txt`
• 60. افزودن داده‌های ساختاریافته (Structured Data / JSON-LD)
• 61. معرفی Nitro: موتور سرور Nuxt
• 62. ایجاد API Route در پوشه `server/api`
• 63. مدیریت درخواست‌های GET, POST, PUT, DELETE
• 64. خواندن پارامترها و بدنه درخواست در API
• 65. ایجاد Server Middleware در پوشه `server/middleware`
• 66. استفاده از `server/utils` برای توابع کمکی سمت سرور
• 67. کار با کوکی‌ها و هدرها در سمت سرور
• 68. اتصال به پایگاه داده از طریق API Routeها
• 69. رندر کردن کامپوننت‌های Vue به رشته HTML در سرور
• 70. مفهوم Hybrid Rendering و رندر بر اساس هر مسیر
• 71. پلاگین‌ها در Nuxt: گسترش قابلیت‌ها
• 72. ایجاد یک پلاگین ساده ( سمت کلاینت، سرور یا هردو)
• 73. مفهوم Composables و ایجاد توابع قابل استفاده مجدد
• 74. کار با پوشه `utils` برای توابع کمکی سراسری
• 75. معرفی ماژول‌ها و نحوه استفاده از آنها
• 76. نصب و پیکربندی ماژول‌های محبوب (مانند Nuxt Content)
• 77. کار با Nuxt Content برای ساخت بلاگ یا سایت محتوامحور
• 78. اعتبارسنجی و مدیریت فرم‌ها
• 79. مدیریت متغیرهای محیطی (Environment Variables)
• 80. تفاوت `runtimeConfig` و `app.config`
• 81. مدیریت خطاها به صورت سراسری (Error Handling)
• 82. سفارشی‌سازی صفحه خطا
• 83. Transitions و انیمیشن بین صفحات
• 84. هوک‌های Nuxt (Nuxt Hooks)
• 85. Lazy Loading کامپوننت‌ها برای بهبود عملکرد
• 86. استراتژی‌های تست در Nuxt
• 87. تست واحد (Unit Testing) کامپوننت‌ها و Composables
• 88. تست End-to-End (E2E) با ابزارهایی مانند Playwright
• 89. دستور `nuxi build` و فرآیند بیلد
• 90. پیش‌نمایش بیلد نهایی با `nuxi preview`
• 91. استقرار پروژه Nuxt به عنوان Node.js Server
• 92. استقرار به صورت استاتیک (SSG) در پلتفرم‌هایی مانند Netlify
• 93. استقرار SSR در پلتفرم‌هایی مانند Vercel
• 94. بهینه‌سازی عملکرد: Code Splitting
• 95. بهینه‌سازی عملکرد: تحلیل باندل (Bundle Analysis)
• 96. نکات امنیتی در برنامه‌های Nuxt (CORS, CSRF)
• 97. تایپ‌اسکریپت در Nuxt: بهترین شیوه‌ها
• 98. ساختاردهی یک پروژه بزرگ Nuxt
• 99. اشکال‌زدایی (Debugging) اپلیکیشن‌های Nuxt
• 100. جمع‌بندی دوره و مسیر یادگیری آینده