Vue.js प्रोजेक्टची रचना कशी करावी

बुद्धिमान आणि मूर्ख घटकांसह योग्य फोल्डर संरचना आणि Vue.js ची घटक आर्किटेक्चर

हायपेपेक्षा अधिक, व्ह्यू.जेएस एक उत्कृष्ट फ्रंट एंड फ्रेमवर्क आहे. प्रारंभ करणे आणि वेब अ‍ॅप तयार करणे सोपे आहे. व्ह्यू.जेजला बर्‍याचदा लहान अनुप्रयोगांसाठी एक फ्रेमवर्क म्हणून आणि कधीकधी अगदी jQuery चा पर्याय म्हणून वर्णन केले जाते कारण ते खूपच लहान आहे! व्यक्तिशः, मला असे वाटते की हे मोठ्या प्रकल्पांसाठी देखील योग्य आहे. या प्रकरणात, घटक आर्किटेक्चरच्या दृष्टीने याची रचना चांगली करणे आवश्यक आहे.

माझा पहिला मोठा व्ह्यू.जे.जे प्रकल्प सुरू करण्यापूर्वी, मी अचूक फोल्डर रचना, घटक आर्किटेक्चर आणि नामकरण अधिवेशन शोधण्यासाठी काही संशोधन केले. मी Vue.js दस्तऐवजीकरण, काही लेख आणि बरेच GitHub ओपन सोर्स प्रकल्प पाहिले आहेत.

मला माझ्या काही प्रश्नांची उत्तरे शोधावी लागली. आपण या पोस्टमध्ये ते शोधू शकता:

  • Vue.js प्रोजेक्टमधील फाइल्स आणि फोल्डर्सची रचना आपण कशी करता?
  • आपण स्मार्ट आणि मुका घटक कसे लिहिता आणि आपण ते कोठे ठेवता? ही रिएक्टची संकल्पना आहे.
  • व्ह्यू.जे.ची कोडिंग शैली आणि सर्वोत्तम पद्धती काय आहेत?

मी चांगल्या स्त्रोतासाठी प्रेरित झालेल्या स्त्रोतासह आणि इतर दुव्यांसह दस्तऐवज देखील देईन.

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

येथे src फोल्डरची सामग्री आहे. मी प्रकल्प व्ह्यू सीएलआय ने सुरू करण्याची शिफारस करतो. व्यक्तिशः, मी मानक वेबपॅक टेम्पलेट वापरले.

. .C app.css ├── App.vue ├── मालमत्ता │ │ ... ├── घटक │ │ ... ├── मुख्य.js ├── मिक्सन │ │ ... ├── राउटर │ . Index.js ├── save │ ├── index.js │ ├── मॉड्यूल │ │ └── ... │ │ उत्परिवर्तन-प्रकार.js ├── भाषांतर │ └── index.js ├─ ─ भांडी │ │ ... └── दृश्ये └── ...

या प्रत्येक फोल्डर्सबद्दल काही तपशीलः

  • मालमत्ता - आपण येथे घटकांची आयात केली जाणारी सर्व मालमत्ता ठेवली आहे
  • घटक - प्रकल्पांचे सर्व घटक जे मुख्य दृश्य नाहीत
  • मिक्सिन्स - मिक्सिन्स जावास्क्रिप्ट कोडचे तुकडे आहेत जे विविध घटकांमध्ये पुन्हा वापरल्या जातात. मिक्सिनमध्ये आपण व्ह्यू.जे.एस. वरून प्रत्येक घटकाच्या पद्धती घालू शकता. ते वापरणार्‍या घटकासह विलीन केले जातात.
  • राउटर - आपल्या प्रकल्पांचे सर्व मार्ग (माझ्या बाबतीत माझ्याकडे ते अनुक्रमणिका .js मध्ये आहेत). मुळात Vue.js मधील प्रत्येक गोष्ट एक घटक आहे. पण सर्वच एक बाजू नसतात. पृष्ठाचा मार्ग "/ डॅशबोर्ड", "/ सेटिंग्ज" किंवा "/ शोध" सारखा आहे. एखाद्या घटकास जर मार्ग असेल तर तो अग्रेषित केला जाईल.
  • स्टोअर (पर्यायी) - उत्परिवर्तन-टाइप.जेएस मधील व्ह्यूएक्स स्थिरांक, उप-फोल्डर मॉड्यूलमधील व्ह्यूएक्स मॉड्यूल (जे नंतर इंडेक्स .js मध्ये लोड केले जातात).
  • भाषांतर (पर्यायी) - लोकॅल्स फाईल्स, मी व्ह्यू-आय 18 एन वापरत आहे आणि ते चांगले कार्य करते.
  • उपयोग (पर्यायी) - मी काही घटकांमध्ये वापरणारी कार्ये उदा. ब. रीजेक्स मूल्य चाचण्या, स्थिर किंवा फिल्टर.
  • दृश्ये - प्रोजेक्ट वाचणे सुलभ करण्यासाठी, मी रुटेड घटक विभक्त करुन त्यास या फोल्डरमध्ये ठेवू. माझ्यासाठी मार्ग असलेले घटक ते पृष्ठ दर्शवितात आणि त्यामध्ये मार्ग आहेत अशा घटकांपेक्षा अधिक असतात. मी नंतर त्यांना "दृश्ये" मध्ये ठेवले, आपण एखाद्या पृष्ठाचे पुनरावलोकन करता तेव्हा त्या फोल्डरवर स्विच करा.

आवश्यकतेनुसार आपण इतर फोल्डर्स जोडू शकता, उदा. बी. फिल्टर किंवा निरंतर, एपीआय.

मला प्रेरणा देणारी काही संसाधने

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

व्ही.जे.एस सह स्मार्ट व मुका घटक

स्मार्ट आणि मुका घटक ही मी रिएक्टमधून शिकलेली संकल्पना आहे. हुशार घटकांना कंटेनर देखील म्हणतात. तेच लोक आहेत जे राज्यातील बदलांचा सामना करतात. गोष्टी कशा कार्य करतात याबद्दल आपण जबाबदार आहात. उलटपक्षी, मूर्ख घटक, ज्याला सादरीकरण घटक असेही म्हटले जाते, ते फक्त देखावा घेतात.

एकदा आपण एमव्हीसी नमुन्यांशी परिचित झाल्यानंतर आपण बॅकअप घटकांची दृश्यांसह आणि कंट्रोलरशी स्मार्ट घटकांची तुलना करू शकता!

रिअॅक्टमध्ये स्मार्ट आणि डोंब घटक सामान्यत: वेगवेगळ्या फोल्डर्समध्ये ठेवले जातात, तर व्ह्यू.जेजमध्ये तुम्ही ते सर्व एकाच फोल्डरमध्ये ठेवलेत: घटक. Vue.js. मध्ये फरक करण्यासाठी नामकरण संमेलन वापरा. समजा आपल्याकडे एक मूर्ख कार्ड घटक आहे. नंतर आपण खालील नावांपैकी एक वापरावे:

  • बेसकार्ड
  • अ‍ॅपकार्ड
  • व्हीकार्ड

आपल्याकडे स्मार्टकार्ड आहे जो बेसकार्ड वापरतो आणि त्यामध्ये काही पद्धती जोडतो, आपण आपल्या प्रोजेक्टच्या आधारावर ते नाव देऊ शकता उदाहरणार्थः

  • प्रोफाइलकार्ड
  • आयटमकार्ड
  • न्यूजकार्ड

जर आपला स्मार्ट घटक पद्धतींसह फक्त एक "हुशार" बेसकार्ड नसेल तर बेस (किंवा अॅप किंवा व्ही) प्रारंभ केल्याशिवाय आपल्या घटकास अनुरूप असे कोणतेही नाव वापरा. उदाहरणः

  • डॅशबोर्डस्टॅटिस्टिक्स
  • शोध परिणाम
  • वापरकर्ता प्रोफाइल

हे नामकरण अधिवेशन व्ह्यू.जे.च्या अधिकृत शैली मार्गदर्शकाद्वारे येते, ज्यात नामांकन संमेलने देखील आहेत!

नामकरण करण्याचे नियम

अधिकृत व्ह्यू.जे स्टाईल मार्गदर्शकाकडून येथे काही अधिवेशने आहेत जी आपल्याला आपल्या प्रकल्पाची रचना चांगली करण्याची आवश्यकता असेल:

  • मूळ अॅप घटकांचा अपवाद वगळता घटक नावे नेहमीच एकाधिक शब्दांचा असावा. उदाहरणार्थ, "कार्ड" ऐवजी "यूजरकार्ड" किंवा "प्रोफाइलकार्ड" वापरा.
  • प्रत्येक घटक त्याच्या स्वतःच्या फाइलमध्ये असावा.
  • एकल-फाईल घटकांची फाइल नावे एकतर नेहमीच पास्कलकेस किंवा नेहमीच कबाब-केस असावी. "यूजरकार्ड.व्ह्यू" किंवा "यूजर-कार्ड.व्ह्यू" वापरा.
  • केवळ एकदाच वापरले जाणारे घटक फक्त एक असू शकतात हे दर्शविण्यासाठी "द" उपसर्गापासून प्रारंभ केला पाहिजे. उदाहरणार्थ, नेव्हिगेशन बार किंवा तळटीपसाठी, TheNavbar.vue किंवा TheFooter.vue वापरा.
  • मुलाच्या घटकांनी त्यांचे पालक नाव उपसर्ग केले पाहिजे. उदाहरणार्थ, आपण "यूजरकार्ड" मध्ये "फोटो" घटक वापरू इच्छित असाल तर त्यास "युजरकार्ड फोटो" असे नाव द्या. हे अधिक वाचनीयतेसाठी आहे कारण एखाद्या फोल्डरमधील फायली सहसा अक्षरेनुसार क्रमवारी लावल्या जातात.
  • आपल्या घटकांच्या नावे संक्षिप्तऐवजी पूर्ण नाव वापरा. उदाहरणार्थ, "यूडीएसटीटिंग्ज" वापरू नका, परंतु "यूजरडॅशबोर्ड सेटिंग्स" वापरा.

Vue.js अधिकृत शैली मार्गदर्शक

आपण Vue.js सह प्रगत आहात किंवा नवशिक्या, हा Vue.js शैली मार्गदर्शक वाचला पाहिजे. यामध्ये बर्‍याच टिप्स आणि नामकरण करणार्‍या संमेलने आहेत. यामध्ये केले जाण्याचे आणि न करण्याच्या अनेक उदाहरणे आहेत.

आपण या पोस्टचा आनंद घेत असल्यास, कृपया आपला पाठिंबा दर्शविण्यासाठी काही वेळा खाली गप्पांच्या बटणावर क्लिक करा! तसेच, मोकळ्या मनाने टिप्पणी द्या आणि कोणत्याही प्रकारचे अभिप्राय द्या. मला अनुसरण विसरू नका!

आपण यासारख्या आणखी वस्तू पाहू इच्छिता? पेट्रेओन me वर माझे समर्थन करा