Vue JS çarçoveyek JavaScriptê ya pêşkeftî ye ku ji bo pêşdebirina serîlêdanên yek-rûpel (SPA) û Navrûyên Bikarhêner tê bikar anîn. Û ew yek ji wan çarçoveyên pêşîn ên herî berfireh ên ku li wir têne bikar anîn e.
Taybetmendiyek balkêş a Vue ev e ku meriv rûpelek malperek li beşên cihêreng veqetîne. Û ev pêvajo bi karanîna pirtûkxaneyên hêmanên UI re hêsantir dibe.
Pirtûkxaneyên pêkhateyên UI yên cihêreng hene ku dikarin ji we re bibin alîkar ku hûn hêmanan bi hêsanî û zû biafirînin. Ji ber vê yekê di vê blogê de, em ê ji bo 10-ê 2021 Pirtûkxaneyên Pêkhateyên Vue UI yên top binirxînin.
1. PrimeVue
PrimeVue pirtûkxaneyek Pêvek a Vue UI ya hêsan e, pirreng û performansa ye ku ji we re dibe alîkar ku hûn navgînên bikarhêner ên hêja ava bikin.
Zêdetirî 80 pêkhateyên UI-yê bi piştgirîya bêkêmasî ya Rêbernameyên Gihîştina Naveroka Webê (WCAG) û sêwirana bersivdar heye. Û bi saya nûvekirinek vê dawîyê, pirtûkxane niha ji bo Vue 3 piştgirîya tam heye. Di heman demê de komek hêmanên din jî stend.
Yek ji çêtirîn tiştên li ser Primevue beşên wê yên berfireh e. Ew ji tablo û paginatoran bigire heya nexşeyên rêxistinî yên li ser bingeha grafikên xweş-çêkirî yên ku hûn dikarin bikar bînin da ku serîlêdanên Vue-ya înteraktîf biafirînin. Ew çavkaniya vekirî ye û 1k+ stêrk li ser Github û 6,983 dakêşanên heftane li ser NPM hene.
2. Vuetify
Vuetify Pirtûkxaneyek UI ya Vue ye ku bi pêkhateyên bi destan ên xweşik ve hatî çêkirin e ku taybetmendiya sêwirana materyalê bikar tîne. Ev tê vê wateyê ku ew tam li gorî taybetmendiyên Sêwirana Materyalê bi her pêkhateyek ku bi hûrgulî hatî çêkirin ve hatî çêkirin ku modular, bersivdar û performansek be.
Vuetify dihêle hûn serîlêdanên xwe bi sêwiranên bêhempa û dînamîkî xweş bikin û şêwazên pêkhateyên xwe bi karanîna guhêrbarên SASS-ê temam bikin.
Di heman demê de ew rêwerzên gihîştinê, hemî gerokên nûjen piştgirî dike, û bi Vue CLI-3 re hevaheng e. Yekbûnek hêsan e û xwedan gelek hêmanên UI-ya ji nû ve-bikaranîna mîna carousel, navîgasyon û qertan hene. Vuetify çavkaniyek vekirî ye û bi zêdetirî 29 hezar stêrk li ser Github û 319,170 dakêşanên heftane li ser NPM.
3. Chakra UI Vue
Chakra UI pirtûkxaneyek hêmanek moduler û gihîştî ya hêsan e ku amûran dide we ku hûn zû û bi hêsanî serîlêdanên Vue ava bikin.
Hemî hêman gihîştî ne (ew bi hişkî standardên WAI-ARIA dişopîne), mijar, û berhevkirî ne. Ew şêwazên bersivdar ên derveyî piştgirî dike û bi moda tarî re hevaheng e.
Chakra UI di heman demê de komek hêmanên sêwiranê yên mîna CBox û CStack jî vedihewîne ku bi derbaskirina pêşniyaran şêwaza pêkhateyên xwe hêsan dike. Di heman demê de ew dihêle hûn bi karanîna çareseriyek pêveka webpack-ê hêmanên Chakra UI Vue-ê bixwe-îtxal bikin. Ew çavkaniya vekirî ye û 900+ stêrk li ser Github û 331 dakêşanên heftane li ser NPM hene.
4. Bootstrap Vue
BootstrapVue, Bi BootstrapVue re hûn dikarin bi karanîna Vue.js û pirtûkxaneya CSS-ya pêşîn a populer - Bootstrap, projeyên bersivdar, yekem-mobîl, û ARIA-ya gihîştî li ser malperê ava bikin. Fêmkirina belgeyê hêsan e û sazkirina wê jî hêsan e. Ew pêkanînên pêş-endê zûtir dike.
Ew 85+ hêman, zêdetirî 45 pêvekên berdest, çend rêwerzan, û 1000+ îkonan pêşkêşî dike. Di heman demê de ew hêmanên fonksiyonel ên ku ji bo sêwiran û sêwirana bersivdar hatine çêkirin peyda dike. Her weha hûn dikarin bi hêsanî BootstrapVue-ê bi karanîna modula Nuxt.js-ê di projeyên xwe yên Nuxt.js de yek bikin.
Di heman demê de ew bi heman rengî tête bikar anîn ku çarçoveya bootstrap CSS-ê tê bikar anîn. Ew li ser Github-ê bi qasî 12.9k stêrk û 1.7k qalikan vekirî ye.
5. Vuesax
Vuesax çarçoveyek nû ya pêkhateya UI-yê ye ku bi Vuejs-ê ve hatî çêkirin da ku projeyan bi hêsanî û bi şêwazek bêhempa û xweş çêbike, vuesax ji sifirê ve hatî afirandin û ji bo her cûre pêşdebiran ji evîndarê pêşîn heya paşîn hatî çêkirin ku dixwaze bi hêsanî nêzîkatiya xwe ya dîtbarî biafirîne. bikarhênerê dawî. Sêwiran ji bo her pêkhateyê bêhempa ne û bi ti meylên dîtbarî an qaîdeyên sêwiranê ve girêdayî ne, projeyên ku bi wê re hatine çêkirin jî yekta dikin.
ew rûpelên bersivdar û hêmanên UI-ya ji nû ve bi kar anîn û xwerû pêşkêşî dike. Di heman demê de hêsan e ku meriv bi karanîna npm an CDN-ê jî dest pê bike. Ew naha di guhertoya xweya paşîn de Vue CLI 3 piştgirî nake. Ew li ser Github-ê bi qasî 4.9k stêrk û 6700 dakêşanên heftane yên NPM-yê vekirî-vekirî ye.
6. Ant Design Vue
Ant Design vue ku li ser bingeha taybetmendiya Ant Design-ê ye, Ant design vue pirtûkxaneyek UI-ya vue ye ku ji bo avakirina navgînên bikarhêner ên dewlemend û înteraktîf komek pêkhate û demo-kalîteya bilind vedihewîne.
Ant-design-vue gelek hêmanên UI peyda dike da ku serîlêdanên weba we yên wekî Skeleton, drok, statîstîk û hêj bêtir dewlemend bike.
Bi serbestberdana dawî ya ant design vue guhertoya 2-ê re, ew hatî nûve kirin da ku zûtir û hêsantir tevbigerin, mezinahiya pakêtê piçûktir, û di heman demê de Vue 3, belgeya API-ya Pêkhatina Nû jî piştgirî dike. Di heman demê de ew gerokên webê yên nûjen, Rendering-side-server, û elektron piştgirî dike. Li ser Github û li ser 13 dakêşanên heftane yên NPM zêdetirî 39,693 hezar stêrk hene.
7. Quasar
Quasar yek ji baştirîn çarçoweyên Vue UI ye ku dihêle pêşdebiran ji bo hemî platforman bi navgîniya Quasar CLI-yê bi pratîkên çêtirîn ên derveyî yek bingehek koda çavkaniyê bikar bînin. Ew dihêle pêşdebiran li şûna hemî tiştên din ên kelijandina kazan (sîstema avakirin, layout) li dora wê bala xwe bidin ser naveroka Appê. ew li ser şopandina rêbernameyên Materyal 2.0 hûr dibe û di heman demê de civakek pir piştgirî jî heye.
Yek ji tiştên taybetî yên di derbarê Quasar de şiyana nivîsandina kodê yekcar e û di heman demê de wê wekî malperek, Serlêdanek Mobîl ku tenê bingehek kodê bikar tîne bicîh bike. Di heman demê de guhertoyek nû ya ku niha di beta de ye jî heye ku dê taybetmendiyên vue 3 piştgirî bike. Nêzîkî 17.8 hezar stêrên wê li ser Github hene.
8. Buefy
Buefy ji bo Vue JS pirtûkxaneyek hêmanek UI-ya sivik e ku li ser bingeha Bulma (çarçoveyek CSS) ye. Buefy Bulma bi Vue re hev dike, ji we re dibe alîkar ku hûn bi karanîna koda hindiktirîn serîlêdanên xweşik ava bikin. ew qata javascriptê ji bo navbeyna weya Bulma ye.
Ew dikare bi tevahî an pêkhateyên yekane li ser malperek asayî were import kirin. Yekkirina wê di projeya we de pir hêsan e, dikare bi karanîna npm an CDN were kirin.
Buefy hêmanên UI-ya amade, layout û îkonan peyda dike. Pêkhat dikarin SASS-ê ji mijara we re bikar bînin. Ew jî gerokên nûjen piştgirî dike.
9. Vue Material
Vue Material çarçoveyek pir tête bikar anîn, sivik e ku taybetmendiyên Sêwirana Materyalê bicîh tîne. Ew yek ji çêtirîn entegrasyona di navbera Vue.js û taybetmendiyên Sêwirana Materyal de ye! Hûn dikarin bi hêsanî wê mîheng bikin ku li gorî hemî hewcedariyên we bi navgînek API-yek hêsan ve girêdayî be.
Ew bi sêwirana bersivdar û piştgirî ji bo hemî Gerokên Webê yên nûjen re hevaheng e. Pirtûkxane di nav Mijar, Pêkhat, û Hêmanên UI de tê dabeş kirin. Mijar rêbernameyek bêkêmasî dide ka meriv çawa serîlêdana xwe tema dike (an jî mijarên xwe binivîsîne) û Pêkhat û Hêmanên UI ji sêwiran, navîgasyon, tîpografi, îkon û 30 hêmanên din pêk tên. Li ser Github û 9.2k + dakêşanên heftane NPM li ser 1.1k stêrk û 21k forkên wê hene.
10. KeenUI
KeenUI pirtûkxaneyek UI-ya sivik a vue.js e ku bi API-ya sade ve, ji sêwirana materyalê ya Google-ê hatî îlhama kirin. Keen UI ne çarçoveyek CSS ye. Ji ber vê yekê, ew şêweyên ji bo pergalek torê, tîpografî, hwd nagire. Di şûna wê de, balê dikişîne ser pêkhateyên înteraktîf ên ku Javascript hewce dike.
Nêzîkî 30 hêmanên ku ji nû ve têne bikar anîn hene. Pêkhatan bi guheztina şêwazan bi karanîna guhêrbarên SASS ve têne xweş kirin. hûn dikarin wê di projeya xwe de bi karanîna CDN an npm ve bikin. Ew çavkaniyek vekirî ye û li ser Github bi qasî 4k stêrk heye.
Xelasî
Pirtûkxaneyên hêmanên UI bê guman avakirina projeyek pir hêsantir dike. Hilbijartina rast bi taybetmendiyên projeya ku hûn dixwazin li ser bixebitin ve girêdayî ye. Berî ku bikevin nav projeyek nû, tê pêşniyar kirin ku meriv pirtûkxaneya pêkhateya UI ya ku ji bo mebestê çêtirîn e binirxîne.