शुरुआत डेवलपर्स के लिए एक Vue.js ट्यूटोरियल: मूल बातें जानें और इस स्टार्टर Vue संरचना का उपयोग करें

शुरुआत डेवलपर्स के लिए Vue.js ट्यूटोरियल


जब भी आप अपने विकास के प्रवाह में नई तकनीकों का उपयोग करना शुरू करते हैं, तो आप कम से कम भयभीत महसूस कर सकते हैं। खासतौर पर तब जब एनपीएम का असंख्य पैकेज वहां के जंगल में होता है। चीजों का मिश्रण और मिलान कभी-कभी बहुत समय और प्रयास कर सकता है, और आमतौर पर निराशा होती है. यह वह जगह है जहां शुरुआती डेवलपर्स के लिए निम्नलिखित Vue.js ट्यूटोरियल खेल में आता है.

Vue.js क्या है? आपको क्यों परवाह करनी चाहिए?

Vue.js या Vue for short यूजर इंटरफेस बनाने के लिए एक जावास्क्रिप्ट फ्रेमवर्क है। अन्य रूपरेखाओं की तुलना में, जैसे कि कोणीय या प्रतिक्रिया, Vue अधिक स्वीकार्य है और एक सीखने की अवस्था के रूप में खड़ी नहीं है.

Vue भी मॉड्यूलर है, और आपको अपने कोड को पुन: प्रयोज्य घटकों में विभाजित करने की अनुमति देगा। उनमें से प्रत्येक का अपना HTML मार्कअप, सीएसएस और जावास्क्रिप्ट कोड है.

इस Vue.js ट्यूटोरियल का दायरा क्या है?

इस छोटे Vue.js ट्यूटोरियल का उद्देश्य आपको कुछ मचान प्रदान करना है जिस पर आप Vue के साथ निर्माण और प्रयोग कर सकते हैं। हम वर्डप्रेस डैशबोर्ड के अंदर एक Vue ऐप के मूल सेटअप पर एक नज़र डालने जा रहे हैं.

(ध्यान दें; हम आपको इस गाइड में प्रति सेवक नहीं सिखाएंगे, लेकिन आप आगे बढ़ सकते हैं और फ्रेमवर्क के बारे में अधिक जान सकते हैं। आधिकारिक गाइड आपके द्वारा यहाँ परियोजना स्थापित करने के बाद – जिस पर आप प्रयोग करने के बाद भी जारी रख सकते हैं। इसके अलावा, हम कुछ सबसे दिलचस्प वीयू यूआई घटक पुस्तकालयों की सलाह देते हैं जो विकास की प्रक्रिया को अधिक कुशल बनाते हैं।)

हम जो करने जा रहे हैं वह Vue का उपयोग करके WordPress प्लगइन्स के लिए पूर्वनिर्धारित टेम्पलेट का उपयोग करना है। आप इसे निम्न GitHub रिपॉजिटरी में पा सकते हैं यदि आप एक गहरा रूप लेना चाहते हैं: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js ट्यूटोरियल: पूर्वापेक्षाएँ

इस गाइड का पालन जारी रखने के लिए कुछ चीजें हैं जो आपको अपने कंप्यूटर पर पहले ही सेट कर लेनी चाहिए:

सबसे पहले, आपको एक LAMP स्टैक की आवश्यकता होगी – आप XAMPP का उपयोग विंडोज या मैक पर कर सकते हैं, या मैक पर फ्लाईव्हील द्वारा स्थानीय कर सकते हैं, और फिर अपने आप को एक ताजा स्थानीय वर्डप्रेस स्थापित करें.

सुनिश्चित करें कि आपके पास है NodeJS पैकेज मैनेजर (npm) आपकी मशीन पर स्थापित है। आपको टर्मिनल के माध्यम से दो और पैकेज स्थापित करने की आवश्यकता होगी – Vue CLI और Vue टेम्पलेट इनिशियलाइज़िंग टूल। इस तरह:

$ npm स्थापित -g @ vue / cli
$ npm स्थापित -g @ vue / cli-init

आपके द्वारा ये दो निर्भरताएँ स्थापित करने के बाद, आपको सक्रिय निर्देशिका को अपने स्थानीय वर्डप्रेस उदाहरण के wp-content / plugins निर्देशिका में बदलने की आवश्यकता है और फिर वहाँ निम्न कमांड चलाएँ:

$ vue init अबिसस / vue-wp-बूटस्ट्रैप my-vue-डैशबोर्ड-प्लगइन

अगला, आपको अपनी परियोजना की स्थापना के बारे में कुछ सवालों के जवाब देने के लिए प्रेरित किया जाएगा.

बिल्ड प्रॉम्प्ट के लिए, बस आगे बढ़ें और अब के लिए पहला विकल्प चुनें "रनटाइम + कंपाइलर: अधिकांश उपयोगकर्ताओं के लिए अनुशंसित".

आप चाहें तो ESLint लिंटर को सक्षम कर सकते हैं। यह आपके प्रोजेक्ट में किसी भी लाइनिंग त्रुटियों का पता लगाएगा, लेकिन आपको अभी इस बारे में चिंता करने की आवश्यकता नहीं है.

कमिट लिंट और प्री-कमिट हुक आपके कमिट मैसेज और GitHub को कमिट भेजने से पहले कोड की जाँच करने के लिए होते हैं – सब कुछ ठीक और अच्छी तरह से फॉर्मेट रखने के लिए.

आपके द्वारा किए जाने के बाद आप टर्मिनल को कम या ज्यादा देखना चाहेंगे:

आप आगे बढ़ सकते हैं और स्क्रीन पर निर्देशों का पालन कर सकते हैं। निर्देशिका को नई उत्पन्न प्लगइन निर्देशिका में बदलें और टर्मिनल प्रॉम्प्ट में दिखाए गए कमांड चलाएं। यह आपके एप्लिकेशन को अप और रनिंग देगा, आपके कोड के अंदर परिवर्तनों की प्रतीक्षा करेगा और यह Vue कोड को जावास्क्रिप्ट में ट्रांसपाइल करेगा.

यह क्या करता है?

बहुत ज्यादा नहीं। यह सिर्फ एक बुनियादी अनुप्रयोग है जो बैकएंड के कुछ डेटा को प्रदर्शित करता है। हुड के नीचे ज्यादा Vue नहीं। आप प्लगइन्स डैशबोर्ड पृष्ठ पर आगे जा सकते हैं और इसे सक्रिय कर सकते हैं। यह आपके व्यवस्थापक मेनू में एक नया पृष्ठ जोड़ने जा रहा है। इसे नेविगेट करने पर, आप दो स्ट्रिंग्स के साथ एक डैशबोर्ड पृष्ठ खोजने जा रहे हैं:

प्लगइन मचान संरचना

आइए नव निर्मित प्लगइन के लिए फ़ाइल संरचना पर एक नज़र डालें। हम इस Vue.js ट्यूटोरियल में अधिकांश कॉन्फिग फाइलों को अनदेखा करने जा रहे हैं ताकि हम एप्लिकेशन की संरचना पर ध्यान केंद्रित कर सकें:

सबसे पहले, हमें plugin.php फ़ाइल मिली है, जो वास्तविक प्लगइन के लिए प्रवेश बिंदु है। यहां, हमारे पास मुख्य है लगाना कक्षा। यह वह जगह है जहां आवेदन के मुख्य घटक शामिल हैं और भाग गए हैं.

इसके बाद, वहाँ पैकेज। Json फ़ाइल है जहाँ सभी निर्भरताएँ और अन्य प्रोजेक्ट जानकारी का एक समूह परिभाषित किया गया है। जिस हिस्से में आपकी रुचि हो सकती है, उसके तहत जीवन "स्क्रिप्ट" खेत। वहां, आपके पास सभी कमांड हैं जिन्हें आप npm रन प्रीफिक्स के साथ चला सकते हैं। अभी के लिए, महत्वपूर्ण हैं, npm रन देव (जो विकास के लिए एप्लिकेशन बनाता है) और npm रन बिल्ड होना चाहिए (जो आपको उत्पादन के लिए अपने ऐप को तैनात करने के लिए तैयार होने के बाद चलाना चाहिए)। अन्य आदेश इन दोनों से सटे हुए हैं या अन्य सामान है कि आप इस समय के बारे में चिंता करने की जरूरत नहीं होनी चाहिए.

शामिल निर्देशिका के अंदर, तीन फाइलें हैं:

  • Rest.php वर्ग इस समय कुछ भी नहीं करता है, लेकिन आपके पास पहले से ही अपने RestAPI मार्गों को जोड़ने के लिए एक संरचना है
  • एसेट.php क्लास स्टाइल और स्क्रिप्ट को संभालती है। यहां, जावास्क्रिप्ट फ़ाइल PHP से हमारे Vue ऐप में डेटा शुरू करने के लिए स्थानीयकृत है। फिलहाल, सिर्फ दो पाठ भेजे गए हैं, लेकिन आप अपनी इच्छा के अनुसार कुछ भी शामिल कर सकते हैं.
  • Admin.php फ़ाइल वह है जो डैशबोर्ड में एक नया पृष्ठ जोड़ने और वास्तविक प्लगइन पृष्ठ को प्रस्तुत करने का ध्यान रख रही है। आप स्वयं ऐप को नोटिस करने जा रहे हैं, यह प्लगइन_पेज () फ़ंक्शन के अंदर केवल दो खाली टैग के रूप में प्रस्तुत किया गया है। ऐसा इसलिए है क्योंकि जावास्क्रिप्ट लोड होने के बाद एप्लिकेशन के वास्तविक प्रतिपादन को संभाल लेगा.

संपत्ति निर्देशिका के अंदर, आप चार और निर्देशिकाएँ खोजने जा रहे हैं:

  • Src निर्देशिका – हमारे Vue ऐप के लिए स्रोत फ़ाइलें, जिनके बारे में हम बाद में बात करने जा रहे हैं.
  • Scss directory – SCSS शैली की फाइलें जिनसे हम CSS स्टाइलशीट उत्पन्न करते हैं.
  • जेएस निर्देशिका – ट्रांसप्लड कोड जो हमारी फाइलों से src डायरेक्टरी में उत्पन्न होता है.
  • सीएसएस निर्देशिका – SCSS फ़ाइलों से संकलित शैली.

Src निर्देशिका और Vue टेम्पलेट फ़ाइलें

इस निर्देशिका के अंदर, दो फाइलें हैं: main.js और App.vue। Main.js फ़ाइल अनुप्रयोग के लिए प्रवेश बिंदु है। यह संबंधित तत्व के साथ DOM तत्व के लिए Vue एप्लिकेशन घटक संलग्न करता है.

/ * जैश एंवर्सन: 6 * /
‘Vue’ से आयात करें
से आयात ऐप ‘./App.vue’

window.addEventListener (‘लोड’, फंक्शन () {
नया Vue ({// eslint-disable-line no-new
एल: ‘# mvdp-app’,
घटक: {App},
रेंडर: (h) => ज (एप्लिकेशन)
})
})

वास्तविक एप्लिकेशन मार्कअप App.vue टेम्पलेट के अंदर है:

/ * जैश एंवर्सन: 6 * /

{{This.strings.title}}

{{This.strings.description}}

/ * वैश्विक एमवीडीपी * /
निर्यात डिफ़ॉल्ट {
डेटा () {
वापसी {
तार: MVDP.strings
}
},
नाम: ‘App.vue’
}

आप ऊपर स्निपेट के अंदर देख सकते हैं कि हम एसेट्स क्लास में स्थानीयकृत स्ट्रिंग्स का उपयोग कर रहे हैं। Vue की महान विशेषताओं में से एक यह है कि घटक के कोड को बड़े करीने से टेम्पलेट, स्क्रिप्ट और शैली में व्यवस्थित किया गया है, जिससे संरचना को समझना आसान हो गया है.

यही है, अब आपके पास Vue.js के साथ जो भी आप और विकसित करना चाहते हैं, उसके लिए एक ठोस शुरुआती बिंदु है! मुझे आशा है कि यह V..js ट्यूटोरियल मददगार रहा है.

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

करोल के द्वारा लेआउट, प्रस्तुति और संपादन.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map