Vue Academy · Pelajaran

Pengembangan Plugin

Buat plugin Vue yang dapat dipasang.

Pengembangan Plugin adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Apa Itu Pengaya?

Pengaya Vue mengemas fungsionalitas tingkat aplikasi yang dapat Anda pasang dalam satu pemanggilan: komponen global, direktif, properti, atau integrasi pihak ketiga. Pengaya memungkinkan pustaka seperti Vue Router dan Pinia terhubung ke aplikasi Anda.

Fungsi Pemasangan

Pengaya adalah objek dengan metode install (atau cukup berupa fungsi). Vue memanggilnya dengan instans aplikasi dan opsi apa pun yang Anda teruskan.

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

Memasang Pengaya

Daftarkan pengaya dengan app.use, dan teruskan objek opsi jika diperlukan. Vue menjalankan fungsi pemasangan satu kali.

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

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

Mendaftarkan Komponen Global

Di dalam fungsi pemasangan, daftarkan komponen secara global agar setiap bagian aplikasi dapat menggunakannya tanpa impor.

import BaseButton from "./BaseButton.vue"

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

Mendaftarkan Direktif Global

Pengaya juga dapat mendaftarkan direktif secara global, dengan mengemas perilaku DOM terkait menjadi satu paket yang dapat dipasang.

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

Menyediakan Properti Global

Gunakan app.config.globalProperties untuk menambahkan properti yang tersedia pada setiap instans komponen, berguna untuk utilitas seperti pemformat atau klien HTTP.

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

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

Menggunakan provide untuk API Komposisi

Untuk memudahkan penggunaan API Komposisi, gunakan app.provide dalam pengaya Anda agar komponen dapat inject nilainya di dalam setup.

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

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

Meneruskan Opsi

Argumen opsi memungkinkan pengguna mengonfigurasi pengaya Anda. Bacalah di dalam fungsi pemasangan untuk menyesuaikan perilakunya.

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

Pengaya Berupa Fungsi

Pengaya dapat berupa fungsi biasa, bukan objek dengan fungsi pemasangan; Vue memperlakukan fungsi itu sendiri sebagai pemasang.

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

app.use(simplePlugin)

Contoh Pengaya Lengkap

Pengaya nyata sering menggabungkan beberapa hal berikut: mendaftarkan sebuah component, sebuah directive, dan properti global dalam satu fungsi pemasangan.

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

Kapan Membuat Pengaya

Gunakan pengaya ketika fungsionalitas benar-benar berlaku untuk seluruh aplikasi: kit UI, lapisan HTTP, i18n, atau analitik. Untuk logika yang hanya berlaku pada suatu fitur, fungsi komposabel biasanya merupakan pilihan yang lebih baik dan lebih ringan.

Uji Cepat

Uji pengetahuan Anda tentang pengaya.

Ringkasan

Sebuah pengaya menyediakan fungsi install(app, options) dan didaftarkan dengan app.use. Di dalam fungsi pemasangan, Anda dapat mendaftarkan component dan directive global, menambahkan properti global melalui config.globalProperties, serta provide nilai untuk injeksi. Gunakan pengaya untuk fitur yang berlaku di seluruh aplikasi; gunakan fungsi komposabel untuk logika lokal. Berikutnya, Anda akan menyusun proyek yang dapat diskalakan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengembangan Plugin” gratis?

Ya — teks lengkap “Pengembangan Plugin” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Pengembangan Plugin”?

Buat plugin Vue yang dapat dipasang. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Pengembangan Plugin” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy