Vue JS ھڪڙو ترقي پسند جاوا اسڪرپٽ فريم ورڪ آھي جيڪو ھڪڙي صفحي جي ايپليڪيشنن (SPAs) ۽ يوزر انٽرفيس کي ترقي ڪرڻ لاء استعمال ڪيو ويندو آھي. ۽ اهو سڀ کان وڏي پيماني تي استعمال ٿيل فرنٽ-اينڊ فريم ورڪ مان هڪ آهي.
Vue جي هڪ دلچسپ خصوصيت اها آهي ته ويب پيج کي مختلف حصن ۾ ٽوڙڻ جي صلاحيت. ۽ اهو عمل UI جزو لائبريرين جي استعمال سان آسان ٿي ويندو آهي.
اتي مختلف UI جزو لائبريريون آھن جيڪي توھان کي آساني سان ۽ جلدي اجزاء ٺاهڻ ۾ مدد ڪري سگھن ٿيون. تنهن ڪري هن بلاگ ۾، اسان جائزو وٺڻ وارا آهيون مٿين 10 Vue UI اجزاء لائبريرين لاءِ 2021.
1. PrimeVue
PrimeVue استعمال ڪرڻ ۾ آسان، ورسٽائل، ۽ پرفارمنٽ Vue UI اجزاء لائبريري جيڪا توهان کي زبردست يوزر انٽرفيس ٺاهڻ ۾ مدد ڪري ٿي.
ان ۾ 80+ کان وڌيڪ UI اجزاء شامل آھن ويب مواد جي رسائي جي ھدايتن (WCAG) ۽ جوابي ڊيزائن لاءِ مڪمل مدد سان. ۽ هڪ تازي تازه ڪاري جي مهرباني، لائبريري هاڻي Vue 3 لاء مڪمل سپورٽ آهي. اهو پڻ هڪ گروپ وڌيڪ اجزاء حاصل ڪيو.
Primevue بابت بهترين شين مان هڪ آهي ان جي اجزاء جو وسيع سلسلو. اهي جدولن ۽ صفحو کان وٺي چڱي طرح ترتيب ڏنل گراف تي ٻڌل تنظيمي چارٽس تائين آهن جيڪي توهان استعمال ڪري سگهو ٿا انٽرايڪٽو Vue ايپس ٺاهڻ لاءِ. اهو کليل ذريعو آهي ۽ Github تي 1k+ ستارا آهن ۽ NPM تي هفتيوار 6,983 ڊائون لوڊ.
2. Vuetify
Vuetify هڪ Vue UI لائبريري آهي جنهن ۾ خوبصورت هٿ سان ٺهيل اجزاء آهن جيڪي مواد جي ڊيزائن جي وضاحت کي استعمال ڪن ٿا. هن جو مطلب اهو آهي ته اهو مڪمل طور تي مادي ڊيزائن جي وضاحتن جي مطابق تيار ڪيو ويو آهي هر جزو سان گڏ ماڊلر، جوابدار، ۽ ڪارڪردگي سان ٺهيل آهي.
Vuetify توهان کي توهان جي ايپليڪيشنن کي منفرد ۽ متحرڪ ترتيب سان ترتيب ڏيڻ جي اجازت ڏئي ٿو ۽ SASS متغير استعمال ڪندي توهان جي اجزاء جي انداز کي مڪمل ڪري ٿو.
اهو پڻ رسائي جي هدايتن کي سپورٽ ڪري ٿو، سڀني جديد برائوزرن، ۽ Vue CLI-3 سان مطابقت رکي ٿو. اهو ضم ڪرڻ آسان آهي ۽ ان ۾ تمام گهڻو ٻيهر استعمال لائق UI جزا آهن جهڙوڪ carousels، نيويگيشن، ۽ ڪارڊ. Vuetify کليل ذريعو آهي ۽ Github تي 29k ستارن ۽ NPM تي هفتيوار 319,170 ڊائون لوڊ سان.
3. چڪر UI Vue
چڪر UI هڪ سادي ماڊلر ۽ رسائي لائق جزو لائبريري آهي جيڪا توهان کي اوزار ڏئي ٿي Vue ايپليڪيشنون ٺاهڻ لاءِ جلدي ۽ آساني سان.
سڀئي جزا دستياب آهن (اهو سختي سان WAI-ARIA معيارن جي پيروي ڪري ٿو)، موضوع جي قابل، ۽ ٺهڪندڙ. اهو باڪس کان ٻاهر جوابي انداز کي سپورٽ ڪري ٿو ۽ ڊارڪ موڊ سان مطابقت رکي ٿو.
چڪر UI ۾ پڻ ترتيب واري اجزاء جو هڪ سيٽ شامل آهي جهڙوڪ CBox ۽ CSStack جيڪي توهان جي اجزاء کي ترتيب ڏيڻ آسان بڻائي ٿو پروپس کي پاس ڪندي. اهو توهان کي خودڪار درآمد ڪرڻ جي اجازت ڏئي ٿو چڪر UI Vue اجزاء استعمال ڪندي ويب پيڪ پلگ ان حل. اهو کليل ذريعو آهي ۽ Github تي 900+ ستارا آهن ۽ NPM تي 331 هفتيوار ڊائون لوڊ.
4. بوٽ اسٽراپ Vue
BootstrapVue، BootstrapVue سان توهان Vue.js ۽ مشهور فرنٽ-اينڊ CSS لائبريري - Bootstrap استعمال ڪندي ويب تي جوابي، موبائل-فرسٽ، ۽ ARIA رسائي لائق پروجيڪٽ ٺاهي سگهو ٿا. دستاويزن کي سمجهڻ آسان آهي ۽ ان کي ترتيب ڏيڻ پڻ آسان آهي. اهو فرنٽ-اينڊ تي عمل درآمد تيز ڪري ٿو.
اهو پيش ڪري ٿو 85+ اجزاء، 45 کان وڌيڪ دستياب پلگ ان، ڪيترائي هدايتون، ۽ 1000+ آئڪن. اهو پڻ فنڪشنل اجزاء مهيا ڪري ٿو جيڪو ترتيب ۽ جوابي ڊيزائن لاء ٺهيل آهي. توھان پڻ آساني سان BootstrapVue کي پنھنجي Nuxt.js پروجيڪٽ ۾ Nuxt.js ماڊل استعمال ڪندي ضم ڪري سگھو ٿا.
اهو پڻ ساڳيو طريقو استعمال ڪيو ويو آهي جيئن بوٽ اسٽراپ CSS فريم ورڪ استعمال ڪيو پيو وڃي. اهو Github تي 12.9k تارن ۽ 1.7k فورڪس سان گڏ کليل ذريعو آهي.
5. ويسڪس
Vuesax ھڪڙو نئون UI جزو فريم ورڪ آھي جيڪو Vuejs سان ٺاھيو ويو آھي پروجيڪٽس کي آساني سان ۽ ھڪڙي منفرد ۽ خوشگوار انداز سان، vuesax شروع کان ٺاھيو ويو آھي ۽ سڀني قسمن جي ڊولپرز لاءِ ٺاھيو ويو آھي فرنٽ اينڊ عاشق کان پس منظر تائين جيڪي آساني سان پنھنجي بصري انداز کي ٺاھيو ٿا چاھين. آخري استعمال ڪندڙ. ڊزائينز هر جزو لاءِ منفرد آهن ۽ ڪنهن به بصري رجحان يا ڊيزائن جي ضابطن سان لنگر انداز نه آهن، انهي سان گڏ ٺاهيل منصوبا پڻ منفرد آهن.
اهو پيش ڪري ٿو جوابي صفحا ۽ ٻيهر استعمال لائق ۽ حسب ضرورت UI اجزاء. اين پي ايم يا سي ڊي اين استعمال ڪرڻ سان شروع ڪرڻ پڻ آسان آهي. اهو في الحال پنهنجي تازي ورزن ۾ Vue CLI 3 کي سپورٽ نٿو ڪري. اهو Github تي کليل ذريعو آهي اٽڪل 4.9k ستارن ۽ 6700 هفتيوار ڊائون لوڊ NPM سان.
6. Ant Design Vue
Ant Design vue Ant Design جي وضاحت جي بنياد تي، Ant design vue هڪ vue UI لائبريري آهي جنهن ۾ اعليٰ معيار جي اجزاء ۽ ڊيمو جو هڪ سيٽ شامل آهي امير، انٽرايڪٽو يوزر انٽرفيس ٺاهڻ لاءِ.
Ant-design-vue توهان جي ويب ايپليڪيشنن جهڙوڪ Skeleton، دراز، شماريات ۽ گهڻو ڪجهه بهتر ڪرڻ لاءِ ڪافي UI اجزاء مهيا ڪري ٿو.
ant design vue ورجن 2 جي تازي رليز سان، ان کي اپڊيٽ ڪيو ويو آھي تيز ۽ آسان ٿيڻ لاءِ ضم ڪرڻ، ننڍو بنڊل سائيز، ۽ پڻ سپورٽ ڪري ٿو Vue 3، New Composition API دستاويز. اهو پڻ سپورٽ ڪري ٿو جديد ويب برائوزر، سرور-سائڊ رينڊرنگ، ۽ اليڪٽران. اهو Github تي 13k تارن کان وڌيڪ آهي ۽ 39,693 هفتيوار ڊائون لوڊ NPM تي.
7. ڪوسار
Quasar ھڪڙو بھترين Vue UI فريم ورڪ آھي جيڪو ڊولپرز کي سڀني پليٽ فارمن لاءِ ھڪڙو سورس ڪوڊ بيس استعمال ڪرڻ جي اجازت ڏئي ٿو Quasar CLI ذريعي بهترين طريقن سان. اهو ڊولپرز کي انهن جي ائپ جي مواد تي ڌيان ڏيڻ جي اجازت ڏئي ٿو بلڪه ان جي چوڌاري ٻين سڀني بوائلر پليٽنگ شين (تعمير سسٽم، ترتيب) جي. اهو مواد 2.0 جي هدايتن تي عمل ڪرڻ تي مرکوز آهي ۽ هڪ تمام مددگار ڪميونٽي پڻ آهي.
Quasar جي باري ۾ هڪ خاص شيءِ هڪ ڀيرو ڪوڊ لکڻ جي صلاحيت آهي ۽ ان سان گڏ ان کي ويب سائيٽ، هڪ موبائيل ايپ طور صرف هڪ ڪوڊ بيس استعمال ڪندي ترتيب ڏيڻ جي صلاحيت آهي. اتي پڻ ھڪڙو نئون ورزن آھي في الحال بيٽا ۾ جيڪو سپورٽ ڪندو vue 3 خاصيتون. اهو Github تي 17.8k تارن بابت آهي.
8. بيوفائي
Buefy بلما (هڪ CSS فريم ورڪ) جي بنياد تي Vue JS لاءِ هڪ ہلڪو وزن UI جزوي لائبريري آهي. Buefy بلما کي Vue سان گڏ ڪري ٿو، توهان کي گهٽ ۾ گهٽ ڪوڊ استعمال ڪندي سٺيون ايپليڪيشنون ٺاهڻ ۾ مدد ڪندي. اهو توهان جي بلما انٽرفيس لاءِ جاوا اسڪرپٽ پرت آهي.
اهو يا ته عام ويب پيج تي مڪمل طور تي يا اڪيلو اجزاء درآمد ڪري سگهجي ٿو. ان کي توهان جي پروجيڪٽ ۾ ضم ڪرڻ بلڪل آسان آهي، يا ته ڪري سگهجي ٿو npm يا CDN استعمال ڪندي.
Buefy مهيا ڪري ٿو تيار ڪيل UI اجزاء، ترتيب، ۽ آئڪن. اجزاء استعمال ڪري سگھن ٿا SASS توهان جي موضوع تي. اهو جديد برائوزرن کي پڻ سپورٽ ڪري ٿو.
9. Vue مواد
Vue مواد هڪ وڏي پيماني تي استعمال ٿيل، هلڪو وزن وارو فريم ورڪ آهي جيڪو مواد جي ڊيزائن جي وضاحتن کي لاڳو ڪري ٿو. اهو Vue.js ۽ مادي ڊيزائن چشمي جي وچ ۾ بهترين انضمام مان هڪ آهي! توهان آساني سان ان کي ترتيب ڏئي سگهو ٿا آسان API ذريعي توهان جي سڀني ضرورتن کي پورو ڪرڻ لاءِ.
اهو سڀني جديد ويب برائوزرن لاءِ جوابي ڊيزائن ۽ سپورٽ سان مطابقت رکي ٿو. لائبريري ۾ ورهايل آهي موضوعات، اجزاء، ۽ UI عناصر. موضوع هڪ حتمي گائيڊ ڏين ٿا ته ڪيئن توهان جي ايپليڪيشن کي موضوع بڻايو وڃي (يا پنهنجا پنهنجا موضوع لکو) ۽ اجزاء ۽ UI عنصرن تي مشتمل آهي ترتيب، نيويگيشن، ٽائپوگرافي، آئڪن، ۽ 30 وڌيڪ اجزاء. ان ۾ اٽڪل 9.2k تارا ۽ 1.1k فورڪس Github ۽ 21k + هفتيوار ڊائون لوڊ NPM تي آهن.
10. KeenUI
KeenUI ھڪڙو ھلڪو وزن آھي vue.js UI لائبريري ھڪڙي سادي API سان، گوگل جي مواد جي ڊيزائن کان متاثر ٿي. Keen UI هڪ CSS فريم ورڪ ناهي. تنهن ڪري، ان ۾ گرڊ سسٽم، ٽائپوگرافي وغيره جا انداز شامل نه آهن. ان جي بدران، ڌيان انٽرايڪٽو اجزاء تي آهي جنهن کي Javascript جي ضرورت آهي.
ان ۾ اٽڪل 30 reusable اجزا آهن. اجزاء SASS متغير استعمال ڪندي طرزن کي ختم ڪندي حسب ضرورت آهن. توھان ان کي پنھنجي پروجيڪٽ ۾ ضم ڪري سگھو ٿا يا ته CDN يا npm استعمال ڪندي. اهو کليل ذريعو آهي ۽ Github تي اٽڪل 4k تارا آهن.
ٿڪل
UI جزو لائبريريون يقيني طور تي هڪ منصوبي کي تعمير ڪرڻ تمام آسان بڻائي ٿو. صحيح چونڊڻ ان منصوبي جي خاصيتن تي منحصر آهي جنهن تي توهان ڪم ڪرڻ چاهيو ٿا. نئين پروجيڪٽ ۾ ڊائيونگ ڪرڻ کان اڳ، هڪ لاءِ صلاح ڏني وئي آهي ته UI جزوي لائبريري جو جائزو وٺو جيڪو مقصد لاءِ بهترين آهي.