I-Vue JS iwuhlaka lwe-JavaScript oluqhubekayo olusetshenziswa ukuthuthukisa izinhlelo zokusebenza zekhasi elilodwa (ama-SPA) kanye Nezikhombimsebenzisi Zomsebenzisi. Futhi ingolunye lwezinhlaka zangaphambili ezisetshenziswa kabanzi laphaya.
Isici esisodwa esithokozisayo se-Vue yikhono layo lokuhlukanisa ikhasi lewebhu libe izingxenye ezihlukene. Futhi le nqubo iba lula ngokusetshenziswa kwengxenye yemitapo yolwazi ye-UI.
Kunemitapo yolwazi ehlukahlukene yengxenye ye-UI engakusiza ukuthi udale izingxenye kalula futhi ngokushesha. Ngakho-ke kule bhulogi, sizobuyekeza Imitapolwazi ephezulu ye-Vue UI Component eyi-10 yango-2021.
1. I-PrimeVue
I-PrimeVue iyilabhulali ye-Vue UI Component elula ukuyisebenzisa, eguquguqukayo, futhi esebenzayo ekusiza ukuthi wakhe izixhumanisi ezimangalisayo zabasebenzisi.
Inezingxenye ze-UI ezingaphezu kuka-80+ ezisekelwa ngokugcwele Iziqondiso Zokufinyeleleka Kokuqukethwe Kwewebhu (WCAG) kanye nomklamo osabelayo. Futhi ngenxa yesibuyekezo sakamuva, umtapo wolwazi manje unokusekelwa okugcwele kwe-Vue 3. Iphinde yathola inqwaba yezingxenye.
Enye yezinto ezinhle kakhulu ngePrimevue uhla lwayo olubanzi lwezingxenye. Asuka kumathebula nama-paginators kuye kumashadi enhlangano asekelwe kugrafu aklanywe kahle ongawasebenzisa ukuze udale izinhlelo zokusebenza ze-Vue ezisebenzisanayo. Ingumthombo ovulekile futhi inezinkanyezi ezingu-1k+ ku-Github kanye nokulanda kwamasonto onke okungu-6,983 ku-NPM.
2. Vuetify
I-Vuetify Ilabhulali ye-Vue UI enezingxenye eziklanywe kahle ngezandla ezisebenzisa ukucaciswa kwe-Material Design. Lokhu kusho ukuthi ithuthukiswe ngokufana ncamashí nokucaciswa kwe-Material Design nayo yonke ingxenye eklanywe ngokucophelela ukuze ibe yimodular, iphendule, futhi isebenze.
I-Vuetify ikuvumela ukuthi wenze ngendlela oyifisayo izinhlelo zakho zokusebenza ngezakhiwo ezihlukile nezishintshashintshayo futhi wenze kahle izitayela zezingxenye zakho usebenzisa okuguquguqukayo kwe-SASS.
Futhi isekela imihlahlandlela yokufinyeleleka, zonke iziphequluli zesimanje, futhi iyahambisana ne-Vue CLI-3. Kulula ukukuhlanganisa futhi kunezingxenye eziningi ze-UI ezisebenziseka kabusha njengama-carousels, ukuzulazula, namakhadi. I-Vuetify ingumthombo ovulekile futhi inezinkanyezi ezingaphezu kuka-29k ku-Github kanye nokulanda kwamasonto onke okungu-319,170 ku-NPM.
3. I-Chakra UI Vue
I-Chakra UI iwumtapo wezincwadi wengxenye elula oyimodulayo futhi ofinyelelekayo ekunikeza amathuluzi okwakha izinhlelo zokusebenza ze-Vue ngokushesha nakalula.
Zonke izingxenye ziyafinyeleleka (zilandela ngokuqinile izindinganiso ze-WAI-ARIA), zinendikimba, futhi ziyahlanganiswa. Isekela izitayela ezisabelayo ngaphandle kwebhokisi futhi ihambisana nemodi emnyama.
I-Chakra UI futhi iqukethe isethi yezingxenye zesakhiwo njenge-CBox ne-CStack ezenza kube lula ukwenza isitayela izingxenye zakho ngokudlula ama-props. Iphinde ikuvumela ukuthi ungenise ngokuzenzakalelayo izingxenye ze-Chakra UI Vue usebenzisa isisombululo se-plugin ye-webpack. Ingumthombo ovulekile futhi inezinkanyezi ezingu-900+ ku-Github kanye nokulanda okungu-331ngeviki ku-NPM.
4. I-Bootstrap Vue
I-BootstrapVue, Nge-BootstrapVue ungakha amaphrojekthi asabelayo, okuqala ngeselula, kanye ne-ARIA kuwebhu usebenzisa i-Vue.js kanye nomtapo wezincwadi we-CSS ophambili odumile — I-Bootstrap. Imibhalo kulula ukuyiqonda futhi kulula futhi ukumisa. Kwenza ukusetshenziswa kwe-front-end kwenziwe ngokushesha.
Inikela ngezinto ezingama-85+, ama-plugin atholakalayo angaphezu kuka-45, iziqondiso ezimbalwa, nezithonjana eziyi-1000+. Iphinde inikeze izingxenye ezisebenzayo ezenzelwe izakhiwo kanye nomklamo ophendulayo. ungakwazi futhi ukuhlanganisa kalula i-BootstrapVue kumaphrojekthi akho e-Nuxt.js usebenzisa imojula ye-Nuxt.js.
Iphinde isetshenziswe ngendlela efanayo njengoba kusetshenziswa uhlaka lwe-bootstrap CSS. Itholakala ku-Github enezinkanyezi ezingaba ngu-12.9k namafoloko angu-1.7k.
5. I-Vuesax
I-Vuesax iwuhlaka olusha lwengxenye ye-UI oludalwe nama-Vuejs ukwenza amaphrojekthi kalula nangesitayela esiyingqayizivele nesimnandi, i-vuesax idalwe kusukela ekuqaleni futhi yakhelwe zonke izinhlobo zonjiniyela kusukela kumuntu othanda i-frontend kuya ngemuva ofuna ukudala kalula indlela yabo yokubuka. umsebenzisi wokugcina. Imiklamo ihlukile engxenyeni ngayinye futhi ayisekelwe kunoma yikuphi ukuthambekela okubukwayo noma imithetho yokuklama, okwenza amaphrojekthi akhiwe ngayo ahluke futhi.
ihlinzeka ngamakhasi aphendulayo kanye nezingxenye ze-UI ezisebenziseka kabusha nezingenziwa ngendlela oyifisayo. Kulula futhi ukuqalisa ngokusebenzisa i-npm noma i-CDN. Okwamanje ayisekeli i-Vue CLI 3 enguqulweni yayo yakamuva. Itholakala ku-Github enezinkanyezi ezingaba ngu-4.9k nokulandwa kweviki okungu-6700 kwe-NPM.
6. I-Ant Design Vue
I-Ant Design vue esekelwe esicacisweni se-Ant Design, i-Ant design vue iwumtapo wezincwadi we-UI oqukethe isethi yezingxenye zekhwalithi ephezulu namademo okwakha izixhumanisi zomsebenzisi ezicebile, ezisebenzisanayo.
I-Ant-design-vue ihlinzeka ngezinto eziningi ze-UI ukuze inothise izinhlelo zakho zokusebenza zewebhu njenge-Skeleton, idrowa, izibalo nokunye okuningi.
Ngokukhishwa kwakamuva kwenguqulo 2 ye-ant design vue, ibuyekeziwe ukuze isheshe futhi ibe lula ukuhlanganisa, usayizi wenqwaba encane, futhi isekela i-Vue 3, idokhumenti ye-API Yokuqamba Okusha. Iphinde isekele iziphequluli zewebhu zesimanje, i-server-side Rendering, kanye ne-electron. Inezinkanyezi ezingaphezu kwe-13k ku-Github kanye nokulanda kwamasonto onke okungu-39,693 kwe-NPM.
7. I-Quasar
I-Quasar ingolunye lwezinhlaka ezinhle kakhulu ze-Vue UI ezivumela onjiniyela ukuthi basebenzise isisekelo sekhodi yomthombo eyodwa kuzo zonke izinkundla nge-Quasar CLI enemikhuba engcono kakhulu ngaphandle kwebhokisi. Ivumela onjiniyela ukuthi bagxile kokuqukethwe kohlelo lwabo lokusebenza kunazo zonke ezinye izinto zebhayela (isistimu yokwakha, isakhiwo) eduze kwayo. igxile ekulandeleni imihlahlandlela ye-Material 2.0 futhi futhi inomphakathi oweseka kakhulu.
Enye yezinto ezikhethekile nge-Quasar yikhono lokubhala ikhodi kanye futhi ngesikhathi esifanayo isetshenziswe njengewebhusayithi, i-Mobile App isebenzisa i-codebase eyodwa kuphela. Kukhona nenguqulo entsha okwamanje eku-beta engasekela izici ze-vue 3. Inezinkanyezi ezingaba ngu-17.8k ku-Github.
8. Buefy
I-Buefy ilabhulali yengxenye ye-UI engasindi ye-Vue JS esekelwe ku-Bulma(uhlaka lwe-CSS). I-Buefy ihlanganisa i-Bulma ne-Vue, ikusiza ukuthi wakhe izinhlelo zokusebenza ezibukeka kahle usebenzisa ikhodi encane. ungqimba lwe-javascript lwesixhumi esibonakalayo sakho se-Bulma.
Ingangeniswa ngokuphelele noma ingxenye eyodwa ekhasini lewebhu elijwayelekile. Ukuyihlanganisa kuphrojekthi yakho kulula kakhulu, kungenziwa kusetshenziswa i-npm noma i-CDN.
I-Buefy inikeza izingxenye ze-UI esezenziwe ngomumo, isakhiwo, nezithonjana. Izingxenye zingasebenzisa i-SASS endikimbeni yakho. Iphinde isekele iziphequluli zesimanje.
9. Vue Material
I-Vue Material iwuhlaka olusetshenziswa kakhulu, olungasindi olusebenzisa ukucaciswa kwe-Material Design. Ingenye yokuhlanganiswa okungcono kakhulu phakathi kwe-Vue.js ne-Material Design specs! Ungayimisa kalula ukuthi ihambisane nazo zonke izidingo zakho nge-API elula.
Ihambisana nomklamo osabelayo nokusekelwa kwazo zonke iziphequluli zewebhu zesimanje. Umtapo wolwazi uhlukaniswe ngezindikimba, izingxenye, kanye nama-UI Elements. Izindikimba zinikeza umhlahlandlela oqondile wokuthi ungalufaka kanjani itimu kuhlelo lwakho lokusebenza (noma ubhale izingqikithi zakho) futhi Izingxenye Nezici ze-UI zihlanganisa izakhiwo, ukuzulazula, ukuthayipha, izithonjana, nezinye izingxenye ezingu-30. Cishe inezinkanyezi ezingu-9.2k nezimfoloko ezingu-1.1k ku-Github kanye nokungu-21k + okulandwayo kwamasonto onke kwe-NPM.
10. I-KeenUI
I-KeenUI ilabhulali ye-UI ye-vue.js engasindi ene-API elula, egqugquzelwe Idizayini Yezinto yakwa-Google. I-Keen UI ayilona uhlaka lwe-CSS. Ngakho-ke, ayifaki izitayela zesistimu yegridi, i-typography, njll. Kunalokho, kugxilwe ezingxenyeni ezisebenzisanayo ezidinga i-Javascript.
Inezici ezingaba ngu-30 ezisebenziseka kabusha. Izingxenye zingenziwa ngendlela oyifisayo ngokubhala ngaphezulu izitayela usebenzisa okuguquguqukayo kwe-SASS. ungayihlanganisa kuphrojekthi yakho ngokusebenzisa i-CDN noma i-npm. Inomthombo ovulekile futhi inezinkanyezi ezingaba ngu-4k ku-Github.
Isiphetho
Imitapo yolwazi yengxenye ye-UI yenza ukwenza iphrojekthi kube lula kakhulu. Ukukhetha okulungile kuncike kuzici zephrojekthi ofuna ukusebenza kuyo. Ngaphambi kokungena kuphrojekthi entsha, kuyatuseka ukuthi umuntu abuyekeze umtapo wengxenye ye-UI efanelene kangcono nale njongo.