Vue JS هو إطار عمل JavaScript تقدمي يُستخدم لتطوير تطبيقات الصفحة الواحدة (SPA) وواجهات المستخدم. وهو أحد أطر الواجهة الأمامية الأكثر استخدامًا على نطاق واسع.
إحدى الميزات المثيرة للاهتمام في Vue هي قدرته على تقسيم صفحة الويب إلى مكونات مختلفة. وتصبح هذه العملية أكثر بساطة باستخدام مكتبات مكونات واجهة المستخدم.
هناك العديد من مكتبات مكونات واجهة المستخدم التي يمكنها مساعدتك في إنشاء المكونات بسهولة وسرعة. لذا، سنراجع في هذه المدونة أفضل 10 مكتبات لمكونات Vue UI لعام 2021.
1. برايم فيو
PrimeVue عبارة عن مكتبة مكونات Vue UI سهلة الاستخدام ومتعددة الاستخدامات وعالية الأداء تساعدك على إنشاء واجهات مستخدم رائعة.
يحتوي على أكثر من 80 مكونًا لواجهة المستخدم مع الدعم الكامل لإرشادات الوصول إلى محتوى الويب (WCAG) والتصميم سريع الاستجابة. وبفضل التحديث الأخير، تتمتع المكتبة الآن بدعم كامل لـ Vue 3. كما أنها حصلت على مجموعة أخرى من المكونات.
أحد أفضل الأشياء في Primevue هو مجموعتها الواسعة من المكونات. وهي تتراوح من الجداول وترقيم الصفحات إلى المخططات التنظيمية المبنية على الرسوم البيانية والتي يمكنك استخدامها لإنشاء تطبيقات Vue التفاعلية. إنه مفتوح المصدر ولديه أكثر من ألف نجمة على Github و1 تنزيلًا أسبوعيًا على NPM.
2. فيوتيفاي
Vuetify عبارة عن مكتبة Vue UI تحتوي على مكونات مصنوعة يدويًا بشكل جميل وتستخدم مواصفات تصميم المواد. وهذا يعني أنه تم تطويره تمامًا وفقًا لمواصفات تصميم المواد، حيث تم تصميم كل مكون بدقة ليكون معياريًا وسريع الاستجابة والأداء.
يتيح لك Vuetify تخصيص تطبيقاتك باستخدام تخطيطات فريدة وديناميكية وتحسين أنماط مكوناتك باستخدام متغيرات SASS.
كما أنه يدعم إرشادات إمكانية الوصول، وجميع المتصفحات الحديثة، ومتوافق مع Vue CLI-3. من السهل دمجها وتحتوي على الكثير من مكونات واجهة المستخدم القابلة لإعادة الاستخدام مثل الرف الدائري والملاحة والبطاقات. Vuetify هو برنامج مفتوح المصدر ولديه أكثر من 29 ألف نجمة على Github و319,170 تنزيلًا أسبوعيًا على NPM.
3. شقرا واجهة المستخدم فيو
Chakra UI عبارة عن مكتبة مكونات معيارية بسيطة ويمكن الوصول إليها، وتمنحك الأدوات اللازمة لإنشاء تطبيقات Vue بسرعة وسهولة.
يمكن الوصول إلى جميع المكونات (وهي تتبع معايير WAI-ARIA بشكل صارم)، وقابلة للتخصيص، وقابلة للتركيب. وهو يدعم الأنماط المستجيبة خارج الصندوق وهو متوافق مع الوضع المظلم.
تحتوي Chakra UI أيضًا على مجموعة من مكونات التخطيط مثل CBox وCStack التي تسهل تصميم مكوناتك عن طريق تمرير الدعائم. كما يسمح لك أيضًا باستيراد مكونات Chakra UI Vue تلقائيًا باستخدام حل مكون إضافي لحزمة الويب. إنه مفتوح المصدر ولديه أكثر من 900 نجمة على Github و331 تنزيلًا أسبوعيًا على NPM.
4. بوتستراب فيو
BootstrapVue، باستخدام BootstrapVue، يمكنك إنشاء مشاريع سريعة الاستجابة ومبنية على الأجهزة المحمولة أولاً ويمكن الوصول إليها بواسطة ARIA على الويب باستخدام Vue.js ومكتبة CSS الأمامية الشهيرة — Bootstrap. الوثائق سهلة الفهم كما أنها سهلة الإعداد. فهو يجعل تنفيذ الواجهة الأمامية يتم بشكل أسرع.
فهو يقدم أكثر من 85 مكونًا، وأكثر من 45 مكونًا إضافيًا متاحًا، والعديد من التوجيهات، وأكثر من 1000 رمز. كما يوفر أيضًا مكونات وظيفية مصممة خصيصًا للتخطيطات والتصميم سريع الاستجابة. يمكنك أيضًا دمج BootstrapVue بسهولة في مشاريع Nuxt.js الخاصة بك باستخدام وحدة Nuxt.js.
يتم استخدامه أيضًا بنفس الطريقة التي يتم بها استخدام إطار عمل bootstrap CSS. إنه مفتوح المصدر على Github بحوالي 12.9 ألف نجمة و1.7 ألف شوكة.
5. فيوساكس
Vuesax هو إطار عمل جديد لمكونات واجهة المستخدم تم إنشاؤه باستخدام Vuejs لإنشاء المشاريع بسهولة وبأسلوب فريد وممتع، تم إنشاء vuesax من الصفر ومصمم لجميع أنواع المطورين بدءًا من محبي الواجهة الأمامية وحتى الواجهة الخلفية الذين يريدون إنشاء نهجهم البصري بسهولة المستخدم النهائي. التصميمات فريدة لكل مكون ولا ترتكز على أي اتجاهات مرئية أو قواعد تصميم، مما يجعل المشاريع المبنية بها فريدة أيضًا.
فهو يقدم صفحات سريعة الاستجابة ومكونات واجهة مستخدم قابلة لإعادة الاستخدام وقابلة للتخصيص. من السهل أيضًا البدء باستخدام npm أو CDN. وهو لا يدعم حاليًا Vue CLI 3 في نسخته الأخيرة. إنه مفتوح المصدر على Github مع حوالي 4.9 ألف نجمة و6700 تنزيل أسبوعي في الدقيقة.
6. تصميم النمل
Ant Design vue استنادًا إلى مواصفات Ant Design، Ant design vue عبارة عن مكتبة vue UI تحتوي على مجموعة من المكونات والعروض التوضيحية عالية الجودة لبناء واجهات مستخدم غنية وتفاعلية.
يوفر Ant-design-vue الكثير من مكونات واجهة المستخدم لإثراء تطبيقات الويب الخاصة بك مثل الهيكل العظمي والدرج والإحصائيات وغير ذلك الكثير.
مع الإصدار الأخير من ant design vue الإصدار 2، تم تحديثه ليكون أسرع وأسهل في التكامل، وحجم حزمة أصغر، ويدعم أيضًا Vue 3، مستند New Composition API. كما أنه يدعم متصفحات الويب الحديثة، والعرض من جانب الخادم، والإلكترون. لديها أكثر من 13 ألف نجمة على Github وعلى 39,693 تنزيلًا أسبوعيًا NPM.
7. الكوازار
يعد Quasar أحد أفضل أطر عمل Vue UI التي تسمح للمطورين باستخدام قاعدة كود مصدر واحدة لجميع الأنظمة الأساسية من خلال Quasar CLI مع أفضل الممارسات المبتكرة. فهو يتيح للمطورين التركيز على محتوى تطبيقاتهم بدلاً من جميع عناصر الطلاء الأخرى (نظام البناء والتخطيط) المحيطة به. إنه يركز على اتباع إرشادات المادة 2.0 ولديه أيضًا مجتمع داعم للغاية.
أحد الأشياء المميزة في Quasar هو القدرة على كتابة التعليمات البرمجية مرة واحدة ونشرها في نفس الوقت كموقع ويب، أو تطبيق جوال باستخدام قاعدة تعليمات برمجية واحدة فقط. يوجد أيضًا إصدار جديد حاليًا في مرحلة تجريبية والذي سيدعم ميزات vue 3. لديها حوالي 17.8 ألف نجم على جيثب.
8. بيوفي
Buefy هي مكتبة مكونات واجهة مستخدم خفيفة الوزن لـ Vue JS تعتمد على Bulma (إطار عمل CSS). يجمع Buefy بين Bulma وVue، مما يساعدك على إنشاء تطبيقات جيدة المظهر باستخدام الحد الأدنى من التعليمات البرمجية. إنها طبقة جافا سكريبت لواجهة بولما الخاصة بك.
يمكن استيراده بالكامل أو استيراد مكونات فردية على صفحة ويب عادية. يعد دمجها في مشروعك أمرًا سهلاً للغاية، ويمكن القيام بذلك باستخدام npm أو CDN.
يوفر Buefy مكونات واجهة المستخدم الجاهزة والتخطيط والأيقونات. يمكن للمكونات استخدام SASS لموضوعك. كما أنه يدعم المتصفحات الحديثة.
9. مادة الرؤية
Vue Material هو إطار عمل خفيف الوزن يستخدم على نطاق واسع وينفذ مواصفات التصميم متعدد الأبعاد. إنه أحد أفضل التكامل بين مواصفات Vue.js وتصميم المواد! يمكنك تهيئته بسهولة ليناسب جميع احتياجاتك من خلال واجهة برمجة التطبيقات (API) السهلة.
إنه متوافق مع التصميم سريع الاستجابة والدعم لجميع متصفحات الويب الحديثة. تنقسم المكتبة إلى السمات والمكونات وعناصر واجهة المستخدم. توفر السمات دليلاً نهائيًا حول كيفية تصميم تطبيقك (أو كتابة السمات الخاصة بك) وتتكون المكونات وعناصر واجهة المستخدم من التخطيطات والتنقل والطباعة والأيقونات و30 مكونًا إضافيًا. يحتوي على حوالي 9.2 ألف نجمة و1.1 ألف شوكة على Github و21 ألف + تنزيل أسبوعي NPM.
10. كينوي
KeenUI هي مكتبة واجهة مستخدم vue.js خفيفة الوزن مع واجهة برمجة تطبيقات بسيطة، مستوحاة من تصميم المواد من Google. Keen UI ليس إطار عمل CSS. ولذلك، فهو لا يتضمن أنماطًا لنظام الشبكة، والطباعة، وما إلى ذلك. وبدلاً من ذلك، ينصب التركيز على المكونات التفاعلية التي تتطلب Javascript.
لديها حوالي 30 مكونًا قابلاً لإعادة الاستخدام. المكونات قابلة للتخصيص عن طريق تجاوز الأنماط باستخدام متغيرات SASS. يمكنك دمجه في مشروعك إما باستخدام CDN أو npm. إنه مفتوح المصدر ويحتوي على حوالي 4 آلاف نجمة على Github.
وفي الختام
من المؤكد أن مكتبات مكونات واجهة المستخدم تجعل إنشاء المشروع أسهل بكثير. يعتمد اختيار الخيار المناسب على ميزات المشروع الذي تريد العمل عليه. قبل الغوص في مشروع جديد، يُنصح بمراجعة مكتبة مكونات واجهة المستخدم الأكثر ملاءمة لهذا الغرض.