Top-Vue-UI-Component-Libraries-ug-Frameworks-aron-Hunahunaon-sa-2021

 

Ang Vue JS usa ka progresibong JavaScript framework nga gigamit sa pag-develop og single-page applications (SPAs) ug User Interfaces. Ug kini usa sa labing kaylap nga gigamit nga front-end frameworks didto.

 

Usa ka makapaikag nga bahin sa Vue mao ang abilidad niini sa pagbungkag sa usa ka webpage sa lainlaing mga sangkap. Ug kini nga proseso nahimong mas simple sa paggamit sa UI component library.

 

Adunay lainlaing mga librarya sa sangkap sa UI nga makatabang kanimo sa paghimo sa mga sangkap nga dali ug dali. Mao nga sa kini nga blog, susihon namon ang nanguna nga 10 Vue UI Component Libraries para sa 2021.

 

1. PrimeVue

 

Ang PrimeVue usa ka yano nga gamiton, versatile, ug performant nga Vue UI Component Library nga nagtabang kanimo sa paghimo og nindot nga mga user interface.

 

Kini adunay sobra sa 80+ nga mga sangkap sa UI nga adunay bug-os nga suporta alang sa Web Content Accessibility Guidelines (WCAG) ug responsive nga disenyo. Ug salamat sa usa ka bag-o nga update, ang librarya karon adunay bug-os nga suporta alang sa Vue 3. Nakakuha usab kini usa ka hugpong nga dugang nga mga sangkap.

 

Usa sa labing kaayo nga butang bahin sa Primevue mao ang halapad nga mga sangkap. Nagkalainlain sila gikan sa mga lamesa ug mga paginator hangtod sa maayong pagkabuhat nga mga tsart sa organisasyon nga nakabase sa graph nga mahimo nimong magamit sa paghimo og mga interactive nga Vue apps. Kini open-source ug adunay 1k+ ka bituon sa Github ug 6,983 ka senemanang pag-download sa NPM.

 

2. Vuetify

 

Ang Vuetify usa ka Vue UI Library nga adunay nindot nga hinimo nga mga sangkap nga naggamit sa detalye sa Disenyo sa Materyal. Kini nagpasabut nga kini naugmad sa eksakto sumala sa mga detalye sa Disenyo sa Materyal nga ang matag sangkap nga makuti nga gihimo aron mahimong modular, responsive, ug performant.

 

Gitugotan ka sa Vuetify nga ipasadya ang imong mga aplikasyon nga adunay talagsaon ug dinamikong mga layout ug mahingpit ang mga istilo sa imong mga sangkap gamit ang mga variable sa SASS.

 

Gisuportahan usab niini ang mga giya sa pag-access, tanan nga modernong browser, ug nahiuyon sa Vue CLI-3. Sayon nga i-integrate ug adunay daghang magamit nga mga sangkap sa UI sama sa mga carousel, nabigasyon, ug mga kard. Ang Vuetify bukas nga tinubdan ug adunay kapin sa 29k ka bituon sa Github ug 319,170 ka senemanang pag-download sa NPM.

 

3. Chakra UI Vue

 

Ang Chakra UI usa ka yano nga modular ug accessible nga librarya sa sangkap nga naghatag kanimo mga himan sa paghimo sa mga aplikasyon sa Vue nga dali ug dali.

 

Ang tanan nga mga sangkap ma-access (kini higpit nga nagsunod sa mga sumbanan sa WAI-ARIA), ma-themeable, ug composable. Gisuportahan niini ang mga istilo sa pagtubag nga wala sa kahon ug nahiuyon sa dark-mode.

 

Naglangkob usab ang Chakra UI usa ka set sa mga sangkap sa layout sama sa CBox ug CStack nga nagpadali sa pag-istilo sa imong mga sangkap pinaagi sa pagpasa sa mga props. Gitugotan ka usab nga mag-auto-import sa mga sangkap sa Chakra UI Vue gamit ang solusyon sa plugin sa webpack. Kini open-source ug adunay 900+ ka bituon sa Github ug 331 ka semana nga pag-download sa NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Uban sa BootstrapVue makahimo ka og responsive, mobile-first, ug ARIA accessible nga mga proyekto sa web gamit ang Vue.js ug ang sikat nga front-end CSS library — Bootstrap. Sayon sabton ang dokumentasyon ug sayon ​​sab nga i-set up. Gihimo niini nga mas paspas ang mga pagpatuman sa front-end.

 

Nagtanyag kini og 85+ nga mga sangkap, sobra sa 45 nga magamit nga mga plugin, daghang mga direktiba, ug 1000+ nga mga icon. Naghatag usab kini og mga functional nga sangkap nga gipahaum alang sa mga layout ug responsive nga disenyo. dali ra usab nimong i-integrate ang BootstrapVue sa imong mga proyekto sa Nuxt.js gamit ang module sa Nuxt.js.

 

Gigamit usab kini sa samang paagi nga gigamit ang bootstrap CSS framework. Open-sourced kini sa Github nga adunay mga 12.9k nga bituon ug 1.7k nga tinidor.

 

5. Vuesax

 

Ang Vuesax usa ka bag-ong gambalay sa component sa UI nga gihimo uban sa Vuejs aron makahimo og mga proyekto nga dali ug uban sa talagsaon ug makapahimuot nga estilo, ang vuesax gimugna gikan sa scratch ug gidisenyo alang sa tanang matang sa mga developers gikan sa frontend lover ngadto sa backend kinsa gusto nga dali nga makahimo sa ilang biswal nga pamaagi sa ang end-user. Ang mga disenyo talagsaon alang sa matag component ug wala nakaangkla sa bisan unsang biswal nga uso o mga lagda sa disenyo, nga naghimo sa mga proyekto nga gitukod uban niini nga talagsaon usab.

 

nagtanyag kini mga responsive nga panid ug magamit pag-usab ug napasadya nga mga sangkap sa UI. Sayon usab ang pagsugod gamit ang npm o CDN. Sa pagkakaron wala kini nagsuporta sa Vue CLI 3 sa bag-o nga bersyon niini. Open-sourced kini sa Github nga adunay mga 4.9k nga bituon ug 6700 ka senemanang pag-download sa NPM.

 

6. Ant Design Vue

 

Ang Ant Design vue nga gibase sa espesipikasyon sa Ant Design, ang Ant design vue usa ka vue UI library nga adunay usa ka hugpong sa mga de-kalidad nga sangkap ug mga demo para sa paghimo og adunahan, interactive nga mga interface sa user.

 

Ang Ant-design-vue naghatag daghang mga sangkap sa UI aron mapauswag ang imong mga aplikasyon sa web sama sa Skeleton, drawer, estadistika ug daghan pa.

 

Uban sa bag-o nga pagpagawas sa ant design vue nga bersyon 2, kini gi-update aron mahimong mas paspas ug mas sayon ​​nga i-integrate, mas gamay nga gidak-on sa bundle, ug nagsuporta usab sa Vue 3, New Composition API nga dokumento. Gisuportahan usab niini ang mga modernong web browser, Pag-render sa kilid sa server, ug elektron. Kini adunay sobra sa 13k nga mga bituon sa Github ug sa 39,693 ka semana nga pag-download sa NPM.

 

7. Quasar

 

Ang Quasar usa sa labing kaayo nga Vue UI frameworks nga nagtugot sa mga developers sa paggamit sa usa ka source code base alang sa tanan nga mga platform pinaagi sa Quasar CLI nga adunay labing maayo nga mga gawi sa gawas sa kahon. Gitugotan niini ang mga developer nga mag-focus sa sulud sa ilang App kaysa sa tanan nga uban pang mga butang nga nagbutang sa boiler (pagtukod nga sistema, layout) sa palibot niini. kini naka-focus sa pagsunod sa Materyal nga 2.0 nga mga giya ug usab adunay usa ka matinabangon kaayo nga komunidad.

 

Usa sa mga espesyal nga butang bahin sa Quasar mao ang abilidad sa pagsulat sa code kausa ug dungan nga i-deploy kini ingon usa ka website, usa ka Mobile App gamit ang usa lang ka codebase. Adunay usab usa ka bag-ong bersyon nga karon sa beta nga mosuporta sa vue 3 nga mga bahin. Adunay kini mga 17.8k nga bituon sa Github.

 

8. Buefy

 

Ang Buefy usa ka gaan nga UI component library para sa Vue JS base sa Bulma (usa ka CSS framework). Gikombinar ni Buefy ang Bulma sa Vue, nga nagtabang kanimo sa paghimo og nindot nga mga aplikasyon gamit ang gamay nga code. kini ang javascript layer para sa imong Bulma interface.

 

Mahimo kini nga ma-import sa hingpit o usa nga sangkap sa usa ka ordinaryo nga webpage. Ang pag-integrate niini sa imong proyekto sayon ​​ra, mahimo gamit ang npm o CDN.

 

Naghatag ang Buefy og andam nga mga sangkap sa UI, layout, ug mga icon. Ang mga sangkap makagamit sa SASS sa imong tema. Gisuportahan usab niini ang mga modernong browser.

 

9. Vue nga Materyal

 

Ang Vue Material kay kaylap nga gigamit, gaan nga balangkas nga nagpatuman sa mga detalye sa Disenyo sa Materyal. Usa kini sa labing kaayo nga panagsama tali sa Vue.js ug Material Design specs! Dali nimo kini ma-configure aron mahiangay sa tanan nimo nga mga kinahanglanon pinaagi sa usa ka dali nga API.

 

Nahiuyon kini sa responsive nga disenyo ug suporta alang sa tanang modernong Web Browser. Ang librarya gibahin sa Mga Tema, Mga Bahagi, ug Mga Elemento sa UI. Ang mga tema naghatag usa ka piho nga giya kung giunsa ang pag-tema sa imong aplikasyon (o pagsulat sa imong kaugalingon nga mga tema) ug ang Mga Bahagi ug Mga Elemento sa UI naglangkob sa mga layout, nabigasyon, typography, mga icon, ug 30 pa nga mga sangkap. Adunay kini mga 9.2k nga bituon ug 1.1k nga tinidor sa Github ug 21k + kada semana nga pag-download sa NPM.

 

10. KeenUI

 

Ang KeenUI usa ka gaan nga vue.js UI library nga adunay usa ka yano nga API, dinasig sa Disenyo sa Materyal sa Google. Ang Keen UI dili usa ka CSS framework. Busa, wala kini naglakip sa mga estilo alang sa grid system, typography, ug uban pa. Hinunoa, ang focus kay sa interactive nga mga component nga nagkinahanglan og Javascript.

 

Kini adunay mga 30 nga magamit pag-usab nga mga sangkap. Ang mga sangkap napasadya pinaagi sa pag-override sa mga istilo gamit ang mga variable sa SASS. mahimo nimong i-integrate kini sa imong proyekto gamit ang CDN o npm. Kini open-sourced ug adunay mga 4k nga bituon sa Github.

 

Panapos

 

Ang mga librarya sa component sa UI siguradong naghimo sa pagtukod sa usa ka proyekto nga mas sayon. Ang pagpili sa husto nagdepende sa mga bahin sa proyekto nga gusto nimong buhaton. Sa dili pa mosalom sa usa ka bag-ong proyekto, mas maayo nga susihon sa usa ang librarya sa sangkap sa UI nga labing angay alang sa katuyoan.