كيفية هيكلة مشروع Vue.js

بنية المجلد Vue.js المثالية وهيكل المكونات مع المكونات الذكية والبكم

Vue.js هو أكثر من مجرد ضجيج ، إنه إطار أمامي رائع. من السهل جدًا البدء به وتصميم تطبيق ويب. غالبًا ما يتم وصف Vue.js كإطار عمل للتطبيقات الصغيرة وحتى في بعض الأحيان كبديل للم jQuery نظرًا لصغر حجمه! أنا شخصياً أعتقد أنه يمكن أن يصلح أيضًا للمشاريع الكبيرة وفي هذه الحالة ، من المهم أن يتم هيكلها جيدًا ، من حيث بنية المكون.

قبل البدء في مشروع Vue.js الأول الخاص بي ، قمت ببعض الأبحاث من أجل العثور على بنية المجلد المثالية وهندسة المكونات وتقليد التسمية. استعرضت وثائق Vue.js ، ومقالات قليلة والعديد من مشاريع GitHub مفتوحة المصدر.

كنت بحاجة للعثور على إجابات لأسئلة قليلة كانت لدي. هذا ما ستجده في هذا المنشور:

  • كيف يمكنك هيكلة الملفات والمجلدات داخل مشروع Vue.js؟
  • كيف تكتب المكونات الذكية والبكم وأين تضعها؟ إنه مفهوم قادم من React.
  • ما هي طريقة ترميز Vue.js وأفضل الممارسات؟

سأوثق أيضًا مع المصدر الذي ألهمتني والروابط الأخرى للحصول على فهم أفضل.

بنية المجلد Vue.js

هنا هو محتوى مجلد src. أنصحك ببدء المشروع مع Vue CLI. أنا شخصيا استخدمت قالب Webpack الافتراضي.

.
├── app.css
├── App.vue
├── الأصول
│ └── ...
├── المكونات
│ └── ...
├── main.js
├── الخلطات
│ └── ...
├── جهاز التوجيه
. └── index.js
├── المتجر
. ├── index.js
│ ├── الوحدات
│ │ └── ...
utation └── طفرة - types.js
├── ترجمات
. └── index.js
├── utils
│ └── ...
└── وجهات النظر
    └── ...

بعض التفاصيل حول كل من هذه المجلدات:

  • الأصول - حيث يمكنك وضع أي أصول يتم استيرادها إلى مكوناتك
  • مكونات - جميع مكونات المشاريع التي ليست وجهات النظر الرئيسية
  • mixins - mixins هي أجزاء من شفرة javascript التي يتم إعادة استخدامها في مكونات مختلفة. في mixin يمكنك وضع أساليب أي مكون من Vue.js وسيتم دمجها مع تلك التي يستخدمها المكون.
  • جهاز التوجيه - جميع طرق مشاريعك (في حالتي لديهم في index.js). أساسا في Vue.js كل شيء مكون. ولكن ليس كل شيء صفحة. تحتوي الصفحة على مسار مثل "/ dashboard" أو "/ settings" أو "/ search". إذا كان للمكون مسار ، فسيتم توجيهه.
  • store (اختياري) - ثوابت Vuex في mutation-type.js ، وحدات Vuex في الوحدات الفرعية للمجلد الفرعي (والتي يتم تحميلها بعد ذلك في index.js).
  • الترجمات (اختياري) - ملفات اللغات ، يمكنني استخدام Vue-i18n ، وهي تعمل بشكل جيد.
  • utils (اختياري) - الوظائف التي أستخدمها في بعض المكونات ، مثل اختبار قيمة regex أو الثوابت أو المرشحات.
  • طرق العرض — لجعل المشروع أسرع في القراءة أفصل المكونات التي تم توجيهها ووضعها في هذا المجلد. المكونات التي يتم توجيهها لي أكثر من مكون لأنها تمثل الصفحات ولديها طرق ، أضعها في "طرق عرض" ، ثم عندما تقوم بالتحقق من صفحة تذهب إلى هذا المجلد.

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

بعض الموارد التي استلهمتها

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

مكونات ذكية مقابل غبية مع Vue.js

المكونات الذكية والبكم هو مفهوم تعلمته من React. تسمى المكونات الذكية أيضًا حاويات ، فهم الذين يتعاملون مع تغييرات الحالة ، فهم مسؤولون عن كيفية عمل الأشياء. على العكس من ذلك ، فإن المكونات الغبية ، والتي تسمى أيضًا بالعرض ، لا تتعامل إلا مع الشكل والمظهر.

إذا كنت معتادًا على نمط MVC ، فيمكنك مقارنة مكونات التفريغ بمكونات العرض والمكونات الذكية بوحدة التحكم!

في React ، يتم وضع المكونات الذكية والبكم في مجلدات مختلفة بينما في Vue.js تضعها جميعًا في نفس المجلد: المكونات. للتمييز في Vue.js ، ستستخدم اصطلاح تسمية. دعنا نقول أن لديك مكون بطاقة غبية ، ثم يجب عليك استخدام أحد هذه الأسماء:

  • BaseCard
  • AppCard
  • بصيغة بطاقة

إذا كان لديك مكون ذكي يستخدم BaseCard ويضيف بعض الأساليب إليه ، فيمكنك على سبيل المثال تسميته ، حسب مشروعك:

  • ProfileCard
  • ItemCard
  • NewsCard

إذا كان المكون الذكي الخاص بك ليس فقط BaseCard "أكثر ذكاء" مع الأساليب ، فما عليك سوى استخدام أي اسم يناسب المكون الخاص بك ودون البدء بـ Base (أو التطبيق ، أو V) ، على سبيل المثال:

  • DashboardStatistics
  • نتائج البحث
  • ملف تعريفي للمستخدم

يأتي اصطلاح التسمية هذا من دليل أنماط Vue.js الرسمي الذي يحتوي أيضًا على اصطلاحات التسمية!

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

فيما يلي بعض الاتفاقيات الواردة من دليل التصميم الرسمي في Vue.js والتي تحتاج إلى هيكل مشروعك جيدًا:

  • يجب أن تكون أسماء المكونات متعددة الكلمات دائمًا ، باستثناء مكونات الجذر "التطبيق". استخدم "UserCard" أو "ProfileCard" بدلاً من "Card" على سبيل المثال.
  • يجب أن يكون كل مكون في ملفه الخاص.
  • يجب أن تكون أسماء ملفات المكونات الفردية إما دائمًا PascalCase أو كباب دائمًا. استخدم "UserCard.vue" أو "user-card.vue".
  • يجب أن تبدأ المكونات التي تُستخدم مرة واحدة فقط في كل صفحة بالبادئة "The" ، للإشارة إلى أنه يمكن أن يكون هناك واحد فقط. على سبيل المثال بالنسبة إلى شريط التنقل أو تذييل الصفحة ، يجب عليك استخدام "TheNavbar.vue" أو "TheFooter.vue".
  • يجب أن تتضمن المكونات الفرعية الاسم الأصلي كبادئة. على سبيل المثال ، إذا كنت ترغب في استخدام مكون "Photo" المستخدم في "UserCard" ، فسوف تسميته "UserCardPhoto". إنه سهل القراءة حيث أن الملفات الموجودة في مجلد عادة ما تكون مرتبة أبجديًا.
  • استخدم الاسم الكامل دائمًا بدلاً من الاختصار باسم مكوناتك. على سبيل المثال لا تستخدم "UDSettings" ، استخدم بدلاً من ذلك "UserDashboardSettings".

Vue.js دليل الأسلوب الرسمي

سواء كنت متقدمًا أو مبتدئًا في Vue.js ، يجب عليك قراءة دليل أنماط Vue.js هذا ، حيث يحتوي على الكثير من النصائح وكذلك اصطلاحات التسمية. أنه يحتوي على الكثير من الأمثلة على أشياء للقيام بها وليس للقيام بها.

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

تريد أن ترى المزيد من المقالات مثل هذا واحد؟ ادعموني على Patreon