Vue JS inofambira mberi yeJavaScript chimiro chinoshandiswa kugadzira peji-peji maapplication (SPAs) uye Mashandisirwo emushandisi. Uye ndeimwe yeanonyanya kushandiswa-kumberi-yekupedzisira masisitimu kunze uko.
Chimwe chinonakidza chimiro cheVue kugona kwayo kuputsa peji rewebhu kuita zvikamu zvakasiyana. Uye maitiro aya anova nyore nekushandiswa kweUI chikamu maraibhurari.
Kune akasiyana maUI echikamu maraibhurari anogona kukubatsira kugadzira zvinhu zviri nyore uye nekukurumidza. Saka mune ino blog, isu tichaongorora epamusoro gumi Vue UI Component Libraries ye10.
1. PrimeVue
PrimeVue iri nyore kushandisa, inochinja-chinja, uye inoita Vue UI Chikamu Raibhurari iyo inokubatsira iwe kuvaka inoshamisa mushandisi nzvimbo.
Iyo ine pamusoro pe80+ UI zvikamu zvine rutsigiro rwakazara rweWebhu Content Accessibility Guidelines (WCAG) uye inopindura dhizaini. Uye nekuda kwekuvandudzwa kwemazuva ano, raibhurari ikozvino yava nerutsigiro rwakazara rweVue 3. Yakawanawo boka rakawanda.
Chimwe chezvinhu zvakanakisa nezvePrimevue huwandu hwayo hwakawanda hwezvikamu. Dzinotangira kubva pamatafura uye mapeji kusvika kune yakanyatsogadzirwa-girafu-yakavakirwa sangano machati aunogona kushandisa kugadzira inopindirana Vue apps. Iyo yakavhurika-sosi uye ine 1k+ nyeredzi paGithub uye 6,983 vhiki nevhiki kurodha paNPM.
2. Vuetify
Vuetify iVue UI Raibhurari ine zvakashongedzwa nemaoko Zvikamu zvinoshandisa iyo Material Dhizaini yakatarwa. Izvi zvinoreva kuti yakagadziridzwa chaizvo zvinoenderana neiyo Material Dhizaini yakatarwa nechinhu chose chakagadzirwa zvine hungwaru kuti chive modular, chinodaira, uye chiite.
Vuetify inokutendera kuti ugadzirise maapplication ako ane akasiyana uye ane simba marongero uye akwane zvitaera zvezvikamu zvako uchishandisa SASS zvinosiyana.
Iyo zvakare inotsigira nhungamiro yekuwanikwa, ese mabhurawuza emazuva ano, uye anoenderana neVue CLI-3. Zviri nyore kubatanidza uye ine zvakawanda zvekushandisa zvakare zveUI zvikamu senge carousels, navigation, uye makadhi. Vuetify ndeye yakavhurika sosi uye inopfuura makumi maviri nepfumbamwe nyeredzi paGithub uye 29 vhiki nevhiki kurodha paNPM.
3. Chakra UI Vue
Chakra UI iri nyore modular uye inowanikwa chikamu raibhurari iyo inokupa iwe maturusi ekuvaka Vue application nekukurumidza uye nyore.
Zvese zvikamu zvinosvikika (zvinonyatso tevera WAI-ARIA zviyero), zvine musoro, uye zvinogoneka. Iyo inotsigira anopindura masitaera kunze kwebhokisi uye yakasviba-modhi inoenderana.
Chakra UI inewo seti yezvimiro seCBox uye CStack izvo zvinoita kuti zvive nyore kutayera zvikamu zvako nekupfuura props. Iyo zvakare inobvumidza iwe kuunza otomatiki Chakra UI Vue zvikamu uchishandisa webpack plugin mhinduro. Iyo yakavhurika-sosi uye ine 900+ nyeredzi paGithub uye 331weekly kudhawunirodha paNPM.
4. Bootstrap Vue
BootstrapVue, NeBootstrapVue unogona kuvaka mapurojekiti anopindura, nhare-yekutanga, uye ARIA pawebhu uchishandisa Vue.js uye yakakurumbira yekumberi-yekupedzisira CSS raibhurari - Bootstrap. Zvinyorwa zviri nyore kunzwisisa uye zvakare zviri nyore kumisikidza. Inoita kuti kumberi-kumagumo kushandiswa kuitwe nekukurumidza.
Iyo inopa 85+ zvikamu, anopfuura makumi mana neshanu aripo plugins, akati wandei mirairo, uye 45+ icons. Inopawo zvinhu zvinoshanda zvakagadzirirwa marongerwo uye inopindura dhizaini. unogona zvakare kubatanidza BootstrapVue muzvirongwa zvako zveNuxt.js uchishandisa Nuxt.js module.
Inoshandiswawo nenzira imwechete iyo bootstrap CSS framework iri kushandiswa. Yakavhurika-yakavhurika paGithub ine angangoita 12.9k nyeredzi uye 1.7k maforogo.
5. Vuesax
Vuesax inyowani yeUI chikamu chimiro chakagadzirwa neVuejs kugadzira mapurojekiti zviri nyore uye ane yakasarudzika uye inonakidza maitiro, vuesax inogadzirwa kubva mukutanga uye yakagadzirirwa marudzi ese evagadziri kubva kumberi mudiwa kusvika kumashure uyo anoda kugadzira nyore nzira yavo yekuona mushandisi wekupedzisira. Iwo madhizaini akasiyana kune chimwe nechimwe chikamu uye haana kusungirirwa kune chero maitiro ekuona kana dhizaini mitemo, ichiita mapurojekiti akavakwa nawo akasiyana zvakare.
inopa mapeji anopindura uye inogona kushandiswazve uye inogadziriswa UI zvikamu. Zviri nyore zvakare kutanga nekushandisa npm kana CDN. Ikozvino haitsigire Vue CLI 3 mune yayo yazvino vhezheni. Iyo yakavhurika-sourced paGithub ine angangoita 4.9k nyeredzi uye 6700 vhiki nevhiki kurodha NPM.
6. Ant Design Vue
Ant Dhizaini vue yakavakirwa pane iyo Ant Dhizaini dhizaini, Ant dhizaini vue raibhurari yeUI ine seti yemhando yepamusoro-soro zvikamu uye madhemo ekuvaka akapfuma, anopindirana mushandisi nzvimbo.
Ant-dhizaini-vue inopa akawanda eUI maficha ekupfumisa ako ewebhu maapplication akadai Skeleton, dhirowa, manhamba uye zvimwe zvakawanda.
Nekuburitswa kwazvino kwesvosve dhizaini vue vhezheni yechipiri, yakagadziridzwa kuti ikurumidze uye nyore kubatanidza, diki saizi yemasumbu, uye zvakare inotsigira Vue 2, New Composition API gwaro. Inotsigirawo mabhurawuza emazuva ano ewebhu, server-side Rendering, uye elekitironi. Iyo ine anopfuura 3k nyeredzi paGithub uye pa13 vhiki nevhiki kurodha NPM.
7. Quasar
Quasar ndeimwe yeakanakisa Vue UI masisitimu ayo anobvumira vanogadzira kushandisa imwe sosi kodhi base kune ese mapuratifomu kuburikidza neQuasar CLI neakanakisa maitiro kunze kwebhokisi. Iyo inoita kuti vanogadzira vatarise pane yavo yeApp zvirimo kwete zvimwe zvese boiler plating zvinhu (kuvaka system, marongero) akaitenderedza. yakatarisana nekutevera Material 2.0 nhungamiro uye zvakare ine nharaunda inotsigira zvakanyanya.
Chimwe chezvinhu zvakakosha nezve Quasar kugona kunyora kodhi kamwechete uye panguva imwe chete kuendesa sewebhusaiti, Mobile App uchishandisa codebase imwe chete. Kune zvakare vhezheni nyowani parizvino mubeta iyo yaizotsigira vue 3 maficha. Iyo ine inenge 17.8k nyeredzi paGithub.
8. Buefy
Buefy iremekedzo yeUI chikamu raibhurari yeVue JS yakavakirwa paBulma (CSS chimiro). Buefy inosanganisa Bulma neVue, ichikubatsira iwe kuvaka-inotaridzika zvakanaka uchishandisa kodhi kodhi. ndiyo javascript layer yeBulma yako interface.
Inogona kutengwa kunze kwenyika zvachose kana zvimwe zvikamu pane yakajairika peji rewebhu. Kuibatanidza mupurojekiti yako iri nyore, inogona kuitwa uchishandisa npm kana CDN.
Buefy inopa yakagadzirira-yakagadzirwa UI zvikamu, marongerwo, uye zvidhori. Izvo zvikamu zvinogona kushandisa SASS kune dingindira rako. Inotsigirawo mabhurawuza emazuva ano.
9. Vhura Material
Vue Material chinoshandiswa zvakanyanya, chakareruka chimiro chinoisa iyo Material Dhizaini zvakatemwa. Ndiyo imwe yeakanakisa kubatanidzwa pakati peVue.js uye Material Design specs! Unogona kuzvigadzirisa zviri nyore kuti zvienderane nezvido zvako zvese kuburikidza neiyo API iri nyore.
Inoenderana neinopindura dhizaini uye tsigiro kune ese emazuvano maBhurawuza eWebhu. Raibhurari yakakamurwa kuita Themes, Components, uye UI Elements. Iwo madingindira anopa gwara rakajeka rekuti ungaite sei dingindira rako (kana kunyora dingindira rako) uye Zvikamu uye UI Elements zvinosanganisira marongero, kufambisa, typography, zvidhori, uye makumi matatu zvimwe zvikamu. Iine angangoita 30k nyeredzi uye 9.2k maforogo paGithub uye 1.1k + vhiki nevhiki kurodha NPM.
10. KeenUI
KeenUI iraibhurari yakareruka vue.js UI ine API iri nyore, yakafuridzirwa neGoogle's Material Design. Keen UI haisi CSS chimiro. Naizvozvo, haisanganisi zvitaera zvegridi system, typography, etc. Pane kudaro, chinotariswa chiri pazvinhu zvinopindirana zvinoda Javascript.
Iine zvikamu makumi matatu zvinogona kushandiswa zvakare. Izvo zvikamu zvinogoneka nekupfuura masitaera uchishandisa SASS akasiyana. unogona kuibatanidza muchirongwa chako kungave uchishandisa CDN kana npm. Iyo yakavhurika-sourced uye ine dzinenge 30k nyeredzi paGithub.
mhedziso
UI chikamu maraibhurari zvechokwadi anoita kuti kuvaka kunze purojekiti kuve nyore. Kutora iyo yakakodzera kunoenderana nezvimiro zvepurojekiti yaunoda kushanda pairi. Usati wanyura muchirongwa chitsva, zvinokurudzirwa kuti munhu aongorore raibhurari yechikamu cheUI iyo inonyatsokodzera chinangwa.