نصب nuxt-js

نصب nuxt-js

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

زمان مطالعه: 3 دقیقه
بازدید: 868
پرسش و پاسخ: 0

خب در مقاله قبلی با Nuxt به صورت کلی آشنا شدید و فهمیدید که در Nuxt از چه تکنولوژی‌هایی استفاده شده است. در این مقاله میخوایم که به روش‌های نصب Nuxt بر روی پروژه خودمون بپردازیم و ببینیم با چه روش‌هایی می‌شود Nuxt را نصب کنیم و از آن استفاده کنیم.

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

کد زدن آنلاین Nuxt

شما می‌توانید با وبسایت‌های کد آنلاین مانند 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 غیرفعال کنید.

بیشتر بدانیم : سایت مپ یا نقشه سایت (sitemap) چیست؟

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

بعد از مراحل بالا می‌توانید برنامه Nuxt در حال توسعه خود را با یکی از روش‌های زیر اجرا کنید :

اجرای از طریق yarn :

yarn dev -o

اجرای از طریق npm :

npm run dev -- -o

اجرای از طریق pnpm :

pnpm dev -o

خب تبریک میگم، الان باید به طور خودکار برنامه شما در مرورگر پیش فرضتان باز شده باشد.

مبحث بعدی : ویوها در ناکست

بهزاد میرزازاده
مسیر درست با پرسش های درست ساخته می شود

مشاهده تمام مطالب نویسنده