Vue Academy · Ders

Eklenti Mimarisi ve app.use()

Eklenti nesnesi { install(app, options) }, app.component, app.directive ve app.provide'e erişim.

Eklenti Mimarisi ve app.use(), CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Vue Eklentisi Nedir

Vue eklentisi, uygulama düzeyinde işlevsellik ekleyen yeniden kullanılabilir koddur: global bileşenler, yönergeler, enjekte edilen hizmetler veya yapılandırma. Örnekler: Vue Router, Pinia ve i18n kitaplıkları.

Bir eklentiyi app.use(plugin) ile bir kez kaydedersiniz.

Yükleme Sözleşmesi

Bir eklenti ya install(app, options) yöntemine sahip bir nesnedir ya da doğrudan install olarak kullanılan bir işlevdir. Vue, eklentiyi uygulama örneği ve geçirdiğiniz seçeneklerle çağırır.

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

export default myPlugin

Global Bileşenleri Kaydetme

install içinde, her şablonda içe aktarmadan kullanılabilen bir bileşeni kaydetmek için app.component(name, definition) kullanın.

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

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

Global Yönergeleri Kaydetme

app.directive(name, definition) kullanarak v-focus veya v-tooltip gibi özel bir yönergeyi global olarak kaydedin.

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

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

Enjekte Edilebilir Hizmetler Sağlama

app.provide(key, value), herhangi bir alt bileşenin inject(key) ile okuyabileceği bir değer sunar. Bu, hizmetleri (bir API istemcisi veya yapılandırma gibi) global değişkenler olmadan paylaşmanın modern yoludur.

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

Sağlanan Hizmeti Kullanma

Herhangi bir bileşen, eklentinin sağladığı şeyi okumak için inject kullanır. Güvenlik için türü belirtilmiş bir enjeksiyon anahtarını (bir Symbol) tercih edin; ancak dize anahtarları da çalışır.

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

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

Bir Eklentiye Seçenek Geçirme

app.use işlevinin ikinci bağımsız değişkeni, install işlevinin options parametresine iletilir. Davranışı kayıt sırasında yapılandırmak için bunu kullanın.

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')

Eklentiler mount Öncesinde Çalışır

Tüm app.use çağrıları app.mount işleminden önce gerçekleşir. mount zamanına gelindiğinde her global bileşen, yönerge ve sağlanan değer kaydedilmiş olur; böylece ilk oluşturma işlemi bunlara zaten erişebilir.

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

Yinelemeli Olmayan Yükleme

Vue, aynı eklentinin iki kez yüklenmesine karşı koruma sağlar; aynı eklenti için yapılan ikinci app.use çağrısı yok sayılır. Yine de install işlevini güvenli olacak ve app örneği dışındaki yan etkilerden kaçınacak şekilde tasarlayın.

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

Eksiksiz ve Minimal Bir Eklenti

Hepsini bir araya getirdiğinizde, bir eklenti tek bir install yönteminde bir bileşen kaydedebilir, bir yönerge tanımlayabilir ve bir hizmet sağlayabilir.

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' })
  }
}

Eklenti ve Bileştirilebilir İşlev Karşılaştırması

Bir kez çalışan uygulama genelindeki kurulumlar (global bileşenler veya tekil bir hizmet sağlama) için eklenti kullanın. Bileşen başına kullanılan yeniden kullanılabilir durum bilgili mantık için bileştirilebilir işlev kullanın. Eklentiler çoğu zaman bileştirilebilir işlevlerin daha sonra inject aracılığıyla okuyacağı şeyleri kurar.

Hızlı Kontrol

Eklenti mimarisini ne kadar anladığınızı sınayın.

Özet

Eklenti mimarisini öğrendiniz:

Bir eklenti install(app, options) sunar (veya bir işlevdir)
app.component / app.directive global kayıtları yapar
app.provide, inject aracılığıyla okunan enjekte edilebilir hizmetleri sunar
app.use(plugin, options), eklentiyi mount işleminden önce kaydeder
Yükleme yinelemeli değildir; ikinci yükleme yok sayılır

Sıkça Sorulan Sorular

“Eklenti Mimarisi ve app.use()” dersi ücretsiz mi?

Evet — “Eklenti Mimarisi ve app.use()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Eklenti Mimarisi ve app.use()” dersinde ne öğreneceğim?

Eklenti nesnesi { install(app, options) }, app.component, app.directive ve app.provide'e erişim. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Eklenti Mimarisi ve app.use()” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Eklenti Mimarisi ve app.use()
Eklentilerde Genel Özellikler ve provide/inject
Bildirim ve Toast Eklentisi Örneği
Vue Eklentilerini Yayınlama ve Türlendirme

← Vue Academy Sayfasına Dön