طرق استخدام Vue
نعتقد أنه لا توجد قصة "مقاس واحد يناسب الجميع" للويب. هذا هو السبب في تصميم Vue ليكون مرنًا وقابلًا للتدريج. وبحسب حالة استخدامك ، يمكن استخدام Vue بطرق مختلفة للوصول إلى التوازن الأمثل بين تعقيد العمود الفقري وتجربة المطور وأداء النهاية.
شيفرة مستقلة
يمكن استخدام Vue كملف نصي مستقل - لا يتطلب خطوة بناء! إذا كان لديك إطار عمل خلفي يقوم بتصيير معظم HTML بالفعل ، أو أن منطق الواجهة الأمامية الخاص بك ليس معقدًا بما يكفي حتى يحتاج برنامج بناء ، فهذه هي الطريقة الأسهل لدمج Vue في مجموع أدواتك. يمكنك التفكير في Vue كبديل أكثر تصريحا لـ jQuery في هذه الحالات.
توفر Vue أيضًا توزيع بديل يسمى petite-vue والذي يحسن خصيصًا لتعزيز الوظائف الحالية لـ HTML تدريجيا. لديه مجموعة ميزات أصغر، ولكنه خفيف جدًا ويستخدم تنفيذًا أكثر كفاءة في حالات لا تتطلب خطوة بناء.
مكونات الويب المضمنة
يمكنك استخدام Vue لبناء مكونات ويب قياسية يمكن تضمينها في أي صفحة HTML ، بغض النظر عن كيفية تصييرها. يتيح لك هذا الخيار استخدام Vue بطريقة تامة ومستقلة عن المستهلك: يمكن تضمين مكونات الويب الناتجة في التطبيقات القديمة ، والـ HTML الثابت ، أو حتى التطبيقات المبنية باستخدام إطارات عمل أخرى.
التطبيقات أحادية الصفحة (SPA)
تتطلب بعض التطبيقات تفاعلًا غنيًا ، عمقًا طويلًا للجلسة ، و شيفرة ذات حالة غير بديهية على الواجهة الأمامية. أفضل طريقة لبناء هذه التطبيقات هي استخدام معمارية حيث يتحكم Vue ليس فقط بالصفحة بأكملها ، ولكن يتولى تحديث البيانات والتنقل دون الحاجة إلى إعادة تحميل الصفحة. عادةً يُسمى هذا النوع من التطبيقات بتطبيقات أحادية الصفحة (SPA).
توفر Vue مكتبات أساسية ودعم أدوات شامل مع تجربة مطور رائعة لبناء تطبيقات أحادية الصفحة حديثة ، بما في ذلك:
- موجه جهة المستخدم
- سلسلة أدوات بناء سريعة
- دعم المحررات
- أدوات تطوير المتصفح
- دمج الـ TypeScript
- أدوات اختبار
تتطلب التطبيقات الأحادية الصفحة عادةً أن يعرض الخلفية نقاط نهاية API - لكن يمكنك أيضًا تزويد Vue بحلول مثل Inertia.js للحصول على مزايا SPA بينما تحافظ على نموذج تطوير مركزي على الخادم.
التطبيقات المتكاملة/ و التصيير من جانب الخادوم
تكون التطبيقات أحادية الصفحة الخالصة مشكلة عندما يكون التطبيق حساسًا لـتحسين تهيئته لمحركات البحث وزمن الوصول إلى المحتوى. وذلك لأن المتصفح سيتلقى صفحة HTML فارغة بشكل كبير ، ويجب أن ينتظر حتى تُحمل JavaScript قبل تصيير أي شيء.
توفر Vue واجهات برمجية بدرجة أولى لتصيير تطبيق Vue إلى سلاسل نصية HTML على الخادوم. وهذا يسمح للخادم بإرسال الـHTML المعالج بالفعل مسبقًا ، مما يسمح للمستخدمين النهائيين برؤية المحتوى على الفور بينما تنزل JavaScript. سيقوم Vue بتصيير التطبيق من جانب المستخدم لجعله تفاعليًا. ويسمى هذا تصيير من جانب الخادوم (SSR) ويحسن بشكل كبير مقاييس الويب الحيوية مثل أكبر تصيير للمحتوى (LCP).
هناك أطر عالية المستوى مبنية على Vue تعتمد على هذا النموذج ، مثل Nuxt ، والتي تتيح لك تطوير تطبيق كامل باستخدام Vue و JavaScript.
JAMStack / توليد المواقع الساكنة SSG
يمكن تنفيذ التصيير من جانب الخادوم مسبقًا إذا كان البيانات المطلوبة ثابتة. وهذا يعني أننا يمكننا تصيير تطبيق كامل إلى HTML وخدمتها كملفات ثابتة. وهذا يحسن أداء الموقع ويجعل التوزيع أكثر بساطة لأننا لم نعد بحاجة إلى تصيير الصفحات بشكل ديناميكي في كل طلب. ولا يزال بإمكان Vue إنعاش هذه التطبيقات لتوفير تفاعل غني من جانب المستخدم. وتعرف هذا التقنية عادةً باسم توليد المواقع الساكنة (SSG) ، والتي تعرف أيضًا باسم JAMStack.
يوجد اثنين من أنواع توليد المواقع الساكنة: واحدة للصفحة الواحدة وأخرى للصفحات المتعددة. كلا النواحي تصير مسبقا الموقع إلى HTML ساكن، والفرق هو أن:
بعد التحميل الأولي للصفحة ، توليد المواقع الساكنة بصفحة واحدة "ينعش" الصفحة إلى تطبيق أحادي الصفحة SPA. وهذا يتطلب مزيدًا من JS المسبق وتكلفة انعاش ، ولكن ستكون التنقلات المتعاقبة أسرع ، لأنه يحتاج فقط إلى تحديث جزئي لمحتوى الصفحة بدلاً من إعادة تحميل الصفحة بأكملها.
توليد المواقع الساكنة بالصفحات المتعددة يحمل الصفحة في كل انتقال. والميزة الرئيسية هي أنه يمكنه شحن JS أقل - أو لا يوجد JS على الإطلاق إذا لم تتطلب الصفحة أي تفاعل! بعض أطر توليد المواقع الساكنة للصفحات المتعددة مثل Astro تدعم أيضًا "انعاش جزئي" - والتي تتيح لك استخدام مكونات Vue لإنشاء "جزر" تفاعلية داخل HTML ساكن.
توليد المواقع الساكنة بصفحة واحدة ملائم بشكل أفضل إذا كنت تتوقع تفاعل غير بسيط أو مدة طويلة للجلسة أو عناصر / حالة محفوظة عبر التنقلات. وإلا ، فسيكون توليد المواقع الساكنة بالصفحات المتعددة أفضل خيارًا.
يقوم فريق Vue أيضًا بالعمل على تطوير مولد مواقع ساكنة يسمى VitePress ، والذي يدعم هذا الموقع الذي تقرأه حاليًا! يدعم VitePress كلا نوعي توليد المواقع الساكنة. Nuxt يدعم أيضًا SSG. يمكنك حتى دمج SSR وSSG لمسارات مختلفة في نفس تطبيق Nuxt.
ما وراء الويب
على الرغم من أن Vue مصممة أساسا لبناء تطبيقات الويب ، إلا أنها ليست محدودة بالمعنى الواضح في المتصفح فقط. يمكنك: