بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات
الاستيراد التلقائي لـ pages/ وlayouts/ وcomponents/، وتسمية الملفات للمسارات المتداخلة، ومسارات catch-all
بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ما هو Nuxt 3؟
إن Nuxt 3 إطار عمل شامل مبني على Vue 3. ويضيف العرض من جانب الخادم، والتوجيه المعتمد على الملفات، والاستيراد التلقائي، ومحرك خادم، بحيث يمكنكم بناء تطبيقات Vue متكاملة من الواجهة والخادم مع قدر ضئيل جدًا من الإعدادات.
مجلد pages
يتولّى مجلد pages/ قيادة التوجيه. يتحوّل كل ملف .vue تلقائيًا إلى مسار، من دون إعداد يدوي للموجّه. ويرتبط pages/about.vue بالمسار /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactتفعيل الموجّه
يُفعَّل الموجّه فور وجود مجلد pages/. أضيفوا <NuxtPage /> في app.vue لعرض الصفحة المطابقة.
<!-- app.vue -->
<template>
<NuxtPage />
</template>المسارات المتداخلة
تنشئ المجلدات مسارات متداخلة. يقدّم pages/blog/index.vue المسار /blog، بينما يقدّم pages/blog/archive.vue المسار /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveالمقاطع الديناميكية باستخدام [id]
أحاطوا اسم الملف بأقواس مربعة لإنشاء مقطع ديناميكي. يطابق pages/users/[id].vue المسار /users/42، ويكشف id كمعامل للمسار.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"المطابقة الشاملة باستخدام [...slug]
صيغة الانتشار [...slug].vue هي مطابقة شاملة. فهي تطابق أي عمق من المسار، وتناسب محتوى CMS أو معالجة أخطاء 404 المخصصة.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...مجلد layouts
يحتوي مجلد layouts/ على مكوّنات غلاف مشتركة بين الصفحات، مثل الرؤوس والأشرطة الجانبية والتذييلات. يغلّف layouts/default.vue كل صفحة ما لم يُستبدل بتخطيط آخر.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>اختيار التخطيط
تختار الصفحة تخطيطًا باستخدام definePageMeta. وتعرض الفتحة الموجودة في التخطيط محتوى الصفحة.
<script setup>
definePageMeta({ layout: 'admin' })
</script>المكوّنات المستوردة تلقائيًا
كل ما يوجد في components/ يُستورد تلقائيًا، ولا حاجة إلى عبارة import. وتضيف المجلدات المتداخلة بادئة إلى الاسم: يتحوّل components/base/Button.vue إلى <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />الوحدات القابلة لإعادة الاستخدام المستوردة تلقائيًا
يُستورد مجلد composables/ تلقائيًا أيضًا. ويمكن استخدام الدوال المصدّرة منه، إلى جانب الدوال المضمّنة في Nuxt مثل useFetch، في أي مكان من دون استيراد.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingمجلدات رئيسية أخرى
يعرّف Nuxt أيضًا plugins/ (يُشغَّل عند بدء التشغيل)، وmiddleware/ (حُرّاس المسارات)، وserver/ (منطق الخادم وواجهة API)، وpublic/ (الأصول الثابتة التي تُخدَّم كما هي).
اختبار سريع
اختبروا معرفتكم ببنية Nuxt والتوجيه.
مراجعة
لقد تعلّمتم بنية Nuxt:
- يوفّر pages/ توجيهًا معتمدًا على الملفات، وتُنشئ المجلدات مسارات متداخلة.
- يمثّل [id] مقطعًا ديناميكيًا، بينما تمثّل [...slug] مطابقة شاملة.
- يغلّف layouts/ الصفحات، ويُختار التخطيط باستخدام definePageMeta.
- يُستورَد components/ وcomposables/ تلقائيًا.
الأسئلة الشائعة
هل درس «بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات» مجاني؟
نعم — نص درس «بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات»؟
الاستيراد التلقائي لـ pages/ وlayouts/ وcomponents/، وتسمية الملفات للمسارات المتداخلة، ومسارات catch-all تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات
- جلب البيانات: useFetch وuseAsyncData
- مسارات خادم Nuxt ونقاط نهاية API
- أوضاع SSR وSSG وSPA