خب در توضیحات دسته بندی با Nuxt به صورت کلی آشنا شدید و فهمیدید که در ناکست جی اس از چه تکنولوژی‌هایی استفاده شده است. در این مقاله میخوایم که به روش‌های نصب Nuxt بر روی پروژه خودمون بپردازیم و ببینیم با چه روش‌هایی می‌شود Nuxt را نصب کنیم و از آن استفاده کنیم.
شما به طور کلی به دو صورت می‌توانید Nuxt را در پروژه خود نصب کنید، یا از طریق استارترهای آنلاین ما از Nuxt استفاده کنید و کار با آن را سریع شروع کنید و یا به صورت محلی از طریق ترمینال ویرایشگر خود و یا Command Line اقدام به نصب کنید.
کد زدن آنلاین ناکست
شما می‌توانید با وبسایت‌های کد آنلاین مانند StackBlitz و CodeSandBox به سرعت کد زدن با Nuxt را شروع کنید.
پیش نیازها
برای نصب Nuxt یک سری پیش نیازها وجود دارد که حتما باید آن‌ها را در سیستم خودتان تنظیم و نصب کرده باشید، پس مطمئن شوید که پیش نیازها در سیستم شما به درستی تنظیم و نصب شده باشند.
Node JS : مطمئن شوید که آخرین نسخه LTS آن را نصب کرده باشید.
Visual Studio Code : این ویرایشگر به خوبی از Nuxt پشتیبانی می‌کند، پس از نصب آن حتما مطمئن شوید.
اکستنشن Volar : این یک اکستنشن برای ویژوال استادیو کد است که باعث می‌شود که از قابلیت‌های Nuxt هوشمند شود. به طور مثال از قابلیت Auto Complate می‌توانید استفاده کنید.
- یا حالت take over mode رو فعال کنید (توصیه شده)
- یا اکستنشن TypeScript Vue Plugin (Volar) را نصب کنید
اگر قبلا Node js را نصب کرده اید با دستور node --version مطمئن شوید که نسخه 16.11 را نصب کرده باشید.
نکته : اگر حالت take over mode را فعال کرده اید یا اکستنشن TypeScript Vue Plugin (Volar) را نصب کرده‌اید، می‌توانید تولد شیم (shim) را برای فایل‌های *.vue را در فایل nuxt.config غیرفعال کنید.
export default defineNuxtConfig({ typescript: { shim: false }})
ایجاد پروژه جدید با ناکست
برای ایجاد یک پروژه Nuxt باید از یک سری دستورات استفاده کنید که در ادامه آن‌ها را برای شما آورده‌ایم. اگر از ویرایشگر ویژوال استادیو کد استفاده می‌کنید یک ترمینال جدید باز کنید و از دستورات زیر برای ایجاد یک پروژه Nuxt استفاده کنید.
اگر از npx استفاده می‌کنید، دستور زیر را وارد کنید:
<npx nuxi init <project-name
و اگر از pnpm استفاده می‌کنید دستور زیر را وارد کنید و اینتر بزنید:
<pnpm dlx nuxi init <project-name
<project name> نام پروژه دلخواه شما است.
حال با دستور زیر پوشه پروژه خود را در ویژوال استادیو کد باز کنید :
<code <project-name
حال با یکی از روش‌های زیر dependencies (وابستگی‌ها) را نصب کنید.
نصب وابستگی‌ها از طریق yarn :
yarn install
نصب وابستگی‌ها از طریق npm :
npm install
نصب وابستگی‌ها از طریق pnpm :
pnpm install
نکته: قبل از اجرای دستور نصب وابستگی‌ها از طریق pnpm، مطمئن شوید که `shamefully-hoist = true` را در `.npmrc` وجود دارد.
Development Server برای ناکست جی اس
بعد از مراحل بالا می‌توانید برنامه Nuxt در حال توسعه خود را با یکی از روش‌های زیر اجرا کنید :
اجرای از طریق yarn :
yarn dev -o
اجرای از طریق npm :
npm run dev -- -o
اجرای از طریق pnpm :
pnpm dev -o
خب تبریک میگم، الان باید به طور خودکار برنامه شما در مرورگر پیش فرضتان باز شده باشد.
حالا که پروژه خودتون رو ایجاد کردید آماده ساخت برنامه Nuxt خود هستید. در مقاله بعدی یک سری تنظیمات وجود دارد که با هم آن‌ها را انجام می‌دهیم.
