ویوها در ناکست

پیاده سازی کامپوننت‌ها بسیار مهم و اساسی است و با استفاده از آن‌ها کد نویسی ما، هم خوانایی خوبی پیدا می‌کند و هم از تکرار کدها جلوگیری می‌کند. طراحی رابط کاربری کامپوننت‌ها بر عهده Viewها است که هر کامپوننت ویو متفاوتی برای خود دارد. همچنین طراحی رابط کاربری صفحات مختلف هم بر عهده ویوها است و در nuxt نیازی به import کردن آن‌ها نداریم، یکی از ویژگی‌های اصلی nuxt همین داستان routing است که آن را متفاوت و منحصر به فرد کرده است.

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

299

پرسش و پاسخ

0
ویوها در ناکست

فهرست مطالب برای مطالعه

Nuxt از چندین لایه Component برای پیاده سازی رابط کاربری شما استفاده می‌کند.

App.vue

به طور پیش فرض Nuxt این فایل را به عنوان نقطه ورودی در نظر می‌گیرد و محتوای آن را برای مسیر اصلی برنامه در نظر می‌گیرد.

<template>
  <div>
   <h1>Welcome to the homepage</h1>
  </div>
</template>

محتوای فایل app.vue

نکته: اگر قبلا با Vue کار کرده باشید، شاید در نگاه اول تعجب کنید که فایل main.js(فایلی که هنگام ایجاد یک اپلیکیشن Vue ساخته می‌شود) کجاست؟ Nuxt ساختن این فایل را در Background برنامه انجام می‌دهد.

Component ها

اکثر Component ها اجزای قابل استفاده مجدد مانند دکمه‌ها و منوها هستند در Nuxt شما برای ایجاد Component ها باید آن‌ها را در دایرکتوری /components/ قرار دهید و بدون نیاز به import کردن در تمام برنامه به صورت global به آن‌ها دسترسی خواهید داشت.

در مثال زیر این داستان را به شما به شکل عملی نشان داده‌ایم.

فایل App.vue :

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

محتوای فایل app.vue

فایل AppAlert.vue در پوشه components :

<template>
  <span>
    <slot />
  </span>
</template>

محتوای فایل AppAlert.vue در پوشه components

Page ها

صفحات نمایانگر نمایی هستند که برای یک Route(مسیر) خاصی استفاده می‌شوند. هر فایل در دایرکتوری pages/ مسیر متفاوتی را نشان می‌دهد که نمایی متفاوت دارد.

برای استفاده از صفحات فایل index.vue را در دایرکتوری pages بسازید و مولفه <NuxtPage /> را به vue.app اضافه کنید و یا فایل app.vue را برای مولفه پیش فرض حذف کنید. حال می‌توانید صفحات بیشتری با مسیرهای مربوط به آن‌ها را در دایرکتوری pages/ ایجاد کنید.

به مثال زیر دقت کنید:

فایل index.vue در مسیر دایرکتوری pages :

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

محتوای فایل index.vue در پوشه pages

فایل about.vue در مسیر دایرکتوری pages :

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

فایل about.vue در مسیر دایرکتوری pages

در مورد مسیردهی(Routing) در مقالات بعدی بیشتر با شما حرف خواهیم زد.

یکی از آموزش های ورود به بازار کار و موفقیت در برنامه نویسی آموزش لاراول است

Layout ها

Layout ها کامپوننت‌هایی هستند که در بسیاری از صفحات مشترک هستند و محتوای آن‌ها تغییر نمی‌کند، مانند هدر و فوتر. Layout ها فایل‌های vue هستند که از <slot /> برای نمایش محتوای صفحه استفاده می‌کنند. به طور پیش فرض از فایل default.vue در مسیر دایرکتوری layouts استفاده می‌شود. Layout های سفارشی را میتوان با metadata برای صفحه مورد نظر تعیین کرد.

نکته: اگر اپلیکیشن شما فقط یک layout دارد توصیه می‌کنیم که به جای آن از app.vue با مولفه <NuxtPage /> استفاده کنید.

به مثال زیر دقت نمایید :

فایل default.vue در دایرکتوری layouts :

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

فایل default.vue در دایرکتوری layouts

فایل index.vue در دایرکتوری pages :

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

فایل index.vue در دایرکتوری pages

فایل about.vue در دایرکتوری pages :

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

فایل about.vue در دایرکتوری pages

در مقالات بعدی در رابطه با layout بندی مطالب بیشتری را برای شما منتشر خواهیم کرد.