Vue Academy · درس

تطوير الإضافات

أنشئ إضافات Vue قابلة للتثبيت.

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

ما هي الإضافة البرمجية؟

تغلّف الإضافة البرمجية وظائف على مستوى التطبيق يمكنك تثبيتها باستدعاء واحد، مثل المكوّنات العامة والتوجيهات والخصائص أو عمليات التكامل مع جهات خارجية. وتتيح الإضافات البرمجية لمكتبات مثل Vue Router وPinia الاندماج مع تطبيقك.

دالة install

الإضافة البرمجية هي كائن يحتوي على أسلوب install، أو دالة فحسب. يستدعيها Vue باستخدام نسخة التطبيق وأي خيارات تمرّرها.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

تثبيت إضافة برمجية

سجّل إضافة برمجية باستخدام app.use، مع إمكانية تمرير كائن خيارات. يشغّل Vue دالة التثبيت مرة واحدة.

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

تسجيل المكوّنات العامة

داخل install، سجّل المكوّنات بشكل عام لكي يتمكن كل جزء من التطبيق من استخدامها دون استيرادها.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

تسجيل التوجيهات العامة

يمكن للإضافة البرمجية أيضًا تسجيل التوجيهات بشكل عام، وتجميع سلوكيات DOM المرتبطة في حزمة واحدة قابلة للتثبيت.

export const focusPlugin = {
  install(app) {
    app.directive("focus", {
      mounted(el) { el.focus() }
    })
  }
}

توفير الخصائص العامة

استخدم app.config.globalProperties لإضافة خاصية متاحة في كل نسخة من نسخ المكوّنات، وهو أمر مفيد لأدوات مثل أداة تنسيق أو عميل HTTP.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

استخدام provide مع Composition API

لضمان التوافق مع Composition API، استخدم app.provide في الإضافة، حتى تتمكن المكوّنات من inject القيمة داخل setup.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

تمرير الخيارات

تتيح وسيطة options للمستخدمين ضبط إعدادات الإضافة. اقرأها داخل install لتخصيص السلوك.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

إضافة على هيئة دالة

يمكن أن تكون الإضافة دالة عادية بدلًا من كائن يحتوي على install؛ إذ تتعامل Vue مع الدالة نفسها بوصفها أداة التثبيت.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

مثال كامل على إضافة

غالبًا ما تجمع الإضافة الحقيقية عدة وظائف من هذه الوظائف، مثل تسجيل مكوّن وتوجيه وخاصية عامة ضمن دالة install واحدة.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

متى تنشئ إضافة

استخدم الإضافة عندما تكون الوظيفة على مستوى التطبيق بأكمله فعلًا، مثل حزمة واجهة المستخدم أو طبقة HTTP أو i18n أو التحليلات. أما المنطق المحلي بميزة معينة، فعادةً ما يكون composable خيارًا أفضل وأخف.

اختبار سريع

اختبر مدى معرفتك بالإضافة.

مراجعة

توفّر الإضافة دالة install(app, options)، ويتم تسجيلها باستخدام app.use. يمكنك داخل install تسجيل المكوّنات والتوجيهات العامة، وإضافة خصائص عامة عبر config.globalProperties، وprovide قيم لإتاحة حقنها. استخدم الإضافات للميزات على مستوى التطبيق بأكمله، واستخدم composables للمنطق المحلي. ستنظّم بعد ذلك مشروعًا قابلًا للتوسع.

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

هل درس «تطوير الإضافات» مجاني؟

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

ماذا ستتعلم في «تطوير الإضافات»؟

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

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

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

كم من الوقت يستغرق درس «تطوير الإضافات»؟

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

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

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

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

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