Vue Academy · Pelajaran

Seni Bina Plugin dan app.use()

Objek plugin { install(app, options) }, mengakses app.component, app.directive, app.provide.

Pelajaran 1 daripada 413 langkah

Seni Bina Plugin dan app.use() ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah Pemalam Vue

Pemalam Vue ialah kod yang boleh digunakan semula untuk menambahkan fungsi pada peringkat app — komponen global, direktif, perkhidmatan yang disuntik atau konfigurasi. Contohnya termasuk Vue Router, Pinia dan pustaka i18n.

Anda mendaftarkan pemalam sekali dengan app.use(plugin).

Kontrak install

Pemalam boleh berupa objek dengan kaedah install(app, options), atau fungsi yang digunakan terus sebagai install. Vue memanggilnya dengan instans app dan sebarang pilihan yang Anda hantarkan.

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

export default myPlugin

Mendaftarkan Komponen Global

Di dalam install, gunakan app.component(name, definition) untuk mendaftarkan komponen yang tersedia dalam setiap templat tanpa perlu mengimportnya.

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

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

Mendaftarkan Direktif Global

Gunakan app.directive(name, definition) untuk mendaftarkan direktif tersuai secara global, seperti v-focus atau v-tooltip.

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

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

Menyediakan Perkhidmatan Boleh Suntik

app.provide(key, value) mendedahkan nilai yang boleh dibaca oleh mana-mana komponen turunan dengan inject(key). Ini ialah cara moden untuk berkongsi perkhidmatan (klien API atau konfigurasi) tanpa pemboleh ubah global.

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

Menggunakan Perkhidmatan yang Disediakan

Mana-mana komponen boleh menggunakan inject untuk membaca perkara yang disediakan oleh pemalam. Utamakan kunci suntikan yang mempunyai jenis (sebuah Symbol) demi keselamatan, tetapi kunci rentetan juga boleh digunakan.

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

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

Menghantar Pilihan kepada Pemalam

Argumen kedua untuk app.use dihantar sebagai parameter options bagi install. Gunakannya untuk mengkonfigurasi tingkah laku semasa pendaftaran.

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

Pemalam Dijalankan Sebelum mount

Semua panggilan app.use berlaku sebelum app.mount. Pada masa mount, setiap komponen global, direktif dan nilai yang disediakan telah didaftarkan, jadi render pertama sudah boleh mengakses semuanya.

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

Pemasangan Idempoten

Vue menghalang pemasangan pemalam yang sama dua kali pada satu app — panggilan kedua app.use dengan pemalam yang serupa diabaikan. Namun begitu, reka bentuk install hendaklah selamat dan mengelakkan kesan sampingan di luar instans app.

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

Pemalam Minimum yang Lengkap

Secara keseluruhannya: pemalam boleh mendaftarkan komponen, direktif dan menyediakan perkhidmatan, semuanya dalam satu kaedah 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' })
  }
}

Pemalam berbanding Komposabel

Gunakan pemalam untuk persediaan seluruh app yang dijalankan sekali (komponen global atau penyediaan perkhidmatan tunggal). Gunakan komposabel untuk logik berkeadaan yang boleh digunakan semula oleh setiap komponen. Pemalam selalunya menyediakan perkara yang kemudiannya dibaca oleh komposabel melalui inject.

Pemeriksaan Pantas

Uji pemahaman Anda tentang seni bina pemalam.

Jawab dalam pelajaran interaktif

Ulang Kaji

Anda mempelajari seni bina pemalam:

Pemalam mendedahkan install(app, options) (atau merupakan sebuah fungsi)
app.component / app.directive mendaftarkan komponen global
app.provide mendedahkan perkhidmatan boleh suntik yang dibaca melalui inject
app.use(plugin, options) mendaftarkannya sebelum mount
Pemasangan adalah idempoten — pemasangan kali kedua diabaikan

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Seni Bina Plugin dan app.use()” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Seni Bina Plugin dan app.use()”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Seni Bina Plugin dan app.use()”?

Objek plugin { install(app, options) }, mengakses app.component, app.directive, app.provide. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Seni Bina Plugin dan app.use()” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Seni Bina Plugin dan app.use()
Sifat Global dan provide/inject dalam Plugin
Contoh Plugin Pemberitahuan dan Toast
Menerbitkan dan Menaip Plugin Vue

← Kembali ke Vue Academy