Vue JS orrialde bakarreko aplikazioak (SPA) eta Erabiltzaile Interfazeak garatzeko erabiltzen den JavaScript esparru progresiboa da. Eta front-end esparrurik erabilienetako bat da.

 

Vue-ren ezaugarri interesgarri bat web-orri bat osagai ezberdinetan banatzeko gaitasuna da. Eta prozesu hau errazagoa bihurtzen da UI osagaien liburutegiak erabiltzearekin.

 

Hainbat UI osagai liburutegi daude osagaiak erraz eta azkar sortzen lagun diezazuketenak. Beraz, blog honetan, 10erako Vue UI osagaien liburutegi nagusiak berrikusiko ditugu.

 

1. PrimeVue

 

PrimeVue Vue UI Component Library erabiltzeko erraza, polifazetikoa eta eraginkorra da, erabiltzaile-interfaze bikainak eraikitzen laguntzen dizuna.

 

80+ UI osagai baino gehiago ditu Web Edukiaren Irisgarritasun Gidalerroetarako (WCAG) eta diseinu sentikorrarekin. Eta azken eguneratze bati esker, liburutegiak Vue 3rako laguntza osoa du orain. Osagai mordo gehiago ere lortu ditu.

 

Primevue-ren gauzarik onenetakoa osagaien aukera zabala da. Tauletatik eta orrigileetatik ondo landutako grafikoetan oinarritutako organigrametaraino daude, Vue aplikazio interaktiboak sortzeko erabil ditzakezun. Kode irekikoa da eta 1k+ izar ditu Github-en eta 6,983 deskarga NPM-n astero.

 

2. Vuetify

 

Vuetify Material Diseinuaren zehaztapena erabiltzen duten eskuz eskuz egindako osagaiak dituen Vue UI liburutegia da. Horrek esan nahi du Materialen Diseinuaren zehaztapenen arabera garatu dela osagai bakoitza modu zorrotzean landuta, modularra, sentikorra eta eraginkorra izateko.

 

Vuetify-k zure aplikazioak diseinu berezi eta dinamikoekin pertsonaliza ditzakezu eta zure osagaien estiloak SASS aldagaiak erabiliz hobetu ditzakezu.

 

Irisgarritasun-gidalerroak ere onartzen ditu, arakatzaile moderno guztiak, eta Vue CLI-3-rekin bateragarria da. Erraza da integratzen eta berrerabil daitezkeen UI osagai asko ditu, hala nola karruselak, nabigazioak eta txartelak. Vuetify kode irekia da eta 29 izar baino gehiago ditu Github-en eta 319,170 deskarga NPM-n astero.

 

3. Chakra UI Vue

 

Chakra UI osagai liburutegi modular eta eskuragarria da, Vue aplikazioak azkar eta erraz eraikitzeko tresnak ematen dizkizuena.

 

Osagai guztiak eskuragarriak dira (WAI-ARIA estandarrak zorrotz jarraitzen ditu), gaikagarriak eta konposagarriak dira. Kutxatik kanpo erantzuteko estiloak onartzen ditu eta modu ilunarekin bateragarria da.

 

Chakra UI-k CBox eta CStack bezalako diseinu-osagai multzo bat ere badu, zure osagaiak estiloa errazten dutenak atrezzoak pasatuz. Chakra UI Vue osagaiak automatikoki inportatzeko aukera ematen du webpack plugin-en irtenbide bat erabiliz. Kode irekikoa da eta 900 izar baino gehiago ditu Github-en eta 331 asteko deskarga NPM-n.

 

4. Bootstrap Vue

 

BootstrapVue, BootstrapVue-rekin, mugikorretarako lehenik eta behin, proiektuak webean eraiki ditzakezu Vue.js eta CSS liburutegi ezaguna - Bootstrap erabiliz. Dokumentazioa erraz ulertzen da eta konfiguratzen ere erraza da. Frontend inplementazioak azkarrago egiten ditu.

 

85+ osagai, eskuragarri dauden 45 plugin baino gehiago, hainbat zuzentarau eta 1000+ ikono eskaintzen ditu. Diseinuetarako eta responsive diseinurako egokitutako osagai funtzionalak ere eskaintzen ditu. BootstrapVue zure Nuxt.js proiektuetan ere erraz integra dezakezu Nuxt.js modulua erabiliz.

 

Bootstrap CSS esparrua erabiltzen den modu berean erabiltzen da. Github-en iturburu irekia da 12.9 mila izar eta 1.7 k sardexka inguru dituena.

 

5. Vuesax

 

Vuesax Vuejs-ekin sortutako UI osagai-esparru berria da, proiektuak erraz eta estilo berezi eta atsegin batekin egiteko, vuesax hutsetik sortua da eta garatzaile mota guztientzako diseinatuta dago, frontend-aren maitaletik hasi eta bere ikuspegi bisuala erraz sortu nahi duten backend-era arte. azken erabiltzailea. Diseinuak osagai bakoitzerako bakarrak dira eta ez daude inongo joera bisualetan edo diseinu-arauetan ainguratuta, horrekin eraikitako proiektuak ere paregabeak bihurtuz.

 

erantzuteko orrialdeak eta UI osagai berrerabilgarriak eta pertsonalizagarriak eskaintzen ditu. Npm edo CDN erabiliz hastea ere erraza da. Gaur egun ez du Vue CLI 3 onartzen azken bertsioan. Github-en iturburu irekia da 4.9k izar inguru eta astero 6700 deskarga NPMrekin.

 

6. Ant Design Vue

 

Ant Design vue Ant Design zehaztapenean oinarrituta, Ant design vue erabiltzaile-interfaze aberats eta interaktiboak eraikitzeko kalitate handiko osagai eta demo multzo bat duen vue UI liburutegia da.

 

Ant-design-vue-k UI osagai ugari eskaintzen ditu zure web aplikazioak aberasteko, hala nola Skeleton, tiradera, estatistikak eta askoz gehiago.

 

Ant design vue 2 bertsioaren berriki argitaratu denez, eguneratu egin da integratzeko azkarragoa eta errazagoa izan dadin, sortaren tamaina txikiagoa izan dadin eta Vue 3, New Composition API dokumentua ere onartzen du. Web arakatzaile modernoak, zerbitzariaren errendaketa eta elektroia ere onartzen ditu. 13k izar baino gehiago ditu Github-en eta asteko 39,693 deskarga NPM-n.

 

7. Quasar

 

Quasar Vue UI esparru onenetako bat da, garatzaileek Quasar CLI-ren bidez plataforma guztietarako iturburu-kode-oinarri bat erabiltzeko aukera ematen dieten praktika onenekin. Garatzaileei beren aplikazioaren edukian zentratzea ahalbidetzen die, inguruko galdaratze-gauza guztietan (eraikuntza-sistema, diseinua) baino. Material 2.0 jarraibideei jarraitzera bideratua dago eta oso komunitate solidarioa ere badu.

 

Quasar-en gauza berezietako bat kodea behin idazteko eta aldi berean webgune gisa zabaltzeko gaitasuna da, mugikorrentzako aplikazio bat kode-base bakarra erabiliz. Beta-n dagoen bertsio berri bat ere badago Vue 3 funtzioak onartzen dituena. 17.8k izar inguru ditu Github-en.

 

8. Buefy

 

Buefy Vue JS-rako UI osagaien liburutegi arina da, Bulma-n oinarrituta (CSS esparru bat). Buefy-k Bulma eta Vue-rekin konbinatzen ditu, gutxieneko kodea erabiliz itxura oneko aplikazioak sortzen lagunduko dizu. zure Bulma interfazearen javascript geruza da.

 

Osorik edo osagai bakarrak inporta daitezke web-orri arrunt batean. Zure proiektuan integratzea nahiko erraza da, npm edo CDN erabiliz egin daiteke.

 

Buefy-k prest egindako UI osagaiak, diseinua eta ikonoak eskaintzen ditu. Osagaiek SASS erabil dezakete zure gairako. Arakatzaile modernoak ere onartzen ditu.

 

9. Vue Material

 

Vue Material oso erabilia den esparru arina da, Materialen Diseinuaren zehaztapenak ezartzen dituena. Vue.js eta Material Design zehaztapenen arteko integrazio onenetako bat da! Erraz konfigura dezakezu zure behar guztietara egokitzeko API erraz baten bidez.

 

Web-arakatzaile moderno guztien diseinu responsivearekin eta laguntzarekin bateragarria da. Liburutegia Gaiak, Osagaiak eta UI Elementuetan banatzen da. Gaiek zure aplikazioaren gaia (edo zure gaiak idazteko) behin betiko gida ematen dute eta Osagaiak eta UI Elementuek diseinuak, nabigazioa, tipografia, ikonoak eta 30 osagai gehiago dituzte. 9.2k izar eta 1.1k sardexka inguru ditu Github-en eta 21k + asteko deskarga NPM.

 

10. KeenUI

 

KeenUI vue.js UI liburutegi arina da, API sinple batekin, Google-ren Material Diseinuan inspiratua. Keen UI ez da CSS esparru bat. Hori dela eta, ez ditu sare-sistema baterako estiloak, tipografiak, etab. Horren ordez, Javascript behar duten osagai interaktiboetan jartzen da arreta.

 

Berrerabil daitezkeen 30 osagai inguru ditu. Osagaiak pertsonaliza daitezke SASS aldagaiak erabiliz estiloak gainidatziz. zure proiektuan integra dezakezu CDN edo npm erabiliz. Kode irekikoa da eta 4k izar inguru ditu Github-en.

 

Ondorioa

 

UI osagaien liburutegiek proiektu bat eraikitzea askoz errazten dute. Egokia aukeratzea landu nahi duzun proiektuaren ezaugarrien araberakoa da. Proiektu berri batean murgildu aurretik, komeni da horretarako egokiena den UI osagaien liburutegia berrikustea.