„Vue JS“ yra progresyvi „JavaScript“ sistema, naudojama kuriant vieno puslapio programas (SPA) ir vartotojo sąsajas. Ir tai yra viena iš plačiausiai naudojamų priekinių sistemų.
Viena įdomi „Vue“ savybė yra galimybė suskaidyti tinklalapį į skirtingus komponentus. Ir šis procesas tampa paprastesnis naudojant vartotojo sąsajos komponentų bibliotekas.
Yra įvairių UI komponentų bibliotekų, kurios gali padėti lengvai ir greitai sukurti komponentus. Taigi šiame tinklaraštyje apžvelgsime 10 geriausių „Vue UI“ komponentų bibliotekų 2021 m.
1. PrimeVue
„PrimeVue“ yra paprasta naudoti, universali ir naši „Vue UI“ komponentų biblioteka, padedanti sukurti nuostabias vartotojo sąsajas.
Jame yra daugiau nei 80 vartotojo sąsajos komponentų, visiškai palaikančių žiniatinklio turinio prieinamumo gaires (WCAG) ir interaktyvų dizainą. Dėl naujausio atnaujinimo biblioteka dabar visiškai palaiko Vue 3. Ji taip pat gavo daug daugiau komponentų.
Vienas geriausių „Primevue“ dalykų yra platus komponentų asortimentas. Jos svyruoja nuo lentelių ir puslapių rinkmenų iki gerai sukurtų diagramomis pagrįstų organizacijos diagramų, kurias galite naudoti kurdami interaktyvias „Vue“ programas. Jis yra atvirojo kodo ir turi 1 6,983 ir daugiau žvaigždučių „Github“ bei XNUMX XNUMX savaitinius atsisiuntimus NPM.
2. Vuetify
„Vuetify“ yra „Vue“ vartotojo sąsajos biblioteka su gražiai rankų darbo komponentais, naudojanti Material Design specifikaciją. Tai reiškia, kad jis buvo sukurtas tiksliai pagal Material Design specifikacijas, o kiekvienas komponentas buvo kruopščiai sukurtas, kad būtų modulinis, jautrus ir našus.
„Vuetify“ leidžia tinkinti programas naudojant unikalius ir dinamiškus išdėstymus ir tobulinti komponentų stilius naudojant SASS kintamuosius.
Jis taip pat palaiko prieinamumo gaires, visas šiuolaikines naršykles ir yra suderinamas su Vue CLI-3. Jį lengva integruoti ir jame yra daug daugkartinio naudojimo vartotojo sąsajos komponentų, pvz., karuselių, navigacijų ir kortelių. „Vuetify“ yra atvirojo kodo, daugiau nei 29 tūkst. žvaigždučių „Github“ ir 319,170 XNUMX savaitinių atsisiuntimų NPM.
3. Chakra UI Vue
„Chakra UI“ yra paprasta modulinė ir prieinama komponentų biblioteka, suteikianti įrankius greitai ir lengvai kurti „Vue“ programas.
Visi komponentai yra prieinami (ji griežtai atitinka WAI-ARIA standartus), teminiai ir komponuojami. Jis palaiko reaguojančius stilius ir yra suderinamas su tamsiuoju režimu.
„Chakra“ vartotojo sąsajoje taip pat yra išdėstymo komponentų, pvz., „CBox“ ir „CStack“, rinkinys, leidžiantis lengvai formuoti komponentus perduodant rekvizitus. Tai taip pat leidžia automatiškai importuoti Chakra UI Vue komponentus naudojant žiniatinklio paketo papildinio sprendimą. Jis yra atvirojo kodo ir turi 900 ir daugiau žvaigždučių „Github“, o NPM atsisiunčiamas 331 savaitę.
4. Bootstrap Vue
„BootstrapVue“, naudodamiesi „BootstrapVue“, galite kurti reaguojančius, pirmiausia mobiliuosius ir ARIA pasiekiamus projektus žiniatinklyje, naudodami Vue.js ir populiarią priekinę CSS biblioteką – „Bootstrap“. Dokumentaciją lengva suprasti ir taip pat lengva nustatyti. Tai leidžia greičiau įdiegti priekinę dalį.
Jame yra daugiau nei 85 komponentai, daugiau nei 45 galimi papildiniai, kelios direktyvos ir 1000 ir daugiau piktogramų. Jame taip pat yra funkcinių komponentų, pritaikytų išdėstymui ir jautriam dizainui. taip pat galite lengvai integruoti BootstrapVue į savo Nuxt.js projektus naudodami Nuxt.js modulį.
Jis taip pat naudojamas taip pat, kaip ir įkrovos CSS sistema. Ji yra atviro kodo „Github“ su maždaug 12.9 tūkst. žvaigždučių ir 1.7 tūkst.
5. Vuesax
„Vuesax“ yra nauja vartotojo sąsajos komponentų sistema, sukurta kartu su „Vuejs“, kad projektai būtų lengvai ir unikalaus bei malonaus stiliaus. „Vuesax“ sukurtas nuo nulio ir skirtas visų tipų kūrėjams nuo priekinės programos mėgėjų iki užpakalinės programos, norinčių lengvai sukurti savo vizualinį požiūrį į galutiniam vartotojui. Kiekvieno komponento dizainai yra unikalūs ir nėra susiję su jokiomis vizualinėmis tendencijomis ar dizaino taisyklėmis, todėl su juo sukurti projektai taip pat yra unikalūs.
ji siūlo reaguojančius puslapius ir daugkartinio naudojimo bei pritaikomus vartotojo sąsajos komponentus. Taip pat lengva pradėti naudoti npm arba CDN. Šiuo metu ji nepalaiko Vue CLI 3 naujausioje versijoje. Ji yra atviro kodo „Github“ su maždaug 4.9 tūkst. žvaigždučių ir 6700 savaitinių atsisiuntimų NPM.
6. Ant Design Vue
„Ant Design vue“, pagrįsta „Ant Design“ specifikacija, „Ant design vue“ yra „vue“ vartotojo sąsajos biblioteka, kurioje yra aukštos kokybės komponentų rinkinys ir demonstracinės versijos, skirtos turtingoms, interaktyvioms vartotojo sąsajoms kurti.
Ant-design-vue suteikia daug vartotojo sąsajos komponentų, kad praturtintų jūsų žiniatinklio programas, tokias kaip skeletas, stalčius, statistika ir dar daugiau.
Neseniai išleidus ant design vue 2 versiją, ji buvo atnaujinta, kad būtų greičiau ir lengviau integruojama, mažesnio paketo dydžio, taip pat palaiko Vue 3, naujos sudėties API dokumentą. Jis taip pat palaiko šiuolaikines žiniatinklio naršykles, serverio atvaizdavimą ir elektronų. Ji turi daugiau nei 13 39,693 žvaigždučių „Github“ ir XNUMX XNUMX savaitinius atsisiuntimus NPM.
7. Kvazaras
„Quasar“ yra viena geriausių „Vue“ vartotojo sąsajos struktūrų, leidžiančių kūrėjams naudoti vieną šaltinio kodo bazę visoms platformoms per „Quasar CLI“ su geriausios praktikos pavyzdžiais. Tai leidžia kūrėjams sutelkti dėmesį į savo programos turinį, o ne į visus kitus katilų dengimo elementus (sistemą, išdėstymą). jis orientuotas į „Material 2.0“ gairių laikymąsi, taip pat turi labai palankią bendruomenę.
Vienas iš ypatingų „Quasar“ dalykų yra galimybė vieną kartą parašyti kodą ir vienu metu įdiegti jį kaip svetainę, mobiliąją programą, naudojant tik vieną kodų bazę. Taip pat šiuo metu yra nauja beta versija, kuri palaiko vue 3 funkcijas. „Github“ turi apie 17.8 tūkst. žvaigždučių.
8. Buefy
„Buefy“ yra lengva „Vue JS“ vartotojo sąsajos komponentų biblioteka, pagrįsta „Bulma“ (CSS sistema). „Buefy“ sujungia „Bulma“ su „Vue“, kad padėtų jums sukurti gražias programas naudojant minimalų kodą. tai „Bulma“ sąsajos javascript sluoksnis.
Jį galima importuoti visiškai arba atskirus komponentus įprastame tinklalapyje. Integruoti jį į savo projektą yra gana paprasta, tai galima padaryti naudojant npm arba CDN.
„Buefy“ pateikia paruoštus vartotojo sąsajos komponentus, išdėstymą ir piktogramas. Komponentai gali naudoti SASS jūsų temai. Tai taip pat palaiko šiuolaikines naršykles.
9. Vue medžiaga
„Vue Material“ yra plačiai naudojama lengva sistema, kuri įgyvendina „Material Design“ specifikacijas. Tai viena geriausių Vue.js ir Material Design specifikacijų integracijos! Galite lengvai sukonfigūruoti jį, kad atitiktų visus savo poreikius, naudodami paprastą API.
Tai suderinama su reaguojančiu dizainu ir visų šiuolaikinių žiniatinklio naršyklių palaikymu. Biblioteka suskirstyta į temas, komponentus ir vartotojo sąsajos elementus. Temos pateikia galutinį vadovą, kaip sukurti temą jūsų programai (arba parašyti savo temas), o komponentus ir vartotojo sąsajos elementus sudaro išdėstymai, naršymas, tipografija, piktogramos ir dar 30 komponentų. Jame yra apie 9.2 1.1 žvaigždučių ir 21 XNUMX šakučių „Github“ ir XNUMX XNUMX + savaitės atsisiuntimų NPM.
10. KeenUI
„KeenUI“ yra lengva vue.js vartotojo sąsajos biblioteka su paprasta API, įkvėpta „Google“ medžiagų dizaino. Keen UI nėra CSS sistema. Todėl jame nėra tinklelio sistemos stilių, tipografijos ir kt. Vietoj to, dėmesys sutelkiamas į interaktyvius komponentus, kuriems reikalingas Javascript.
Jame yra apie 30 daugkartinio naudojimo komponentų. Komponentus galima tinkinti pakeičiant stilius naudojant SASS kintamuosius. galite integruoti jį į savo projektą naudodami CDN arba npm. Tai atvirojo kodo ir „Github“ turi apie 4 XNUMX žvaigždučių.
Išvada
UI komponentų bibliotekos tikrai palengvina projekto kūrimą. Tinkamo pasirinkimo pasirinkimas priklauso nuo projekto, su kuriuo norite dirbti, ypatybių. Prieš pasineriant į naują projektą, patartina peržiūrėti UI komponentų biblioteką, kuri geriausiai tinka šiam tikslui.