Vue Academy · บทเรียน

สถาปัตยกรรมปลั๊กอินและ app.use()

ออบเจ็กต์ปลั๊กอิน { install(app, options) } การเข้าถึง app.component, app.directive และ app.provide

สถาปัตยกรรมปลั๊กอินและ app.use() เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปลั๊กอิน Vue คืออะไร

ปลั๊กอิน Vue คือโค้ดที่นำกลับมาใช้ซ้ำได้สำหรับเพิ่มฟังก์ชันระดับ app เช่น คอมโพเนนต์ส่วนกลาง คำสั่ง บริการที่ฉีดให้ใช้ได้ หรือการตั้งค่า ตัวอย่างเช่น Vue Router, Pinia และไลบรารี i18n

คุณลงทะเบียนปลั๊กอินหนึ่งครั้งด้วย app.use(plugin)

สัญญาการติดตั้ง

ปลั๊กอินอาจเป็นออบเจ็กต์ที่มีวิธีการ install(app, options) หรือเป็นฟังก์ชันที่ใช้โดยตรงเป็น install ก็ได้ Vue จะเรียกใช้สิ่งนั้นพร้อมอินสแตนซ์ของ app และตัวเลือกที่คุณส่งให้

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) นี่เป็นวิธีสมัยใหม่ในการแบ่งปันบริการ เช่น ไคลเอนต์สำหรับส่วนติดต่อโปรแกรมประยุกต์หรือการตั้งค่า โดยไม่ใช้ตัวแปรส่วนกลาง

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 เดียวกัน — การเรียก app.use ครั้งที่สองด้วยปลั๊กอินเดียวกันจะถูกเพิกเฉย อย่างไรก็ตาม ควรออกแบบ install ให้ปลอดภัย และหลีกเลี่ยงผลข้างเคียงนอกอินสแตนซ์ของ app

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

ปลั๊กอินกับฟังก์ชันแบบใช้ซ้ำได้

ใช้ปลั๊กอินสำหรับการตั้งค่าทั่วทั้ง app ที่ทำงานครั้งเดียว เช่น คอมโพเนนต์ส่วนกลางหรือการให้บริการแบบอินสแตนซ์เดียว ใช้ฟังก์ชันแบบใช้ซ้ำได้สำหรับตรรกะจัดการสถานะที่นำไปใช้ซ้ำในแต่ละคอมโพเนนต์ ปลั๊กอินมักตั้งค่าสิ่งที่ฟังก์ชันแบบใช้ซ้ำได้จะอ่านภายหลังผ่าน inject

ตรวจความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับสถาปัตยกรรมปลั๊กอิน

ทบทวน

คุณได้เรียนรู้สถาปัตยกรรมปลั๊กอิน:

ปลั๊กอินเปิดให้ใช้ install(app, options) หรือเป็นฟังก์ชันได้
app.component และ app.directive ใช้ลงทะเบียนสิ่งที่เป็นส่วนกลาง
app.provide เปิดให้บริการที่ฉีดได้ ซึ่งอ่านผ่าน inject
app.use(plugin, options) ใช้ลงทะเบียนปลั๊กอินก่อน mount
การติดตั้งไม่ก่อให้เกิดผลซ้ำ — การติดตั้งสองครั้งจะถูกเพิกเฉย

คำถามที่พบบ่อย

บทเรียน “สถาปัตยกรรมปลั๊กอินและ app.use()” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สถาปัตยกรรมปลั๊กอินและ app.use()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สถาปัตยกรรมปลั๊กอินและ app.use()”

ออบเจ็กต์ปลั๊กอิน { install(app, options) } การเข้าถึง app.component, app.directive และ app.provide คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “สถาปัตยกรรมปลั๊กอินและ app.use()” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

สถาปัตยกรรมปลั๊กอินและ app.use()
คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน
ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast
การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue

← กลับไปที่ Vue Academy