Vue Academy · บทเรียน

การพัฒนาปลั๊กอิน

สร้างปลั๊กอิน Vue ที่ติดตั้งได้

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

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

ปลั๊กอิน Vue จะบรรจุฟังก์ชันการทำงานระดับแอปที่คุณติดตั้งได้ด้วยคำสั่งเดียว เช่น คอมโพเนนต์ คำสั่ง คุณสมบัติทั่วโลก หรือการเชื่อมต่อบริการภายนอก ปลั๊กอินคือวิธีที่ไลบรารีอย่าง Vue Router และ Pinia เชื่อมเข้ากับแอปของคุณ

ฟังก์ชันการติดตั้ง

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

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

การติดตั้งปลั๊กอิน

ลงทะเบียนปลั๊กอินด้วย app.use โดยอาจส่งออบเจ็กต์ตัวเลือกเข้าไปด้วยก็ได้ Vue จะเรียกใช้ฟังก์ชันติดตั้งหนึ่งครั้ง

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

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

การลงทะเบียนคอมโพเนนต์ทั่วโลก

ภายในฟังก์ชันติดตั้ง ให้ลงทะเบียนคอมโพเนนต์ทั่วโลก เพื่อให้ทุกส่วนของแอปใช้งานได้โดยไม่ต้องนำเข้า

import BaseButton from "./BaseButton.vue"

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

การลงทะเบียนคำสั่งทั่วโลก

ปลั๊กอินยังสามารถลงทะเบียนคำสั่งทั่วโลกได้ โดยรวมพฤติกรรม DOM ที่เกี่ยวข้องไว้ในแพ็กเกจเดียวที่ติดตั้งได้

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

การกำหนดคุณสมบัติทั่วโลก

ใช้ app.config.globalProperties เพื่อเพิ่มคุณสมบัติที่พร้อมใช้งานในอินสแตนซ์ของคอมโพเนนต์ทุกตัว เหมาะสำหรับยูทิลิตีอย่างตัวจัดรูปแบบหรือไคลเอ็นต์ HTTP

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

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

การใช้ provide กับส่วนติดต่อการเขียนโปรแกรมแบบจัดองค์ประกอบ

เพื่อให้ใช้งานร่วมกับส่วนติดต่อการเขียนโปรแกรมแบบจัดองค์ประกอบได้สะดวก ให้ใช้ app.provide ในปลั๊กอิน เพื่อให้ component สามารถ inject ค่าในขั้นตอนการตั้งค่าได้

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

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

การส่งผ่านตัวเลือก

อาร์กิวเมนต์ตัวเลือกช่วยให้ผู้ใช้กำหนดค่าปลั๊กอินของคุณได้ โปรดอ่านอาร์กิวเมนต์นี้ภายในฟังก์ชันติดตั้งเพื่อปรับแต่งการทำงาน

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

ปลั๊กอินแบบฟังก์ชัน

ปลั๊กอินอาจเป็นฟังก์ชันธรรมดาแทนออบเจ็กต์ที่มีฟังก์ชันติดตั้งก็ได้ โดย Vue จะถือว่าฟังก์ชันนั้นเป็นตัวติดตั้งโดยตรง

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

app.use(simplePlugin)

ตัวอย่างปลั๊กอินแบบสมบูรณ์

ปลั๊กอินจริงมักรวมสิ่งเหล่านี้ไว้หลายอย่าง เช่น การลงทะเบียน component, directive และคุณสมบัติส่วนกลางไว้ในฟังก์ชันติดตั้งเดียว

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

เมื่อใดควรสร้างปลั๊กอิน

ควรเลือกใช้ปลั๊กอินเมื่อฟังก์ชันนั้นจำเป็นต่อทั้งแอปอย่างแท้จริง เช่น ชุดส่วนติดต่อผู้ใช้ ชั้นการสื่อสารผ่านเว็บ การรองรับหลายภาษา หรือการวิเคราะห์ข้อมูล ส่วนตรรกะที่ใช้เฉพาะกับฟีเจอร์หนึ่ง ฟังก์ชันประกอบมักเป็นตัวเลือกที่เหมาะสมและเบากว่า

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความรู้เกี่ยวกับปลั๊กอินของคุณ

ทบทวน

ปลั๊กอินเปิดเผยฟังก์ชัน install(app, options) และลงทะเบียนด้วย app.use ภายในฟังก์ชันติดตั้ง คุณสามารถลงทะเบียน component และ directive ส่วนกลาง เพิ่มคุณสมบัติส่วนกลางผ่าน config.globalProperties และ provide ค่าเพื่อการฉีดได้ ใช้ปลั๊กอินสำหรับฟีเจอร์ที่ครอบคลุมทั้งแอป และใช้ฟังก์ชันประกอบสำหรับตรรกะเฉพาะที่ ต่อไปคุณจะได้จัดโครงสร้างโครงการที่ขยายได้

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

บทเรียน “การพัฒนาปลั๊กอิน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การพัฒนาปลั๊กอิน”

สร้างปลั๊กอิน Vue ที่ติดตั้งได้ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การพัฒนาปลั๊กอิน” ใช้เวลานานแค่ไหน

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

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

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

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

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