Vue के साथ विकास उत्पादकता में सुधार - भाग 2

यदि आपने भाग 1 नहीं पढ़ा है, तो आप इस गलतफहमी को यहाँ सुधार सकते हैं ।

पुन: कॉन्फ़िगरेशन का उपयोग करना

नई vue-cli-3 लाइब्रेरी जटिल बिल्ड पैटर्न और कॉन्फ़िगरेशन का समर्थन करने की आवश्यकता को समाप्त करती है। इसके बजाय, यह डेवलपर को अपने एप्लिकेशन के निर्माण पर ध्यान केंद्रित करने की अनुमति देता है। इसमें अल्प-ज्ञात कार्यक्षमता भी है जो आपकी कार्यक्षमता को काफी बढ़ा सकती है। यदि आपके पास vue-cli-3 स्थापित नहीं है, तो आप इसे कर स्थापित कर सकते हैं:

स्थापना @ vue / cli

yarn global add @vue/cli //   npm i @vue/cli -g 

अनिर्धारित लाभों में से एक दूरस्थ प्रीसेट है । वे आपको Vue पर एक नया प्रोजेक्ट बनाते समय प्लगइन्स के स्पष्ट सेट और उनके विकल्पों को परिभाषित करने की अनुमति देते हैं। कार्यक्षमता को और अधिक परिभाषित करने के लिए आप इन प्लगइन्स के संस्करणों को स्पष्ट रूप से स्थापित कर सकते हैं। यदि आपने vue-cli-3 का उपयोग किया है, तो संभवतः आप एक नया एप्लिकेशन बनाते समय इस पार आए:

vue-cli-3 बनाते हैं

"मैनुअल चयन" विकल्प में, आपको उन पैकेजों की एक सूची के साथ प्रस्तुत किया जाता है जिन्हें आपके नए एप्लिकेशन के साथ पूर्व-इंस्टॉल किया जा सकता है। इस लेख में, मैं कुछ मानक विन्यास विकल्पों का चयन करूंगा, जैसे कि vue-router और vuex, और फिर निम्नलिखित प्रश्नों पर आगे बढ़ें।

मैनुअल सेटिंग्स

प्रश्नों को पूरा करने के बाद, vue-cli आपसे पूछेगा कि क्या आप भविष्य के प्रोजेक्ट के लिए इस प्रीसेट को सहेजना चाहते हैं। यह तब बहुत उपयोगी होता है जब आप कई एप्लिकेशन बना रहे होते हैं और जानते हैं कि आप प्रत्येक इंस्टॉलेशन के लिए क्या पैरामीटर चाहते हैं।

स्थानीय प्रीसेट

जब आप कॉन्फ़िगरेशन को एक प्रीसेट के रूप में सहेजते हैं, तो यह अगली बार उपलब्ध होगा जब vue create चलाया जाता है।

इस क्षण से, हमारा आवेदन निर्भरता को स्थापित करता है, और हमारे पास अभी भी समाप्त Vue आवेदन है। लेकिन प्रीसेट के बारे में क्या? आइए, .rc फ़ाइल को देखें जो cli बनाई गई है। यह आपके होम डायरेक्टरी में स्थित होगा और कहा जाएगा ।vuerc ।

~ / .vuerc फ़ाइल

आज हम अपने स्वयं के प्रीसेट बनाने के लिए इस कॉन्फ़िगरेशन का उपयोग करने जा रहे हैं, जो हम जिस भी नए प्रोजेक्ट पर काम कर रहे हैं, उसे दूरस्थ रूप से अनुकूलित कर सकते हैं।

प्रीसेट बनाएं

चलो एक नया माय -प्रीसेट फ़ोल्डर बनाते हैं और प्रीसेट.जॉन फ़ाइल में मानक कॉन्फ़िगरेशन की प्रतिलिपि बनाते हैं। आपने ऊपर देखा होगा कि कॉन्फ़िगरेशन पैरामीटर cli-plugin-eslint में पारित किए गए थे। चूंकि सभी vue-cli-3 प्लगइन्स उपयोगकर्ता प्रतिक्रियाओं के लिए पूछताछ का उपयोग करते हैं, हम उन्हें विकल्प प्रदान कर सकते हैं और उन्हें छोड़ सकते हैं।

यदि आप vue-cli-3 रिपॉजिटरी में जाते हैं और उपलब्ध पैकेज पर जाते हैं, तो आपको @vue डायरेक्टरी में उपरोक्त सभी प्लगइन्स मिल जाएंगे।

Vue-cl मोनोरेपो

प्रत्येक पैकेज में विकल्पों की एक सूची होती है जिसके लिए हम डिफ़ॉल्ट सेटिंग्स कनेक्ट कर सकते हैं। सबसे पहले, vuetify-cli-plugin plugin में प्लग इन करें । प्रॉम्प्ट.जेएस फ़ाइल खोलने से उन सभी उपलब्ध विकल्पों का पता चल जाएगा, जिन्हें हम प्लगइन्स के तहत पूर्व-कॉन्फ़िगर कर सकते हैं। आइए इन विकल्पों को पूर्व निर्धारित में जोड़ें:

प्लगइन्स विकल्प बदलें

इस स्तर पर, कोई भी क्ली-प्लगइन जिसे आप जोड़ना चाहते हैं, उसे प्लगइन में एक नई संपत्ति जोड़कर और उपलब्ध मापदंडों की खोज करके किया जा सकता है जिन्हें कॉन्फ़िगर करने की आवश्यकता है।

प्लगिन निर्माण

यह vue-cli-3 प्लगइन का एक बहुत ही सरल कार्यान्वयन होगा। अधिक उन्नत चलने के लिए, कृपया आधिकारिक दस्तावेज़ देखें ।

आपकी सेटिंग के आधार पर, आपके पास एप्लिकेशन में मौजूदा फ़ंक्शन हो सकते हैं, जिन्हें आप vue-cli का उपयोग करके स्वचालित करना चाहते हैं। आप एक स्पष्ट पैकेज बनाए बिना ऐसा कर सकते हैं, लेकिन मान लें कि आप चाहते हैं कि यह @ vue / cli-service द्वारा खोजा जा सके और अन्य डेवलपर्स द्वारा सार्वजनिक किया जाए।

Vue-cli-plugin- <your plugin name> नाम से एक नया प्रोजेक्ट बनाएं।

एक नया पैकेज बनाएं

इस प्लगइन के लिए, हम जोड़कर हमारे एप्लिकेशन के एस्लिंट कॉन्फ़िगरेशन को बदलना चाहते हैं
एस्लिंट-कॉन्फिग-व्यूटिफाई ।

ऐसा करने के लिए, हम एक जनरेटर फ़ाइल बनाएंगे जो एक नए पैकेज को जोड़ने और एस्लिंट कॉन्फ़िगरेशन को अपडेट करने के लिए vue-cli को बताती है।

अपनी सभी परियोजनाओं के लिए, मैं एस्लिंट-कॉन्फिग-वुटिफ़ाइ का उपयोग करता हूं और मैं इसे अपनी परियोजनाओं में लोड करना चाहूंगा।

Vue-cli जनरेटर फ़ाइल

यहां मैं एक मूल पैकेज एक्सटेंशन स्थापित कर रहा हूं। जनरेटर फ़ाइलों से फ़ंक्शन को निर्यात करने और प्रोजेक्ट फ़ाइलों को संशोधित करने के लिए पहुंच प्रदान करने की उम्मीद है। यह फ़ंक्शन क्लाइंट को एक निर्भरता के रूप में एस्लिंट कॉन्फ़िगरेशन को जोड़ने के लिए कहता है, और फिर प्रोजेक्ट कॉन्फ़िगरेशन को अपडेट करता है।

Npm पर पोस्ट करने के बाद, vue-cli अब दूसरों द्वारा उपयोग के लिए पैकेज उठा सकता है!
आइए वापस जाएं और एक नए प्लगइन के साथ हमारे प्रीसेट को अपडेट करें।

एक पूर्व निर्धारित करने के लिए एक नया प्लगइन जोड़ना

अब हमारे स्पिन आवेदन को स्वीकार करने का समय आ गया है। हम पूर्व निर्धारित का उपयोग करने के लिए कहकर एक नई परियोजना बना सकते हैं।

और वोइला! एक पंक्ति, और हमारे पास पूर्व की तरह नई परियोजनाओं के लिए एक पुन: प्रयोज्य प्रारंभिक बिंदु है जो हमें पसंद है। यदि आप इस लेख पर चर्चा करना चाहते हैं, तो निःसंकोच मुझसे संपर्क करें।

डेटा संग्रह स्थान

Vue-CLI-पूर्व निर्धारित-vuetify
Vue-CLI-पूर्व निर्धारित-vuetify