Vue Academy · درس

هيكل مجلدات قابل للتوسع

نظّم مشاريع Vue الكبيرة لتسهيل صيانتها.

هيكل مجلدات قابل للتوسع درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

البنية مهمة

عندما يتجاوز تطبيق Vue بضعة ملفات، تحدد طريقة تنظيمه مدى سهولة تصفحه وصيانته وتهيئة المطورين الجدد للعمل عليه. فالبنية الجيدة تتوسع، بينما تؤدي البنية الفوضوية إلى إبطاء الجميع.

التنظيم حسب النوع

يجمع النهج المعتمد على النوع الملفات بحسب طبيعتها: جميع المكوّنات معًا، وجميع الواجهات معًا، وجميع مخازن الحالة معًا. وهو نهج بسيط ويناسب التطبيقات الصغيرة والمتوسطة جيدًا.

src/
  components/
  views/
  stores/
  composables/
  router/

التنظيم حسب الميزة

يجمع النهج المعتمد على الميزة الملفات بحسب الميزة التي تنتمي إليها. يوجد كل ما يخص ميزة المصادقة في مجلد واحد، مما يجعل فهم التطبيقات الكبيرة أسهل.

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

اختيار النهج

يُعد التنظيم حسب النوع مناسبًا جدًا للتطبيقات الأصغر. ومع نمو التطبيق وتزايد الميزات، يحافظ التنظيم حسب الميزة على تجميع الشيفرة ذات الصلة ويقلل التنقل بين المجلدات. تبدأ فرق كثيرة بالتنظيم حسب النوع ثم تنتقل إلى التنظيم حسب الميزة مع توسع التطبيق.

الفصل بين الواجهات والمكوّنات

ميّز بين الواجهات (المكوّنات المرتبطة بالصفحات والموجّهة) والمكوّنات (اللبنات القابلة لإعادة الاستخدام). يوضح هذا الفصل أي الأجزاء يمكن الوصول إليها عبر الموجّه وأيها مشتركة.

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

تنظيم Composables

احتفظ بمنطق Composition API القابل لإعادة الاستخدام في مجلد composables. وتشير تسميتها ببادئة use إلى الغرض منها بمجرد النظر إليها.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

تنظيم مخازن الحالة

ضع مخازن الحالة العامة في مجلد stores، مع تخصيص ملف واحد لكل نطاق. يحافظ ذلك على سهولة اكتشاف إدارة الحالة وعلى نمطيتها.

stores/
  user.js
  cart.js
  settings.js

اصطلاحات التسمية

يقلل الاتساق الاحتكاك. استخدم PascalCase لملفات المكوّنات، وأضف البادئة Base إلى أسماء المكوّنات الأساسية، واستخدم أسماء متعددة الكلمات لتجنب تعارضها مع عناصر HTML.

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

تصديرات barrel

إن barrel هو ملف index.js يعيد تصدير محتويات مجلد، بحيث يستورد المستخدمون من مسار واحد بدلًا من عدة مسارات.

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

الاستيراد من barrel

باستخدام barrel، تندمج عمليات الاستيراد المتعددة في سطر واحد ومرتب، مما يحسّن سهولة القراءة.

import { useAuth, useFetch } from "@/composables"

الحفاظ على الاتساق

أيًا كانت البنية التي تختارها، طبّقها باستمرار ووثّقها في README الخاص بالمشروع. فأفضل بنية هي التي يفهمها الفريق بأكمله ويتبعها. أعد تنظيم المشروع باتجاه الميزات مع نمو التطبيق.

اختبار سريع

اختبر مدى معرفتك ببنية المجلدات.

مراجعة

نظّم التطبيقات الأصغر حسب النوع، وانتقل إلى التنظيم حسب الميزة مع توسع التطبيق. افصل الواجهات المرتبطة بالموجّه عن المكوّنات القابلة لإعادة الاستخدام، واحتفظ بـ composables وstores في مجلداتهما الخاصة، واتبع أسلوب تسمية متسقًا، واستخدم تصديرات barrel لاستيرادات مرتبة. إن الاتساق، مع توثيقه للفريق، هو ما يجعل البنية قابلة للتوسع فعلًا.

الأسئلة الشائعة

هل درس «هيكل مجلدات قابل للتوسع» مجاني؟

نعم — نص درس «هيكل مجلدات قابل للتوسع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «هيكل مجلدات قابل للتوسع»؟

نظّم مشاريع Vue الكبيرة لتسهيل صيانتها. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «هيكل مجلدات قابل للتوسع»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy