A Vue JS egy progresszív JavaScript-keretrendszer, amelyet egyoldalas alkalmazások (SPA-k) és felhasználói felületek fejlesztésére használnak. És ez az egyik legszélesebb körben használt front-end keretrendszer.

 

A Vue egyik érdekes tulajdonsága, hogy képes egy weboldalt különböző összetevőkre bontani. És ez a folyamat egyszerűbbé válik a felhasználói felület komponenskönyvtárainak használatával.

 

Különféle felhasználói felület-összetevő-könyvtárak állnak rendelkezésre, amelyek segítségével könnyen és gyorsan hozhat létre összetevőket. Tehát ebben a blogban áttekintjük a 10-es 2021 legjobb Vue UI komponenskönyvtárat.

 

1. PrimeVue

 

A PrimeVue egy egyszerűen használható, sokoldalú és nagy teljesítményű Vue UI komponenskönyvtár, amely segít nagyszerű felhasználói felületek felépítésében.

 

Több mint 80 felhasználói felület-összetevővel rendelkezik, amelyek teljes mértékben támogatják a webtartalom-kisegítő lehetőségeket (WCAG) és az adaptív tervezést. A legutóbbi frissítésnek köszönhetően pedig a könyvtár teljes mértékben támogatja a Vue 3-at. Egy csomó további összetevőt is kapott.

 

Az egyik legjobb dolog a Primevue-ban az összetevők széles választéka. A táblázatoktól és az oldalszámozóktól a jól kidolgozott grafikon alapú szervezeti diagramokig terjednek, amelyek segítségével interaktív Vue-alkalmazásokat hozhat létre. Nyílt forráskódú, és több mint 1 6,983 csillaggal rendelkezik a Githubon, valamint heti XNUMX letöltést az NPM-en.

 

2. Vuetify

 

A Vuetify egy Vue UI Library gyönyörűen kézzel készített komponensekkel, amely a Material Design specifikációt használja. Ez azt jelenti, hogy pontosan a Material Design specifikációi szerint lett kifejlesztve, és minden alkatrészt aprólékosan úgy alakítottak ki, hogy moduláris, érzékeny és hatékony legyen.

 

A Vuetify segítségével egyedi és dinamikus elrendezésekkel testreszabhatja alkalmazásait, és SASS-változók segítségével tökéletesítheti az összetevők stílusát.

 

Támogatja az akadálymentesítési irányelveket, az összes modern böngészőt, és kompatibilis a Vue CLI-3-mal. Könnyen integrálható, és számos újrafelhasználható felhasználói felület-összetevőt tartalmaz, például körhinta, navigáció és kártya. A Vuetify nyílt forráskódú, több mint 29 319,170 csillaggal a Githubon, és heti XNUMX XNUMX letöltéssel az NPM-en.

 

3. Chakra UI Vue

 

A Chakra UI egy egyszerű moduláris és hozzáférhető komponenskönyvtár, amely eszközöket biztosít a Vue alkalmazások gyors és egyszerű létrehozásához.

 

Az összes komponens hozzáférhető (szigorúan követi a WAI-ARIA szabványokat), tematikus és összeállítható. Támogatja a reszponzív stílusokat, és kompatibilis a sötét móddal.

 

A Chakra UI olyan elrendezési összetevőket is tartalmaz, mint a CBox és a CStack, amelyek megkönnyítik az összetevők stílusát a kellékek átadásával. Lehetővé teszi a Chakra UI Vue összetevők automatikus importálását egy webpack bővítmény segítségével. Nyílt forráskódú, és több mint 900 csillaggal rendelkezik a Githubon, és hetente 331 letöltést az NPM-en.

 

4. Bootstrap Vue

 

BootstrapVue, A BootstrapVue segítségével reszponzív, mobil-első és ARIA-hozzáféréssel elérhető projekteket építhet az interneten a Vue.js és a népszerű CSS-könyvtár, a Bootstrap segítségével. A dokumentáció könnyen érthető, és könnyen beállítható. Gyorsabbá teszi a front-end implementációkat.

 

Több mint 85 összetevőt, több mint 45 elérhető bővítményt, számos direktívát és 1000+ ikont kínál. Az elrendezésekhez és az érzékeny tervezéshez szabott funkcionális összetevőket is biztosít. a BootstrapVue-t könnyedén integrálhatja Nuxt.js projektjeibe a Nuxt.js modul segítségével.

 

Ugyanúgy használják, mint a bootstrap CSS keretrendszert. Nyílt forráskódú a Githubon, körülbelül 12.9 ezer csillaggal és 1.7 ezer villával.

 

5. Vuesax

 

A Vuesax egy új felhasználói felület-összetevő-keretrendszer, amelyet a Vuejs-szal hoztak létre, hogy egyszerűen, egyedi és kellemes stílusban készítsenek projekteket. A vuesax a semmiből jött létre, és minden típusú fejlesztő számára készült, a frontend szerelmeseitől a háttérrendszerekig, akik egyszerűen szeretnék létrehozni vizuális megközelítésüket. a végfelhasználó. A tervek minden egyes komponens esetében egyediek, és nem kötődnek semmilyen vizuális trendhez vagy tervezési szabályhoz, így a vele készült projektek is egyediek.

 

reszponzív oldalakat és újrafelhasználható és testreszabható felhasználói felület-összetevőket kínál. Az npm vagy a CDN használatával is könnyű elkezdeni. Jelenleg nem támogatja a Vue CLI 3 legújabb verzióját. Nyílt forráskódú a Githubon, körülbelül 4.9 ezer csillaggal és heti 6700 letöltéssel.

 

6. Ant Design Vue

 

Az Ant Design vue az Ant Design specifikáción alapul, az Ant design vue egy vue UI könyvtár, amely kiváló minőségű összetevőket és demókat tartalmaz gazdag, interaktív felhasználói felületek létrehozásához.

 

Az Ant-design-vue rengeteg felhasználói felület-összetevőt kínál webalkalmazásainak gazdagításához, mint például a Skeleton, fiók, statisztikák és még sok más.

 

Az ant design vue 2. verziójának közelmúltbeli kiadásával frissítették, hogy gyorsabban és könnyebben integrálható legyen, kisebb csomagmérettel, valamint támogatja a Vue 3, New Composition API dokumentumot is. Támogatja a modern webböngészőket, a szerveroldali renderinget és az elektront is. Több mint 13 39,693 csillagot kapott a Githubon, és heti XNUMX XNUMX NPM letöltéssel.

 

7. Kvazár

 

A Quasar az egyik legjobb Vue UI keretrendszer, amely lehetővé teszi a fejlesztők számára, hogy egyetlen forráskód-alapot használjanak minden platformhoz a Quasar CLI-n keresztül, a bevált gyakorlatokkal. Lehetővé teszi a fejlesztők számára, hogy az alkalmazásuk tartalmára összpontosítsanak a körülötte lévő összes többi kazánbevonattal (rendszer felépítése, elrendezés) helyett. a Material 2.0 irányelveinek követésére összpontosít, és nagyon támogató közösséggel rendelkezik.

 

A Quasar egyik különlegessége az, hogy egyszer kódot írhat, és egyidejűleg telepítheti webhelyként, mobilalkalmazásként, egyetlen kódbázis használatával. Jelenleg béta állapotban van egy új verzió is, amely támogatja a vue 3 funkcióit. Körülbelül 17.8 ezer csillaga van a Githubon.

 

8. Buefy

 

A Buefy egy könnyű UI komponenskönyvtár a Vue JS-hez, amely Bulma-n (egy CSS-keretrendszeren) alapul. A Buefy a Bulmát a Vue-val kombinálja, így minimális kód felhasználásával jó megjelenésű alkalmazásokat hozhat létre. ez a javascript réteg a Bulma felületedhez.

 

Akár teljesen, akár külön-külön is importálható egy közönséges weboldalra. A projektbe való integrálása meglehetősen egyszerű, npm vagy CDN segítségével is megtehető.

 

A Buefy kész felhasználói felület-összetevőket, elrendezést és ikonokat biztosít. Az összetevők használhatják a SASS-t a témához. Támogatja a modern böngészőket is.

 

9. Vue anyag

 

A Vue Material egy széles körben használt, könnyű keretrendszer, amely megvalósítja a Material Design specifikációit. Ez az egyik legjobb integráció a Vue.js és a Material Design specifikációi között! Könnyen beállíthatja, hogy minden igényének megfeleljen egy egyszerű API-n keresztül.

 

Kompatibilis a reszponzív tervezéssel és az összes modern webböngésző támogatásával. A könyvtár Témákra, Összetevőkre és UI-elemekre van felosztva. A témák határozott útmutatót adnak az alkalmazás témázásához (vagy saját témák megírásához), az összetevők és felhasználói felület elemei pedig elrendezéseket, navigációt, tipográfiát, ikonokat és további 30 összetevőt tartalmaznak. Körülbelül 9.2 1.1 csillagot és 21 XNUMX fork-ot tartalmaz a Githubon, valamint XNUMX XNUMX + heti letöltési NPM-et.

 

10. KeenUI

 

A KeenUI egy könnyű vue.js UI-könyvtár, egyszerű API-val, amelyet a Google Material Design ihlette. A Keen UI nem egy CSS-keretrendszer. Ezért nem tartalmazza a rácsrendszerek stílusait, a tipográfiát stb. Ehelyett a Javascriptet igénylő interaktív összetevőkre összpontosít.

 

Körülbelül 30 újrafelhasználható alkatrésze van. Az összetevők testreszabhatók a stílusok SASS-változókkal történő felülbírálásával. CDN vagy npm használatával integrálhatja projektjébe. Nyílt forráskódú, és körülbelül 4k csillaga van a Githubon.

 

Következtetés

 

A felhasználói felület komponenskönyvtárai határozottan megkönnyítik a projekt felépítését. A megfelelő kiválasztása a dolgozni kívánt projekt jellemzőitől függ. Mielőtt belevágna egy új projektbe, tanácsos átnézni a célnak leginkább megfelelő UI komponens könyvtárat.