Vue Academy · Ders

Eklenti Geliştirme

Kurulabilir Vue eklentileri oluşturun.

Eklenti Geliştirme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. 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 3 dersten oluşur.

Eklenti Nedir?

Bir Vue eklentisi, tek bir çağrıyla kurabileceğiniz uygulama düzeyindeki işlevleri paketler: genel bileşenler, directive'ler, özellikler veya üçüncü taraf tümleştirmeleri. Vue Router ve Pinia gibi kitaplıklar uygulamanıza eklentiler aracılığıyla bağlanır.

Kurulum İşlevi

Bir eklenti, bir install işlevine (veya doğrudan bir işleve) sahip bir nesnedir. Vue, onu uygulama örneğiyle ve aktardığınız seçeneklerle çağırır.

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

Eklenti Kurma

app.use ile bir eklenti kaydedin; isteğe bağlı olarak bir seçenekler nesnesi aktarabilirsiniz. Vue, kurulum işlevini bir kez çalıştırır.

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

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

Genel Bileşenleri Kaydetme

Kurulum işlevinin içinde bileşenleri genel olarak kaydedin; böylece uygulamanın her bölümü bunları içe aktarmadan kullanabilir.

import BaseButton from "./BaseButton.vue"

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

Genel Directive'leri Kaydetme

Bir eklenti, directive'leri genel olarak da kaydedebilir ve ilgili DOM davranışlarını kurulabilir tek bir pakette bir araya getirebilir.

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

Genel Özellikler Sağlama

Her bileşen örneğinde kullanılabilir bir özellik eklemek için app.config.globalProperties kullanın; bu, biçimlendirici veya HTTP istemcisi gibi yardımcı programlar için kullanışlıdır.

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

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

Bileşim API'si için provide kullanımı

Bileşim API'siyle uyumlu olması için eklentinizde app.provide kullanın; böylece component'ler kurulum sırasında değeri inject edebilir.

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

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

Seçenekleri İletme

Seçenekler bağımsız değişkeni, kullanıcıların eklentinizi yapılandırmasını sağlar. Davranışı özelleştirmek için bu bağımsız değişkeni yükleme işleminin içinde okuyun.

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

İşlev Eklentisi

Eklenti, install içeren bir nesne yerine normal bir işlev olabilir; Vue, işlevin kendisini yükleyici olarak kabul eder.

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

app.use(simplePlugin)

Eksiksiz Bir Eklenti Örneği

Gerçek bir eklenti genellikle bunlardan birkaçını bir araya getirir: tek bir yükleme işlevinde bir component, bir directive ve global bir özellik kaydetmek gibi.

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

Ne Zaman Eklenti Oluşturmalısınız

İşlevsellik gerçekten uygulamanın tamamını kapsıyorsa eklenti kullanın: bir kullanıcı arayüzü kiti, HTTP katmanı, yerelleştirme veya analiz gibi. Bir özelliğe özgü mantık içinse bileştirilebilir bir işlev genellikle daha iyi ve daha hafif bir seçimdir.

Hızlı Kontrol

Eklentiler hakkındaki bilginizi sınayın.

Özet

Bir eklenti, install(app, options) işlevini sunar ve app.use ile kaydedilir. Yükleme işlevinin içinde global component'ler ve directive'ler kaydedebilir, config.globalProperties aracılığıyla global özellikler ekleyebilir ve enjeksiyon için değerleri provide edebilirsiniz. Uygulama genelindeki özellikler için eklentileri, yerel mantık için bileştirilebilir işlevleri kullanın. Sırada ölçeklenebilir bir projeyi yapılandıracaksınız.

Sıkça Sorulan Sorular

“Eklenti Geliştirme” dersi ücretsiz mi?

Evet — “Eklenti Geliştirme” 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 3 dersten oluşur.

“Eklenti Geliştirme” dersinde ne öğreneceğim?

Kurulabilir Vue eklentileri oluşturun. 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, 3 dersinin 2. dersidir.

“Eklenti Geliştirme” 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

← Vue Academy Sayfasına Dön