فصل دوم: راه‌اندازی پروژه

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

مرحله ۱: مقداردهی اولیه Nuxt 3

برای شروع پروژه، از ابزار خط فرمان Nuxt به نام nuxi استفاده می‌کنیم تا یک پروژه جدید ایجاد کنیم.

دستورات:

npx nuxi@latest init cruise-rental-app
cd cruise-rental-app
npm install

توضیحات:

  • دستور npx nuxi@latest init cruise-rental-app: این دستور یک پروژه جدید Nuxt 3 با نام cruise-rental-app ایجاد می‌کند. استفاده از @latest تضمین می‌کند که آخرین نسخه Nuxt 3 (تا اکتبر ۲۰۲۵) نصب شود.
  • دستور cd cruise-rental-app: شما را به پوشه پروژه هدایت می‌کند.
  • دستور npm install: وابستگی‌های اولیه پروژه (مانند Nuxt و ابزارهای مرتبط) را نصب می‌کند. این دستور فایل package.json را بررسی کرده و پکیج‌های مورد نیاز را دانلود می‌کند.

نتیجه: پس از اجرای این دستورات، یک ساختار پروژه پایه Nuxt شامل فایل‌هایی مانند nuxt.config.ts، pages/ و public/ ایجاد می‌شود.

مرحله ۲: نصب وابستگی‌ها

برای افزودن قابلیت‌های مورد نیاز اپلیکیشن، ماژول‌ها و کتابخانه‌های زیر را نصب می‌کنیم:

دستورات:

npm install pinia @pinia/nuxt @nuxtjs/tailwindcss @nuxt/image vee-validate yup

توضیحات هر وابستگی:

  • pinia: کتابخانه مدیریت وضعیت (State Management) برای Vue 3 است که جایگزین Vuex شده و به دلیل سبک بودن و پشتیبانی از TypeScript، بسیار محبوب است. در این پروژه، از Pinia برای مدیریت داده‌های کشتی‌ها و رزروها استفاده می‌کنیم.
  • @pinia/nuxt: ماژول Nuxt برای ادغام خودکار Pinia با Nuxt 3. این ماژول اطمینان می‌دهد که storeهای Pinia به‌درستی در اپلیکیشن Nuxt کار می‌کنند، چه در سمت کلاینت و چه در سمت سرور.
  • @nuxtjs/tailwindcss: ماژول Nuxt برای ادغام Tailwind CSS، یک فریم‌ورک CSS مبتنی بر Utility-First که امکان استایل‌دهی سریع و پاسخ‌گو را فراهم می‌کند. این ماژول Tailwind را به پروژه اضافه کرده و تنظیمات اولیه را خودکار می‌کند.
  • @nuxt/image: ماژول Nuxt برای بهینه‌سازی تصاویر. این ماژول تصاویر را فشرده‌سازی کرده، فرمت‌های مدرن مانند WebP را پشتیبانی می‌کند و امکان بارگذاری تنبل (Lazy Loading) را فراهم می‌آورد، که برای بهبود عملکرد اپلیکیشن حیاتی است.
  • vee-validate: کتابخانه‌ای برای اعتبارسنجی فرم‌ها در Vue. این کتابخانه به ما کمک می‌کند تا فرم رزرو کشتی‌ها را با قوانین اعتبارسنجی دقیق (مانند بررسی تاریخ‌های معتبر) پیاده‌سازی کنیم.
  • yup: یک کتابخانه تعریف اسکیما برای اعتبارسنجی داده‌ها که به‌خوبی با vee-validate کار می‌کند. با Yup می‌توانیم قوانین پیچیده‌ای برای فرم‌ها تعریف کنیم، مانند اطمینان از اینکه تاریخ پایان بعد از تاریخ شروع باشد.

نتیجه: این وابستگی‌ها ابزارهای لازم برای مدیریت وضعیت، استایل‌دهی، بهینه‌سازی تصاویر و اعتبارسنجی فرم‌ها را فراهم می‌کنند.

مرحله ۳: پیکربندی فایل nuxt.config.ts

فایل nuxt.config.ts قلب تنظیمات پروژه Nuxt است و امکان پیکربندی ماژول‌ها، CSS، سرور و سایر تنظیمات را فراهم می‌کند.

کد:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // فعال‌سازی Nuxt DevTools
  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss', '@nuxt/image'],
  css: ['~/assets/css/main.css'],
  image: {
    provider: 'static', // استفاده از تصاویر محلی یا CDN در حالت تولید
  },
  nitro: {
    preset: 'vercel', // بهینه‌سازی برای استقرار در Vercel
  },
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || '/api',
    },
  },
});

توضیحات تنظیمات:

  • devtools: { enabled: true }: این گزینه Nuxt DevTools را فعال می‌کند، ابزاری بصری که به توسعه‌دهندگان کمک می‌کند تا ساختار پروژه، عملکرد و خطاها را به‌صورت گرافیکی بررسی کنند. این ابزار برای دیباگ و بهینه‌سازی پروژه بسیار مفید است.
  • modules: ماژول‌های @pinia/nuxt، @nuxtjs/tailwindcss و @nuxt/image را به پروژه اضافه می‌کند تا قابلیت‌های مدیریت وضعیت، استایل‌دهی و بهینه‌سازی تصاویر در دسترس باشند.
  • css: ['~/assets/css/main.css']: فایل CSS اصلی پروژه (که برای Tailwind CSS استفاده می‌شود) را به Nuxt معرفی می‌کند. این فایل شامل تنظیمات Tailwind و کلاس‌های سفارشی است.
  • image: { provider: 'static' }: تنظیمات ماژول @nuxt/image. در اینجا، ارائه‌دهنده (Provider) روی static تنظیم شده است، به این معنا که تصاویر از پوشه public/ پروژه لود می‌شوند. در حالت تولید (Production)، می‌توانید ارائه‌دهنده را به CDN مانند Cloudinary تغییر دهید تا تصاویر از سرورهای خارجی بارگذاری شوند.
  • nitro: { preset: 'vercel' }: تنظیمات موتور سرور Nitro را برای استقرار بهینه در پلتفرم Vercel پیکربندی می‌کند. Nitro امکان اجرای سریع و مقیاس‌پذیر APIها و رندر سمت سرور را فراهم می‌کند. اگر قصد استفاده از پلتفرم دیگری مانند Netlify دارید، می‌توانید preset را تغییر دهید.
  • runtimeConfig: این بخش امکان تعریف متغیرهای پیکربندی در زمان اجرا را فراهم می‌کند.
  • public.apiBase: متغیری برای تعیین آدرس پایه APIها (مانند /api). این مقدار می‌تواند از متغیر محیطی API_BASE خوانده شود یا به‌صورت پیش‌فرض روی /api تنظیم شود. این قابلیت برای مدیریت URLهای API در محیط‌های مختلف (توسعه، تولید) مفید است.

نتیجه: این فایل تنظیمات، پایه‌ای برای ادغام ماژول‌ها، بهینه‌سازی تصاویر و استقرار پروژه فراهم می‌کند.

مرحله ۴: راه‌اندازی Tailwind CSS

برای استایل‌دهی اپلیکیشن، از Tailwind CSS استفاده می‌کنیم که امکان طراحی سریع و پاسخ‌گو را فراهم می‌کند.

ایجاد فایل assets/css/main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600;
}
.card {
  @apply bg-white shadow-lg rounded-lg overflow-hidden;
}

توضیحات:

  • @tailwind base: استایل‌های پایه Tailwind (مانند تنظیمات پیش‌فرض برای تگ‌های HTML) را وارد می‌کند.

  • @tailwind components: لایه‌ای برای تعریف کامپوننت‌های CSS سفارشی. در اینجا، دو کلاس سفارشی تعریف شده‌اند:

  • .btn: یک کلاس برای دکمه‌ها با رنگ پس‌زمینه آبی، متن سفید، پدینگ، گوشه‌های گرد و افکت هاور (تغییر رنگ هنگام حرکت ماوس).

  • .card: یک کلاس برای کارت‌ها (مانند کارت‌های نمایش کشتی‌ها) با پس‌زمینه سفید، سایه، گوشه‌های گرد و مدیریت سرریز محتوا.
  • @tailwind utilities: کلاس‌های Utility-First Tailwind را وارد می‌کند که امکان استایل‌دهی مستقیم در HTML یا Vue را فراهم می‌کنند (مانند flex، grid، p-4).

نتیجه: این فایل CSS تنظیمات Tailwind را به پروژه اضافه می‌کند و کلاس‌های سفارشی را برای استفاده در کامپوننت‌ها تعریف می‌کند.

مرحله ۵: اجرای سرور توسعه

برای مشاهده پروژه در حال اجرا، سرور توسعه Nuxt را راه‌اندازی می‌کنیم.

دستورات:

npm run dev

توضیحات:

  • دستور npm run dev: سرور توسعه Nuxt را راه‌اندازی می‌کند که به‌صورت پیش‌فرض روی پورت 3000 اجرا می‌شود. این سرور از Hot Module Replacement (HMR) پشتیبانی می‌کند، به این معنا که تغییرات در کد به‌صورت آنی در مرورگر منعکس می‌شوند.
  • آدرس: پس از اجرای دستور، می‌توانید با باز کردن مرورگر و رفتن به آدرس http://localhost:3000، صفحه پیش‌فرض Nuxt را مشاهده کنید.

نتیجه: با اجرای سرور توسعه، می‌توانید اپلیکیشن را به‌صورت محلی تست کرده و تغییرات را به‌سرعت مشاهده کنید.

جمع‌بندی فصل دوم

در این فصل، مراحل اولیه راه‌اندازی پروژه Nuxt 3 را برای اپلیکیشن مرکز اجاره کشتی‌های کروز طی کردیم. از ایجاد پروژه و نصب وابستگی‌ها گرفته تا پیکربندی تنظیمات اصلی و راه‌اندازی Tailwind CSS، اکنون یک پایه محکم برای ادامه توسعه داریم. در فصل‌های بعدی، به ساخت صفحات، مدیریت وضعیت با Pinia و ایجاد APIهای سرور خواهیم پرداخت.