Vue JS एक प्रगतिशील JavaScript फ्रेमवर्क हो जुन एकल-पृष्ठ अनुप्रयोगहरू (SPAs) र प्रयोगकर्ता इन्टरफेसहरू विकास गर्न प्रयोग गरिन्छ। र यो त्यहाँ सबैभन्दा व्यापक रूपमा प्रयोग हुने फ्रन्ट-एन्ड फ्रेमवर्कहरू मध्ये एक हो।

 

Vue को एउटा चाखलाग्दो विशेषता भनेको वेबपेजलाई विभिन्न कम्पोनेन्टहरूमा तोड्ने क्षमता हो। र यो प्रक्रिया UI घटक पुस्तकालयहरूको प्रयोग संग सरल हुन्छ।

 

त्यहाँ विभिन्न UI कम्पोनेन्ट लाइब्रेरीहरू छन् जसले तपाईंलाई सजिलै र छिट्टै कम्पोनेन्टहरू सिर्जना गर्न मद्दत गर्न सक्छ। त्यसोभए यस ब्लगमा, हामी २०२१ को लागि शीर्ष १० Vue UI कम्पोनेन्ट लाइब्रेरीहरूको समीक्षा गर्न जाँदैछौं।

 

1. PrimeVue

 

PrimeVue प्रयोग गर्न सरल, बहुमुखी, र प्रदर्शनकारी Vue UI कम्पोनेन्ट लाइब्रेरी हो जसले तपाईंलाई उत्कृष्ट प्रयोगकर्ता इन्टरफेसहरू निर्माण गर्न मद्दत गर्दछ।

 

यसमा वेब सामग्री पहुँच दिशानिर्देशहरू (WCAG) र उत्तरदायी डिजाइनको लागि पूर्ण समर्थन सहित 80+ भन्दा बढी UI कम्पोनेन्टहरू छन्। र भर्खरको अद्यावधिकको लागि धन्यवाद, पुस्तकालयमा अब Vue 3 को लागि पूर्ण समर्थन छ। यसले थप कम्पोनेन्टहरू पनि पाएको छ।

 

Primevue को बारेमा सबै भन्दा राम्रो चीजहरू मध्ये एक यसको कम्पोनेन्टहरूको विस्तृत श्रृंखला हो। तिनीहरू तालिकाहरू र पृष्ठांकनकर्ताहरूबाट राम्ररी क्राफ्ट गरिएको ग्राफ-आधारित संगठन चार्टहरू सम्मका हुन्छन् जुन तपाईंले अन्तरक्रियात्मक Vue एपहरू सिर्जना गर्न प्रयोग गर्न सक्नुहुन्छ। यो खुला स्रोत हो र Github मा 1k+ ताराहरू र NPM मा 6,983 साप्ताहिक डाउनलोडहरू छन्।

 

2. Vuetify

 

Vuetify एउटा Vue UI पुस्तकालय हो जसमा सुन्दर हस्तशिल्प कम्पोनेन्टहरू छन् जसले सामग्री डिजाइन विशिष्टता प्रयोग गर्दछ। यसको मतलब यो हो कि यो ठ्याक्कै मटेरियल डिजाइन विनिर्देशहरू अनुसार विकसित गरिएको छ प्रत्येक कम्पोनेन्टलाई सावधानीपूर्वक मोड्युलर, उत्तरदायी, र प्रदर्शनकारी हुनको लागि बनाइएको छ।

 

Vuetify ले तपाइँलाई तपाइँको अनुप्रयोगहरू अद्वितीय र गतिशील रूपरेखाहरूसँग अनुकूलन गर्न र SASS भ्यारीएबलहरू प्रयोग गरेर तपाइँको कम्पोनेन्टहरूको शैलीहरू पूर्ण गर्न दिन्छ।

 

यसले पहुँच दिशानिर्देशहरू, सबै आधुनिक ब्राउजरहरूलाई समर्थन गर्दछ, र Vue CLI-3 सँग उपयुक्त छ। यसलाई एकीकृत गर्न सजिलो छ र यसमा धेरै पुन: प्रयोज्य UI कम्पोनेन्टहरू छन् जस्तै क्यारोसेल, नेभिगेसन र कार्डहरू। Vuetify खुला स्रोत हो र Github मा 29k ताराहरू र NPM मा 319,170 साप्ताहिक डाउनलोडहरू छन्।

 

3. चक्र UI Vue

 

चक्र UI एक साधारण मोड्युलर र पहुँचयोग्य कम्पोनेन्ट लाइब्रेरी हो जसले तपाईंलाई Vue अनुप्रयोगहरू छिटो र सजिलैसँग निर्माण गर्न उपकरणहरू दिन्छ।

 

सबै कम्पोनेन्टहरू पहुँचयोग्य छन् (यसले WAI-ARIA मापदण्डहरूलाई कडाईका साथ पालना गर्दछ), विषयवस्तु, र कम्पोजेबल। यसले बक्स बाहिर उत्तरदायी शैलीहरूलाई समर्थन गर्दछ र गाढा-मोड उपयुक्त छ।

 

चक्र UI ले CBox र CStack जस्ता लेआउट कम्पोनेन्टहरूको सेट पनि समावेश गर्दछ जसले प्रोप्स पास गरेर तपाइँको कम्पोनेन्टहरूलाई शैली बनाउन सजिलो बनाउँदछ। यसले तपाईंलाई वेबप्याक प्लगइन समाधान प्रयोग गरेर चक्र UI Vue कम्पोनेन्टहरू स्वत: आयात गर्न अनुमति दिन्छ। यो खुला स्रोत हो र Github मा 900+ ताराहरू र NPM मा 331 साप्ताहिक डाउनलोडहरू छन्।

 

4. बुटस्ट्र्याप Vue

 

BootstrapVue, BootstrapVue सँग तपाईंले Vue.js र लोकप्रिय फ्रन्ट-एन्ड CSS लाइब्रेरी — Bootstrap प्रयोग गरेर वेबमा प्रतिक्रियाशील, मोबाइल-पहिलो, र ARIA पहुँचयोग्य परियोजनाहरू निर्माण गर्न सक्नुहुन्छ। कागजात बुझ्न सजिलो छ र यो सेट अप गर्न पनि सजिलो छ। यसले फ्रन्ट-एन्ड कार्यान्वयनलाई छिटो बनाउँछ।

 

यसले 85+ कम्पोनेन्टहरू, 45 भन्दा बढी उपलब्ध प्लगइनहरू, धेरै निर्देशनहरू, र 1000+ आइकनहरू प्रदान गर्दछ। यसले लेआउट र उत्तरदायी डिजाइनको लागि अनुकूल कार्यात्मक घटकहरू पनि प्रदान गर्दछ। तपाइँ Nuxt.js मोड्युल प्रयोग गरेर तपाइँको Nuxt.js परियोजनाहरूमा BootstrapVue लाई सजिलै संग एकीकृत गर्न सक्नुहुन्छ।

 

यो बुटस्ट्र्याप CSS ढाँचाको रूपमा प्रयोग भइरहेको छ। यो Github मा लगभग 12.9k ताराहरू र 1.7k फोर्कहरूको साथ खुला स्रोत हो।

 

5. Vuesax

 

Vuesax एक नयाँ UI कम्पोनेन्ट फ्रेमवर्क हो जुन Vuejs सँग परियोजनाहरू सजिलैसँग र एक अद्वितीय र रमाइलो शैलीको साथ सिर्जना गरिएको हो, vuesax स्क्र्याचबाट सिर्जना गरिएको हो र फ्रन्टएन्ड प्रेमीदेखि ब्याकएन्डसम्म सबै प्रकारका विकासकर्ताहरूका लागि डिजाइन गरिएको हो जसले सजिलैसँग आफ्नो दृश्य दृष्टिकोण सिर्जना गर्न चाहन्छ। अन्तिम प्रयोगकर्ता। डिजाइनहरू प्रत्येक कम्पोनेन्टका लागि अद्वितीय हुन्छन् र कुनै पनि भिजुअल प्रवृति वा डिजाइन नियमहरूमा लंगर हुँदैनन्, यससँग निर्मित परियोजनाहरू पनि अद्वितीय बनाउँछन्।

 

यसले उत्तरदायी पृष्ठहरू र पुन: प्रयोज्य र अनुकूलन योग्य UI कम्पोनेन्टहरू प्रदान गर्दछ। यो पनि npm वा CDN प्रयोग गरेर सुरु गर्न सजिलो छ। यसले हालको संस्करणमा Vue CLI 3 लाई समर्थन गर्दैन। यो Github मा लगभग 4.9k तारा र 6700 साप्ताहिक डाउनलोड NPM संग खुला स्रोत छ।

 

6. कमिला डिजाइन Vue

 

एन्ट डिजाइन विनिर्देशमा आधारित एन्ट डिजाइन भ्यु, एन्ट डिजाइन भ्यु एउटा भ्यु UI पुस्तकालय हो जसमा समृद्ध, अन्तरक्रियात्मक प्रयोगकर्ता इन्टरफेसहरू निर्माण गर्नका लागि उच्च-गुणस्तरका कम्पोनेन्टहरू र डेमोहरूको सेट समावेश हुन्छ।

 

एन्ट-डिजाइन-भ्यूले तपाईंको वेब अनुप्रयोगहरू जस्तै स्केलेटन, ड्रअर, तथ्याङ्क र अन्य धेरैलाई समृद्ध बनाउन धेरै UI कम्पोनेन्टहरू प्रदान गर्दछ।

 

एन्टि डिजाइन vue संस्करण 2 को भर्खरै रिलीज संग, यसलाई छिटो र एकीकृत गर्न सजिलो, सानो बन्डल आकार, र Vue 3, नयाँ रचना API कागजातलाई पनि समर्थन गर्न अद्यावधिक गरिएको छ। यसले आधुनिक वेब ब्राउजरहरू, सर्भर-साइड रेन्डरिङ, र इलेक्ट्रोनलाई पनि समर्थन गर्दछ। Github मा र 13 साप्ताहिक डाउनलोड NPM मा 39,693k भन्दा बढी ताराहरू छन्।

 

७९. क्वासर

 

Quasar उत्कृष्ट Vue UI फ्रेमवर्कहरू मध्ये एक हो जसले विकासकर्ताहरूलाई Quasar CLI मार्फत सबै प्लेटफर्महरूका लागि एउटा स्रोत कोड आधार प्रयोग गर्न अनुमति दिन्छ। यसले विकासकर्ताहरूलाई यसको वरिपरि अन्य सबै बॉयलर प्लेटिङ सामग्री (बिल्ड सिस्टम, लेआउट) भन्दा उनीहरूको एपको सामग्रीमा फोकस गर्न दिन्छ। यो सामग्री 2.0 दिशानिर्देशहरू पछ्याउनमा केन्द्रित छ र धेरै सहयोगी समुदाय पनि छ।

 

Quasar को बारे मा एक विशेष चीज एक पटक कोड लेख्ने क्षमता र एकै साथ एक वेबसाइट को रूप मा प्रयोग गर्न को लागी एक मोबाइल एप को एक कोडबेस को उपयोग गरीएको छ। हाल बिटामा नयाँ संस्करण पनि छ जसले vue 3 सुविधाहरू समर्थन गर्दछ। यसको Github मा लगभग 17.8k ताराहरू छन्।

 

8. Buefy

 

Buefy Bulma (एक CSS फ्रेमवर्क) मा आधारित Vue JS को लागि हल्का UI कम्पोनेन्ट पुस्तकालय हो। Buefy ले Bulma लाई Vue सँग जोड्दछ, तपाईंलाई न्यूनतम कोड प्रयोग गरेर राम्रो देखिने अनुप्रयोगहरू निर्माण गर्न मद्दत गर्दछ। यो तपाईको Bulma इन्टरफेसको लागि जाभास्क्रिप्ट तह हो।

 

यो या त पूर्ण रूपमा आयात गर्न सकिन्छ वा साधारण वेबपेजमा एकल कम्पोनेन्टहरू। यसलाई तपाइँको परियोजना मा एकीकरण गर्न धेरै सजिलो छ, या त npm वा CDN प्रयोग गरेर गर्न सकिन्छ।

 

Buefy ले तयार UI कम्पोनेन्टहरू, लेआउट र आइकनहरू प्रदान गर्दछ। कम्पोनेन्टहरूले तपाईंको विषयवस्तुमा SASS प्रयोग गर्न सक्छन्। यसले आधुनिक ब्राउजरहरूलाई पनि समर्थन गर्दछ।

 

9. Vue सामग्री

 

Vue सामग्री एक व्यापक रूपमा प्रयोग गरिएको, हल्का वजन फ्रेमवर्क हो जसले सामग्री डिजाइन विशिष्टताहरू लागू गर्दछ। यो Vue.js र सामग्री डिजाइन चश्मा बीच सबै भन्दा राम्रो एकीकरण हो! तपाइँ सजिलै संग एक सजिलो API को माध्यम बाट तपाइँको सबै आवश्यकताहरु को लागी यसलाई कन्फिगर गर्न सक्नुहुन्छ।

 

यो सबै आधुनिक वेब ब्राउजरहरूको लागि उत्तरदायी डिजाइन र समर्थन संग उपयुक्त छ। पुस्तकालय विषयवस्तुहरू, अवयवहरू, र UI तत्वहरूमा विभाजित छ। विषयवस्तुहरूले तपाइँको एप्लिकेसन (वा तपाइँको आफ्नै विषयवस्तुहरू लेख्नुहोस्) कसरी विषयवस्तु बनाउने भन्ने बारे निश्चित मार्गनिर्देशन दिन्छ र कम्पोनेन्टहरू र UI तत्वहरूमा लेआउट, नेभिगेसन, टाइपोग्राफी, आइकनहरू, र 30 थप कम्पोनेन्टहरू हुन्छन्। यसमा Github र 9.2k + साप्ताहिक डाउनलोड NPM मा लगभग 1.1k ताराहरू र 21k फोर्कहरू छन्।

 

10. KeenUI

 

KeenUI गुगलको मटेरियल डिजाइनबाट प्रेरित सरल एपीआई भएको हल्का वजनको vue.js UI पुस्तकालय हो। Keen UI CSS फ्रेमवर्क होइन। त्यसकारण, यसले ग्रिड प्रणाली, टाइपोग्राफी, आदिका लागि शैलीहरू समावेश गर्दैन। बरु, जाभास्क्रिप्ट आवश्यक पर्ने अन्तरक्रियात्मक घटकहरूमा फोकस हुन्छ।

 

यसमा लगभग 30 पुन: प्रयोज्य कम्पोनेन्टहरू छन्। कम्पोनेन्टहरू SASS चरहरू प्रयोग गरी शैलीहरूलाई ओभरराइड गरेर अनुकूलन योग्य छन्। तपाइँ यसलाई तपाइँको परियोजना मा या त CDN वा npm प्रयोग गरेर एकीकृत गर्न सक्नुहुन्छ। यो खुला स्रोत हो र Github मा लगभग 4k ताराहरू छन्।

 

निष्कर्ष

 

UI घटक पुस्तकालयहरूले निश्चित रूपमा परियोजना निर्माण गर्न धेरै सजिलो बनाउँदछ। सही छनोट गर्नु भनेको तपाईंले काम गर्न चाहनुभएको परियोजनाका सुविधाहरूमा निर्भर गर्दछ। नयाँ परियोजनामा ​​जान अघि, यो उद्देश्यको लागि सबैभन्दा उपयुक्त UI कम्पोनेन्ट पुस्तकालयको समीक्षा गर्न सल्लाह दिइन्छ।