प्लगइन विकास
इंस्टॉल किए जा सकने वाले Vue प्लगइन बनाएँ।
प्लगइन विकास, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
Plugin क्या है?
Vue plugin app-level functionality को एक package में रखता है, जिसे आप एक call में install कर सकते हैं: global components, directives, properties या third-party integrations। Vue Router और Pinia जैसी libraries आपके app से जुड़ने के लिए plugins का उपयोग करती हैं।
install Function
Plugin एक ऐसा object होता है जिसमें install method (या केवल एक function) होता है। Vue इसे app instance और आपके द्वारा पास किए गए किसी भी options के साथ call करता है।
export const myPlugin = {
install(app, options) {
// set up global features here
}
}Plugin install करना
app.use के साथ plugin register करें और चाहें तो options object पास करें। Vue install function को एक बार चलाता है।
import { createApp } from "vue"
import { myPlugin } from "./myPlugin"
const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })Global Components register करना
install के अंदर components को globally register करें, ताकि app का हर भाग उन्हें import किए बिना उपयोग कर सके।
import BaseButton from "./BaseButton.vue"
export const uiKit = {
install(app) {
app.component("BaseButton", BaseButton)
}
}Global Directives register करना
Plugin directives को भी globally register कर सकता है, जिससे संबंधित DOM behaviors एक ही installable package में बंडल हो जाते हैं।
export const focusPlugin = {
install(app) {
app.directive("focus", {
mounted(el) { el.focus() }
})
}
}Global Properties उपलब्ध कराना
हर component instance पर उपलब्ध property जोड़ने के लिए app.config.globalProperties का उपयोग करें। यह formatter या HTTP client जैसी utilities के लिए उपयोगी है।
export const apiPlugin = {
install(app, options) {
app.config.globalProperties.$api = options.client
}
}
// in any component: this.$api.get("/users")Composition API के लिए provide का उपयोग
Composition API के साथ बेहतर अनुकूलता के लिए, अपने प्लगइन में app.provide का उपयोग करें, ताकि घटक सेटअप में 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
}
}फ़ंक्शन वाला प्लगइन
प्लगइन, install वाले ऑब्जेक्ट के बजाय एक साधारण फ़ंक्शन भी हो सकता है; व्यू स्वयं उस फ़ंक्शन को इंस्टॉलर की तरह मानता है।
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 के साथ पंजीकृत किया जाता है। इंस्टॉल प्रक्रिया के भीतर आप वैश्विक घटकों और निर्देशिकाओं को पंजीकृत कर सकते हैं, config.globalProperties के माध्यम से वैश्विक गुणधर्म जोड़ सकते हैं और मान उपलब्ध कराने के लिए provide का उपयोग कर सकते हैं। पूरे ऐप के लिए सुविधाओं में प्लगइन्स का उपयोग करें और स्थानीय तर्क के लिए कम्पोज़ेबल्स का। अगली बार आप एक विस्तार योग्य प्रोजेक्ट की संरचना बनाएंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 42
- पाठ
- 156
अक्सर पूछे जाने वाले प्रश्न
क्या “प्लगइन विकास” पाठ निःशुल्क है?
हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “प्लगइन विकास” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“प्लगइन विकास” में मैं क्या सीखूँगा?
इंस्टॉल किए जा सकने वाले Vue प्लगइन बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।
“प्लगइन विकास” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।