Vue JS je progresívny rámec JavaScriptu, ktorý sa používa na vývoj jednostránkových aplikácií (SPA) a používateľských rozhraní. A je to jeden z najpoužívanejších front-end frameworkov.
Jednou zaujímavou vlastnosťou Vue je jej schopnosť rozdeliť webovú stránku na rôzne komponenty. A tento proces sa stáva jednoduchším s použitím knižníc komponentov používateľského rozhrania.
Existujú rôzne knižnice komponentov používateľského rozhrania, ktoré vám pomôžu vytvoriť komponenty jednoducho a rýchlo. V tomto blogu teda preskúmame 10 najlepších knižníc komponentov používateľského rozhrania Vue na rok 2021.
1. PrimeVue
PrimeVue je jednoducho použiteľná, všestranná a výkonná knižnica komponentov používateľského rozhrania Vue, ktorá vám pomôže vytvoriť úžasné používateľské rozhrania.
Má viac ako 80 komponentov používateľského rozhrania s plnou podporou pravidiel dostupnosti webového obsahu (WCAG) a responzívnym dizajnom. A vďaka nedávnej aktualizácii má knižnica teraz plnú podporu pre Vue 3. Dostala tiež veľa ďalších komponentov.
Jednou z najlepších vecí na Primevue je široká škála komponentov. Pohybujú sa od tabuliek a stránkovačov až po dobre vytvorené organizačné schémy založené na grafoch, ktoré môžete použiť na vytváranie interaktívnych aplikácií Vue. Je to open-source a má viac ako 1 6,983 hviezdičiek na Github a XNUMX XNUMX stiahnutí týždenne na NPM.
2. Vuetify
Vuetify je knižnica používateľského rozhrania Vue s krásne ručne vyrobenými komponentmi, ktorá využíva špecifikáciu Material Design. To znamená, že bol vyvinutý presne podľa špecifikácií Material Design, pričom každý komponent je precízne vyrobený tak, aby bol modulárny, pohotový a výkonný.
Vuetify vám umožňuje prispôsobiť vaše aplikácie jedinečným a dynamickým rozloženiam a zdokonaliť štýly vašich komponentov pomocou premenných SASS.
Podporuje tiež pokyny na prístupnosť, všetky moderné prehliadače a je kompatibilný s Vue CLI-3. Ľahko sa integruje a má veľa opakovane použiteľných komponentov používateľského rozhrania, ako sú karusely, navigácie a karty. Vuetify je open source a má viac ako 29 319,170 hviezdičiek na Github a XNUMX XNUMX týždenných stiahnutí na NPM.
3. Chakra UI Vue
Chakra UI je jednoduchá modulárna a prístupná knižnica komponentov, ktorá vám poskytuje nástroje na rýchle a jednoduché vytváranie aplikácií Vue.
Všetky komponenty sú prístupné (prísne sa riadi štandardmi WAI-ARIA), tematizujú sa a dajú sa skladať. Podporuje responzívne štýly hneď po vybalení a je kompatibilný s tmavým režimom.
Používateľské rozhranie Chakra tiež obsahuje sadu komponentov rozloženia, ako sú CBox a CStack, ktoré uľahčujú štýl vašich komponentov pomocou rekvizít. Umožňuje vám tiež automaticky importovať komponenty Chakra UI Vue pomocou riešenia doplnku webpack. Je to open-source a má 900+ hviezdičiek na Github a 331 týždenných stiahnutí na NPM.
4. Bootstrap Vue
BootstrapVue, S BootstrapVue môžete na webe vytvárať responzívne projekty určené pre mobilné zariadenia a prístupné ARIA pomocou Vue.js a populárnej knižnice CSS – Bootstrap. Dokumentácia je ľahko zrozumiteľná a ľahko sa aj nastavuje. Vďaka tomu sú implementácie front-endu rýchlejšie.
Ponúka viac ako 85 komponentov, viac ako 45 dostupných doplnkov, niekoľko smerníc a viac ako 1000 ikon. Poskytuje tiež funkčné komponenty prispôsobené pre rozloženie a responzívny dizajn. môžete tiež jednoducho integrovať BootstrapVue do svojich projektov Nuxt.js pomocou modulu Nuxt.js.
Používa sa tiež rovnakým spôsobom ako bootstrap CSS framework. Je to open-source na Github s približne 12.9 tisíc hviezdičkami a 1.7 tisíc vidličkami.
5. Vuesax
Vuesax je nový rámec komponentov používateľského rozhrania vytvorený pomocou Vuejs na vytváranie projektov jednoducho a s jedinečným a príjemným štýlom, vuesax je vytvorený od začiatku a určený pre všetky typy vývojárov od milovníkov frontendu až po backend, ktorí chcú ľahko vytvoriť svoj vizuálny prístup k koncového užívateľa. Dizajn je jedinečný pre každý komponent a nie je ukotvený v žiadnych vizuálnych trendoch alebo pravidlách dizajnu, vďaka čomu sú jedinečné aj projekty, ktoré sú s ním postavené.
ponúka responzívne stránky a opakovane použiteľné a prispôsobiteľné komponenty používateľského rozhrania. Je tiež ľahké začať s použitím npm alebo CDN. V súčasnosti nepodporuje Vue CLI 3 vo svojej najnovšej verzii. Je to open-source na Github s približne 4.9 6700 hviezdičkami a XNUMX XNUMX stiahnutiami NPM týždenne.
6. Ant Design Vue
Ant Design vue založený na špecifikácii Ant Design, Ant design vue je knižnica používateľského rozhrania vue, ktorá obsahuje sadu vysokokvalitných komponentov a ukážok na vytváranie bohatých interaktívnych používateľských rozhraní.
Ant-design-vue poskytuje množstvo komponentov používateľského rozhrania, ktoré obohatia vaše webové aplikácie, ako je napríklad kostra, zásuvka, štatistiky a oveľa viac.
S nedávnym vydaním verzie 2 ant design vue bola aktualizovaná, aby bola rýchlejšia a jednoduchšia na integráciu, menšia veľkosť balíka a tiež podporuje Vue 3, dokument New Composition API. Podporuje tiež moderné webové prehliadače, vykresľovanie na strane servera a elektrón. Na Githube má viac ako 13 39,693 hviezdičiek a XNUMX XNUMX týždenných stiahnutí NPM.
7. Kvazar
Quasar je jedným z najlepších rámcov používateľského rozhrania Vue, ktorý umožňuje vývojárom používať jednu základňu zdrojového kódu pre všetky platformy prostredníctvom rozhrania Quasar CLI s osvedčenými postupmi hneď po vybalení. Umožňuje vývojárom zamerať sa na obsah svojej aplikácie a nie na všetky ostatné veci súvisiace s pokovovaním kotla (systém zostavy, rozloženie). je zameraná na dodržiavanie pokynov Material 2.0 a má tiež veľmi podpornú komunitu.
Jednou zo špeciálnych vecí na Quasare je možnosť napísať kód raz a súčasne ho nasadiť ako webovú stránku, mobilnú aplikáciu využívajúcu iba jednu kódovú základňu. V súčasnosti je k dispozícii aj nová verzia, ktorá by podporovala funkcie vue 3. Na Githube má asi 17.8 tisíc hviezd.
8. Buefy
Buefy je ľahká knižnica komponentov používateľského rozhrania pre Vue JS založená na Bulma (rámec CSS). Buefy kombinuje Bulma s Vue, čo vám pomáha vytvárať dobre vyzerajúce aplikácie s použitím minimálneho kódu. je to vrstva javascriptu pre vaše rozhranie Bulma.
Dá sa importovať buď celý, alebo jednotlivé komponenty na obyčajnú webovú stránku. Integrácia do vášho projektu je pomerne jednoduchá, dá sa vykonať pomocou npm alebo CDN.
Buefy poskytuje hotové komponenty používateľského rozhrania, rozloženie a ikony. Komponenty môžu použiť SASS na vašu tému. Podporuje aj moderné prehliadače.
9. Materiál Vue
Vue Material je široko používaný, ľahký rámec, ktorý implementuje špecifikácie Material Design. Je to jedna z najlepších integrácií medzi Vue.js a špecifikáciami Material Design! Pomocou jednoduchého rozhrania API ho môžete ľahko nakonfigurovať tak, aby vyhovoval všetkým vašim potrebám.
Je kompatibilný s responzívnym dizajnom a podporou pre všetky moderné webové prehliadače. Knižnica je rozdelená na témy, komponenty a prvky používateľského rozhrania. Témy poskytujú definitívny návod, ako vytvoriť tému vašej aplikácie (alebo napísať vlastné témy) a komponenty a prvky používateľského rozhrania pozostávajú z rozložení, navigácie, typografie, ikon a ďalších 30 komponentov. Má asi 9.2 1.1 hviezd a 21 XNUMX forkov na Github a XNUMX XNUMX + týždenných stiahnutí NPM.
10. KeenUI
KeenUI je ľahká knižnica používateľského rozhrania vue.js s jednoduchým rozhraním API, inšpirovaná dizajnom materiálov od spoločnosti Google. Keen UI nie je CSS framework. Preto nezahŕňa štýly pre mriežkový systém, typografiu atď. Namiesto toho sa zameriava na interaktívne komponenty, ktoré vyžadujú Javascript.
Má asi 30 opakovane použiteľných komponentov. Komponenty sú prispôsobiteľné prepísaním štýlov pomocou premenných SASS. môžete ho integrovať do svojho projektu buď pomocou CDN alebo npm. Je to open-source a má asi 4 XNUMX hviezd na Github.
záver
Knižnice komponentov používateľského rozhrania určite značne uľahčujú zostavovanie projektu. Výber toho správneho závisí od vlastností projektu, na ktorom chcete pracovať. Pred ponorením sa do nového projektu je vhodné, aby si prezrel knižnicu komponentov používateľského rozhrania, ktorá je na tento účel najvhodnejšia.