Vue Academy · درس

بنية الإضافات وapp.use()

كائن الإضافة ‎{ install(app, options) }‎، والوصول إلى app.component وapp.directive وapp.provide

الدرس 1 من 413 خطوة

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

ما هي إضافة Vue

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

تسجّلون الإضافة مرة واحدة باستخدام app.use(plugin).

عقد install

تكون الإضافة إما كائنًا يتضمن أسلوب install(app, options)، أو دالة تُستخدم مباشرةً بوصفها install. تستدعيها Vue مع نسخة التطبيق وأي خيارات تمرّرونها.

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

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

استخدموا داخل install الدالة app.component(name, definition) لتسجيل مكوّن متاح في كل قالب دون استيراده.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

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

استخدموا app.directive(name, definition) لتسجيل توجيه مخصّص على مستوى التطبيق، مثل v-focus أو v-tooltip.

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

// usage in any template: <input v-focus />

توفير الخدمات القابلة للحقن

تتيح app.provide(key, value) قيمةً يمكن لأي مكوّن تابع قراءتها باستخدام inject(key). وهذه هي الطريقة الحديثة لمشاركة الخدمات، مثل عميل API أو الإعدادات، من دون متغيرات عامة.

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

استهلاك الخدمة المتاحة

يستخدم أي مكوّن inject لقراءة ما وفرته الإضافة. يُفضَّل استخدام مفتاح حقن ذي نوع محدد، مثل Symbol، لمزيد من الأمان، لكن مفاتيح السلاسل النصية تعمل أيضًا.

<script setup>
import { inject } from 'vue'

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

تمرير الخيارات إلى الإضافة

تُمرَّر الوسيطة الثانية إلى app.use بوصفها الوسيط options في install. استخدموها لضبط السلوك وقت التسجيل.

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

تشغيل الإضافات قبل mount

تحدث جميع استدعاءات app.use قبل app.mount. وبحلول وقت mount، يكون كل مكوّن عام وتوجيه وقيمة متاحة قد سُجّل، ولذلك يستطيع العرض الأول الوصول إليها جميعًا.

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

التثبيت الآمن عند التكرار

تحمي Vue التطبيق من تثبيت الإضافة نفسها مرتين — إذ يُتجاهل استدعاء app.use الثاني للإضافة المطابقة. ومع ذلك، صمّموا install بحيث يكون آمنًا، وتجنّبوا الآثار الجانبية خارج نسخة التطبيق.

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

إضافة بسيطة ومتكاملة

عند جمع العناصر معًا، يمكن للإضافة تسجيل مكوّن وتوجيه وتوفير خدمة، وكل ذلك ضمن أسلوب install واحد.

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

الإضافة مقابل Composable

استخدموا الإضافة لإعداد على مستوى التطبيق يُشغَّل مرة واحدة، مثل المكوّنات العامة أو توفير خدمة وحيدة النسخة. واستخدموا Composable للمنطق ذي الحالة القابل لإعادة الاستخدام، والذي يستهلكه كل مكوّن. وغالبًا ما تُعدّ الإضافات ما تقرؤه composables لاحقًا عبر inject.

اختبار سريع

اختبروا فهمكم لبنية الإضافات.

أجب عليها في الدرس التفاعلي

مراجعة

تعلّمتم بنية الإضافات:

توفّر الإضافة install(app, options)، أو تكون دالة
تسجّل app.component وapp.directive العناصر العامة
تتيح app.provide خدمات قابلة للحقن تُقرأ عبر inject
يسجّلها app.use(plugin, options) قبل mount
التثبيت آمن عند التكرار — إذ يُتجاهل التثبيت الثاني

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «بنية الإضافات وapp.use()» مجاني؟

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

ماذا ستتعلم في «بنية الإضافات وapp.use()»؟

كائن الإضافة ‎{ install(app, options) }‎، والوصول إلى app.component وapp.directive وapp.provide تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «بنية الإضافات وapp.use()»؟

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

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

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

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

بنية الإضافات وapp.use()
الخصائص العامة وprovide/inject في الإضافات
مثال على إضافة الإشعارات وToast
نشر إضافات Vue وكتابة أنواعها

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