2021-yilda ko‘rib chiqilishi kerak bo‘lgan eng yaxshi Vue-UI-komponent kutubxonalari va ramkalar

 

Vue JS - bu bir sahifali ilovalar (SPA) va foydalanuvchi interfeyslarini ishlab chiqish uchun ishlatiladigan progressiv JavaScript tizimi. Va bu eng ko'p ishlatiladigan front-end ramkalardan biridir.

 

Vue-ning qiziqarli xususiyatlaridan biri bu veb-sahifani turli komponentlarga bo'lish qobiliyatidir. Va bu jarayon UI komponentlar kutubxonalaridan foydalanish bilan osonlashadi.

 

Komponentlarni osongina va tez yaratishga yordam beradigan turli xil UI komponentlar kutubxonalari mavjud. Shunday qilib, ushbu blogda biz 10 yil uchun eng yaxshi 2021 Vue UI komponent kutubxonalarini ko'rib chiqamiz.

 

1. PrimeVue

 

PrimeVue - foydalanish uchun oddiy, ko'p qirrali va samarali Vue UI komponentlar kutubxonasi, u sizga ajoyib foydalanuvchi interfeyslarini yaratishga yordam beradi.

 

U 80+ dan ortiq UI komponentlariga ega boʻlib, veb-kontentga kirish boʻyicha koʻrsatmalar (WCAG) va sezgir dizaynni toʻliq qoʻllab-quvvatlaydi. Va so'nggi yangilanish tufayli kutubxona endi Vue 3-ni to'liq qo'llab-quvvatlaydi. Shuningdek, u yana bir qancha komponentlarga ega.

 

Primevue-ning eng yaxshi jihatlaridan biri uning keng doiradagi komponentlaridir. Ular jadvallar va paginatorlardan tortib, interaktiv Vue ilovalarini yaratishda foydalanishingiz mumkin bo'lgan yaxshi yaratilgan grafik asosidagi tashkiliy diagrammalargacha bo'ladi. Bu ochiq manba va Github-da 1k+ yulduz va NPM-da haftasiga 6,983 marta yuklab olinadi.

 

2. Vuetify

 

Vuetify - bu Material Design spetsifikatsiyasidan foydalanadigan chiroyli qo'lda ishlangan komponentlarga ega Vue UI kutubxonasi. Bu shuni anglatadiki, u Moddiy dizayn spetsifikatsiyalariga muvofiq ishlab chiqilgan va har bir komponent modulli, sezgir va samarali bo'lishi uchun puxta ishlab chiqilgan.

 

Vuetify ilovalaringizni noyob va dinamik tartiblar bilan moslashtirish va SASS o'zgaruvchilari yordamida komponentlaringiz uslublarini mukammallashtirish imkonini beradi.

 

Shuningdek, u mavjudlik ko'rsatmalarini, barcha zamonaviy brauzerlarni qo'llab-quvvatlaydi va Vue CLI-3 bilan mos keladi. Uni integratsiya qilish oson va karusellar, navigatsiya va kartalar kabi qayta foydalanish mumkin bo'lgan ko'plab UI komponentlariga ega. Vuetify ochiq manba bo'lib, Github-da 29 mingdan ortiq yulduz va NPM-da haftalik 319,170 XNUMX marta yuklab olinadi.

 

3. Chakra UI Vue

 

Chakra UI oddiy modulli va foydalanish mumkin bo'lgan komponentlar kutubxonasi bo'lib, u sizga Vue ilovalarini tez va oson yaratish vositalarini beradi.

 

Barcha komponentlarga kirish mumkin (u WAI-ARIA standartlariga qat'iy amal qiladi), mavzuga mos va birlashtirilishi mumkin. U javob beruvchi uslublarni qo'llab-quvvatlaydi va qorong'u rejimga mos keladi.

 

Chakra UI, shuningdek, CBox va CStack kabi rekvizitlarni o'tkazish orqali komponentlaringizni uslublashni osonlashtiradigan tartib komponentlari to'plamini o'z ichiga oladi. Shuningdek, u veb-paket plaginlari yechimi yordamida Chakra UI Vue komponentlarini avtomatik import qilish imkonini beradi. Bu ochiq manba va Github-da 900+ yulduz va NPM-da haftada 331 marta yuklab olinadi.

 

4. Bootstrap Vue

 

BootstrapVue, BootstrapVue yordamida siz Vue.js va mashhur CSS kutubxonasi — Bootstrap-dan foydalangan holda vebda sezgir, mobil qurilmalar uchun birinchi va ARIA loyihalarini yaratishingiz mumkin. Hujjatlarni tushunish oson va uni sozlash ham oson. Bu oldingi ilovalarni tezroq bajarishga imkon beradi.

 

U 85+ komponentlar, 45 dan ortiq mavjud plaginlar, bir nechta direktivalar va 1000+ piktogrammalarni taklif etadi. Shuningdek, u tartiblar va sezgir dizayn uchun moslashtirilgan funktsional komponentlarni taqdim etadi. shuningdek, Nuxt.js moduli yordamida BootstrapVue-ni Nuxt.js loyihalaringizga osongina integratsiya qilishingiz mumkin.

 

Bundan tashqari, bootstrap CSS ramkasi ishlatilayotgani kabi ishlatiladi. U Github-da 12.9 ming yulduz va 1.7 ming vilka bilan ochiq manba hisoblanadi.

 

5. Vuesax

 

Vuesax - bu Vuejs yordamida loyihalarni osongina va noyob va yoqimli uslubda amalga oshirish uchun yaratilgan yangi UI komponenti ramkasi, vuesax noldan yaratilgan va o'zining vizual yondashuvini osongina yaratmoqchi bo'lgan barcha turdagi ishlab chiquvchilar uchun mo'ljallangan. oxirgi foydalanuvchi. Dizaynlar har bir komponent uchun noyobdir va hech qanday vizual tendentsiyalarga yoki dizayn qoidalariga bog'liq emas, bu esa u bilan qurilgan loyihalarni ham noyob qiladi.

 

u sezgir sahifalar va qayta ishlatiladigan va sozlanishi UI komponentlarini taklif etadi. Bundan tashqari, npm yoki CDN-dan foydalanishni boshlash oson. Hozirda u so'nggi versiyada Vue CLI 3-ni qo'llab-quvvatlamaydi. U Github-da ochiq manbali, taxminan 4.9 ming yulduz va haftalik 6700 yuklama NPM.

 

6. Ant Design Vue

 

Ant Design spetsifikatsiyasiga asoslangan Ant Design vue, Ant design vue - bu Vue UI kutubxonasi boʻlib, boy, interaktiv foydalanuvchi interfeyslarini yaratish uchun yuqori sifatli komponentlar va demolar toʻplamini oʻz ichiga oladi.

 

Ant-design-vue veb-ilovalaringizni boyitish uchun ko'plab UI komponentlarini taqdim etadi, masalan, Skelet, tortma, statistika va boshqalar.

 

Chumoli dizayni vue 2-versiyasining yaqinda chiqarilishi bilan u tezroq va oson integratsiyalashgan, to‘plam hajmi kichikroq bo‘lishi uchun yangilandi, shuningdek, Vue 3, Yangi kompozitsion API hujjatini qo‘llab-quvvatlaydi. Shuningdek, u zamonaviy veb-brauzerlarni, server tomonidagi Renderingni va elektronni qo'llab-quvvatlaydi. U Github-da 13 mingdan ortiq yulduzga ega va haftalik 39,693 NPM yuklab olinadi.

 

7. Kvazar

 

Quasar - bu eng yaxshi Vue UI ramkalaridan biri bo'lib, ishlab chiquvchilarga Quasar CLI orqali barcha platformalar uchun bitta manba kod bazasidan foydalanishga imkon beradi. Bu ishlab chiquvchilarga uning atrofidagi boshqa qozon qoplamalari (qurilish tizimi, tartib) emas, balki o'zlarining ilovalari tarkibiga e'tibor qaratish imkonini beradi. u Material 2.0 ko'rsatmalariga rioya qilishga qaratilgan va shuningdek, juda qo'llab-quvvatlovchi hamjamiyatga ega.

 

Quasar-ning o'ziga xos jihatlaridan biri bu kodni bir marta yozish va bir vaqtning o'zida uni faqat bitta kod bazasidan foydalangan holda veb-sayt, mobil ilova sifatida joylashtirish qobiliyatidir. Hozirda beta-versiyasida Vue 3 funksiyalarini qo‘llab-quvvatlaydigan yangi versiya ham mavjud. Uning Github-da taxminan 17.8 ming yulduz bor.

 

8. Buefy

 

Buefy - Bulma (CSS ramkasi) asosidagi Vue JS uchun engil UI komponentlar kutubxonasi. Buefy Bulma-ni Vue bilan birlashtiradi, bu sizga minimal kod yordamida chiroyli ilovalar yaratishga yordam beradi. Bu Bulma interfeysingiz uchun JavaScript qatlami.

 

Uni oddiy veb-sahifaga to'liq yoki alohida komponentlar import qilish mumkin. Uni loyihangizga integratsiya qilish juda oson, uni npm yoki CDN yordamida amalga oshirish mumkin.

 

Buefy tayyor UI komponentlari, tartibi va piktogrammalarini taqdim etadi. Komponentlar sizning mavzuingiz uchun SASS dan foydalanishi mumkin. Shuningdek, u zamonaviy brauzerlarni ham qo'llab-quvvatlaydi.

 

9. Vue materiali

 

Vue Material - bu Material Design spetsifikatsiyalarini amalga oshiradigan keng tarqalgan ishlatiladigan, engil ramka. Bu Vue.js va Material Design xususiyatlari o'rtasidagi eng yaxshi integratsiyalardan biri! Oson API orqali uni barcha ehtiyojlaringizga mos ravishda osongina sozlashingiz mumkin.

 

U barcha zamonaviy veb-brauzerlar uchun sezgir dizayn va qo'llab-quvvatlash bilan mos keladi. Kutubxona Mavzular, Komponentlar va UI elementlariga bo'lingan. Mavzular ilovangizni qanday mavzulashtirish (yoki o'z mavzularingizni yozish) bo'yicha aniq qo'llanmani beradi va Komponentlar va UI elementlari tartiblar, navigatsiya, tipografiya, piktogrammalar va yana 30 ta komponentdan iborat. Unda Github-da taxminan 9.2 ming yulduz va 1.1 ming vilkalar va 21 ming + haftalik yuklab olishlar NPM mavjud.

 

10. KeenUI

 

KeenUI - bu oddiy API bilan engil vue.js UI kutubxonasi boʻlib, u Google material dizaynidan ilhomlangan. Keen UI CSS ramkasi emas. Shuning uchun, u grid tizimi, tipografiya va boshqalar uchun uslublarni o'z ichiga olmaydi. Buning o'rniga, Javascriptni talab qiluvchi interaktiv komponentlarga e'tibor qaratiladi.

 

Unda 30 ga yaqin qayta foydalanish mumkin bo'lgan komponentlar mavjud. Komponentlarni SASS o'zgaruvchilari yordamida uslublarni bekor qilish orqali sozlash mumkin. uni CDN yoki npm yordamida loyihangizga integratsiya qilishingiz mumkin. U ochiq manbali va Github-da taxminan 4k yulduzga ega.

 

Xulosa

 

UI komponentlar kutubxonalari, albatta, loyihani yaratishni ancha osonlashtiradi. To'g'ri tanlash siz ishlamoqchi bo'lgan loyihaning xususiyatlariga bog'liq. Yangi loyihaga kirishdan oldin, maqsad uchun eng mos bo'lgan UI komponentlar kutubxonasini ko'rib chiqish tavsiya etiladi.