Vue.js प्रोजेक्ट की संरचना कैसे करें

सही V..ss फ़ोल्डर संरचना और घटक वास्तुकला स्मार्ट और गूंगा घटकों के साथ

Vue.js एक प्रचार से अधिक है, यह एक महान दृश्यपटल रूपरेखा है। इसके साथ शुरुआत करना और वेब ऐप बनाना काफी आसान है। Vue.js को अक्सर छोटे ऐप के लिए एक रूपरेखा के रूप में वर्णित किया जाता है और यहां तक ​​कि कभी-कभी अपने छोटे आकार के कारण jQuery के विकल्प के रूप में भी! मुझे व्यक्तिगत रूप से लगता है कि यह बड़ी परियोजनाओं के लिए भी फिट हो सकता है और इस मामले में, घटक वास्तुकला के संदर्भ में इसे अच्छी तरह से संरचना करना महत्वपूर्ण है।

अपना पहला बड़ा Vue.js प्रोजेक्ट शुरू करने से पहले, मैंने सही फ़ोल्डर संरचना, घटक वास्तुकला, और घोंसला सम्मेलन खोजने के लिए कुछ शोध किए। मैं Vue.js प्रलेखन, कुछ लेखों और कई GitHub ओपन सोर्स परियोजनाओं के माध्यम से चला गया।

मेरे पास कुछ सवालों के जवाब खोजने की जरूरत थी। इस पोस्ट में आपको यही मिलेगा:

  • आप Vue.js प्रोजेक्ट के अंदर फ़ाइलों और फ़ोल्डरों को कैसे बनाते हैं?
  • आप स्मार्ट और डंब घटक कैसे लिखते हैं और आप उन्हें कहां रखते हैं? यह एक अवधारणा है जो रिएक्ट से आ रही है।
  • Vue.js कोडिंग शैली और सर्वोत्तम अभ्यास क्या हैं?

मैं उस स्रोत के साथ भी दस्तावेज़ बनाऊँगा जो मुझे बेहतर समझ पाने के लिए प्रेरित और अन्य लिंक्स से मिला है।

Vue.js फ़ोल्डर संरचना

यहाँ src फ़ोल्डर की सामग्री है। मैं आपको Vue CLI के साथ प्रोजेक्ट को किक-स्टार्ट करने की सलाह देता हूं। मैंने व्यक्तिगत रूप से डिफ़ॉल्ट वेबपैक टेम्पलेट का उपयोग किया है।

।
S app.css
Ue App.vue
├── संपत्ति
│ │ ...
├── घटक
│ │ ...
S main.js
├── मिश्रण
│ │ ...
├── राउटर
।। Index.js
├── स्टोर
।। Index.js
├── ├── मॉड्यूल
└── └── │ ...
Ation ation उत्परिवर्तन-type.js
├── अनुवाद
।। Index.js
├── बर्तन
│ │ ...
└── विचार
    └── ...

इनमें से प्रत्येक फ़ोल्डर के बारे में कुछ विवरण:

  • परिसंपत्तियाँ - जहाँ आप कोई भी संपत्ति रखते हैं जो आपके घटकों में आयात की जाती है
  • घटक - परियोजनाओं के सभी घटक जो मुख्य विचार नहीं हैं
  • मिश्रण - मिश्रण, जावास्क्रिप्ट कोड के भाग होते हैं जिनका विभिन्न घटकों में पुन: उपयोग किया जाता है। एक मिश्रण में आप Vue.js से किसी भी घटक के तरीकों को डाल सकते हैं, उनका उपयोग करने वाले घटक के साथ विलय किया जाएगा।
  • राउटर - आपकी परियोजनाओं के सभी मार्ग (मेरे मामले में मैंने उन्हें index.js में दिया है)। मूल रूप से Vue.js में सब कुछ एक घटक है। लेकिन सब कुछ एक पेज नहीं है। एक पृष्ठ में "/ डैशबोर्ड", "/ सेटिंग्स" या "/ खोज" जैसे मार्ग हैं। यदि किसी कंपोनेंट में रूट है तो उसे रूट किया जाता है।
  • store (वैकल्पिक) - Vuex स्थिरांक उत्परिवर्तन-प्रकारों में, सबफ़ोल्डर मॉड्यूल में Vuex मॉड्यूल (जो तब index.js में लोड होते हैं)।
  • अनुवाद (वैकल्पिक) - स्थानीय फ़ाइलें, मैं Vue-i18n का उपयोग करता हूं, और यह बहुत अच्छा काम करता है।
  • बर्तन (वैकल्पिक) - ऐसे कार्य जो मैं कुछ घटकों में उपयोग करता हूं, जैसे कि रेगेक्स मूल्य परीक्षण, स्थिरांक या फ़िल्टर।
  • विचार — इस परियोजना को तेजी से पढ़ने के लिए मैं अलग किए गए घटकों को अलग करता हूं और उन्हें इस फ़ोल्डर में डाल देता हूं। मेरे लिए रूट किए गए घटक एक घटक से अधिक हैं क्योंकि वे पृष्ठों का प्रतिनिधित्व करते हैं और उनके पास मार्ग हैं, मैंने उन्हें "विचारों" में डाल दिया, फिर जब आप किसी पृष्ठ की जांच करते हैं तो आप इस फ़ोल्डर में जाते हैं।

आप अंततः अपनी ज़रूरतों के आधार पर अन्य फ़ोल्डरों को जोड़ सकते हैं जैसे फ़िल्टर, या स्थिरांक, एपीआई।

कुछ संसाधन जिनसे मैं प्रेरित हुआ

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Vue.js के साथ स्मार्ट बनाम गूंगा घटक

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

यदि आप MVC पैटर्न से परिचित हैं, तो आप नियंत्रक को व्यू घटकों और स्मार्ट घटकों की तुलना कर सकते हैं!

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

  • BaseCard
  • AppCard
  • VCard

यदि आपके पास एक स्मार्ट घटक है जो BaseCard का उपयोग करता है और इसमें कुछ विधियाँ जोड़ता है, तो आप उदाहरण के लिए, इसे अपनी परियोजना के आधार पर नाम दे सकते हैं:

  • ProfileCard
  • ItemCard
  • NewsCard

यदि आपका स्मार्ट घटक न केवल विधियों के साथ एक "होशियार" बेसकार्ड है, तो बस किसी भी नाम का उपयोग करें जो आपके घटक को फिट करता है और बिना आधार (या ऐप, या वी) के साथ शुरू किए बिना, उदाहरण के लिए:

  • DashboardStatistics
  • खोज परिणाम
  • उपयोगकर्ता प्रोफ़ाइल

यह नामकरण सम्मेलन Vue.js के आधिकारिक स्टाइलगाइड से आता है जिसमें नामकरण परंपराएँ भी होती हैं!

नामकरण की परंपरा

यहां Vue.js की आधिकारिक स्टाइलगाइड से कुछ परंपराएं आ रही हैं जिन्हें आपको अपनी परियोजना को अच्छी तरह से तैयार करने की आवश्यकता है:

  • घटक नाम हमेशा बहु-शब्द होने चाहिए, रूट "ऐप" घटकों को छोड़कर। उदाहरण के लिए "कार्ड" के बजाय "उपयोगकर्ता कार्ड" या "प्रोफाइलकार्ड" का उपयोग करें।
  • प्रत्येक घटक अपनी फ़ाइल में होना चाहिए।
  • एकल-फ़ाइल घटकों के फ़ाइलनाम या तो हमेशा PascalCase या हमेशा कबाब-केस होने चाहिए। "UserCard.vue" या "user-card.vue" का उपयोग करें।
  • प्रति पृष्ठ केवल एक बार उपयोग किए जाने वाले घटक उपसर्ग "द" से शुरू होने चाहिए, यह बताने के लिए कि केवल एक ही हो सकता है। उदाहरण के लिए एक नावबार या पाद के लिए आपको "TheNavbar.vue" या "TheFooter.vue" का उपयोग करना चाहिए।
  • बाल घटकों में उपसर्ग के रूप में उनके माता-पिता का नाम शामिल होना चाहिए। उदाहरण के लिए यदि आप "यूजर कार्ड" में इस्तेमाल किया गया एक "फोटो" घटक चाहते हैं, तो आप इसे "यूजर कार्डफोटो" नाम देंगे। यह बेहतर पठनीयता के लिए है क्योंकि किसी फ़ोल्डर में फाइलें आमतौर पर वर्णानुक्रम में होती हैं।
  • हमेशा अपने घटकों के नाम में संक्षिप्त नाम के बजाय पूर्ण नाम का उपयोग करें। उदाहरण के लिए "UDSettings" का उपयोग न करें, इसके बजाय "UserDashboardSettings" का उपयोग करें।

Vue.js आधिकारिक स्टाइलगाइड

चाहे आप Vue.js के साथ एक उन्नत या शुरुआत करने वाले हों। इसमें चीजों को करने और न करने के कई उदाहरण हैं।

अगर आपको यह पोस्ट पसंद आया है, तो कृपया अपना समर्थन दिखाने के लिए कृपया कुछ समय के नीचे क्लैप belowबटन पर क्लिक करें! इसके अलावा, बेझिझक टिप्पणी करें और किसी भी तरह की प्रतिक्रिया दें। मुझे फॉलो करना मत भूलना

इस तरह के और अधिक लेख देखना चाहते हैं? Patreon on पर मेरा समर्थन करें