ما هو Vue.js؟
Vue.js (يُلفظ مثل الكلمة الإنجليزية «view») إطار JavaScript مفتوح المصدر لبناء واجهات المستخدم. أنشأه Evan You وصدر أول مرة عام 2014، ويطوّره اليوم هو وفريق أساسي بدعم من الرعاة. ويصف Vue نفسه بأنه «الإطار التدريجي»: يمكنه أن يحسّن جزءًا واحدًا من صفحة قائمة دون خطوة بناء، أو أن يشغّل تطبيقًا كاملًا.
تتكوّن الواجهات من مكوّنات. وفي «المكوّن أحادي الملف» (Single-File Component) يجتمع قالب HTML ومنطق JavaScript وتنسيقات CSS لجزء واحد في ملف واحد، فتسهل متابعة الشيفرة. ويحدّث نظام التفاعلية في Vue الشاشة تلقائيًا عندما تتغير البيانات. ويمكن كتابة المكوّنات بأسلوبين، Options API وComposition API، وتضيف مكتبات رسمية التنقل بين الصفحات (Vue Router) والحالة المشتركة (Pinia).
Vue مجاني ومفتوح المصدر بموجب ترخيص MIT. والإصدار Vue 3، الصادر عام 2020، هو الإصدار الرئيسي الحالي، أما Vue 2 فقد بلغ نهاية عمره في 31 ديسمبر 2023 ولم يعد يتلقى أي تحديثات، بما فيها الإصلاحات الأمنية. وعادةً ما تُنشأ المشاريع الجديدة بأداة البناء Vite التي أطلقها Evan You أيضًا.
أين نستخدم Vue.js
نستخدم Vue حيث تحتاج الصفحة إلى التفاعل مع الزائر، وبالقدر الذي يتطلبه المشروع. وهذه أكثر المهام التي نلجأ فيها إليه:
أقسام تفاعلية
يمكن إضافة عوامل التصفية والتبويبات والمعارض وجداول المقارنة إلى موقع قائم خطوة بخطوة دون إعادة بنائه، فيحصل الزائر على استجابة فورية ويبقى باقي الصفحة كما كان.
حاسبات ونماذج متعددة الخطوات
تتحقق حاسبات عروض الأسعار وخطوات الحجز ونماذج التقديم من البيانات أثناء كتابة الزائر، وتعرض النتيجة فورًا، فيعرف الزائر دائمًا ما الذي ما زال ناقصًا.
لوحات الإدارة والتقارير
نبني اللوحات التي يدير منها فريقك المحتوى أو الطلبات أو المواعيد كواجهات Vue تتواصل مع خلفية مبنية بـ Laravel أو Node.js، والشاشات الواضحة تسهّل المهام اليومية.
جزر تفاعلية في مواقع Astro
في مواقع المحتوى المبنية بـ Astro تكون الصفحات HTML ثابتًا، ولا تكون مكوّنات Vue إلا الأجزاء التفاعلية، مثل حاسبة أو مرشّح خريطة، فتُحمَّل عند الحاجة فقط.
لماذا Vue.js؟
ينمو مع المشروع
يمكننا أن نبدأ بقسم تفاعلي واحد ثم نحوّله لاحقًا إلى تطبيق كامل بالمعرفة والأدوات نفسها، فلا يضيع العمل الأول أبدًا.
سهل التسليم
يحفظ المكوّن أحادي الملف بنية كل جزء ومنطقه وتنسيقه معًا، فيجد المطوّر الذي ينضم لاحقًا، من فريقنا أو فريقك، طريقه بسرعة.
أدوات رسمية متناسقة
يأتي التوجيه وإدارة الحالة من مكتبات رسمية تُطوَّر إلى جانب Vue، وتعمل معه مباشرة أداة Vite التي أطلقها مبتكره. وقلة الأجزاء الخارجية تعني مفاجآت أقل عند التحديث.
كيف نعمل على مشروعك
نحدد أولًا حجم التفاعل الذي يحتاجه المشروع: بضعة أقسام في موقع قائم أم تطبيق كامل؟ ثم تتحول الشاشات المصممة في Figma إلى مكوّنات Vue، تُكتب غالبًا بلغة TypeScript، ونربطها ببياناتك عبر واجهة برمجية (API).
قبل التسليم نختبر كل مسار بلوحة المفاتيح وبقارئات الشاشة، ونراجع الواجهة العربية من اليمين إلى اليسار، ونقيس التحميل عبر Lighthouse. ثم نسلّمك الشيفرة مع سجلها الكامل، ونشرح لفريقك كيف نُظّم المشروع.
