Vue JS ndi njira yopita patsogolo ya JavaScript yomwe imagwiritsidwa ntchito popanga mapulogalamu atsamba limodzi (SPAs) ndi Mawonekedwe Ogwiritsa Ntchito. Ndipo ndi imodzi mwazinthu zogwiritsidwa ntchito kwambiri kutsogolo kunja uko.
Chinthu chimodzi chosangalatsa cha Vue ndikutha kugawa tsamba lawebusayiti kukhala magawo osiyanasiyana. Ndipo njirayi imakhala yosavuta kugwiritsa ntchito malaibulale agawo la UI.
Pali malaibulale osiyanasiyana a UI omwe angakuthandizeni kupanga zigawo mosavuta komanso mwachangu. Chifukwa chake mubulogu iyi, tiwunikanso Ma library 10 apamwamba a Vue UI Component a 2021.
1. PrimeVue
PrimeVue ndi yosavuta kugwiritsa ntchito, yosunthika, komanso yochititsa chidwi ya Vue UI Component Library yomwe imakuthandizani kuti mupange mawonekedwe owoneka bwino a ogwiritsa ntchito.
Ili ndi zida zopitilira 80+ za UI zothandizidwa kwathunthu ndi Maupangiri Opezeka pa Webusayiti (WCAG) komanso kapangidwe kake. Ndipo chifukwa cha kusinthidwa kwaposachedwa, laibulale tsopano ili ndi chithandizo chonse cha Vue 3. Ilinso ndi mulu wambiri zigawo.
Chimodzi mwazinthu zabwino kwambiri za Primevue ndimitundu yake yambiri. Amachokera ku matebulo ndi opanga mapepala kupita ku ma chart opangidwa bwino ndi ma graph omwe mungagwiritse ntchito kupanga mapulogalamu a Vue. Ndiwotseguka ndipo ili ndi nyenyezi 1k+ pa Github ndi kutsitsa 6,983 sabata iliyonse pa NPM.
2. Vuetify
Vuetify ndi Library ya Vue UI yokhala ndi Zida zopangidwa mwaluso zomwe zimagwiritsa ntchito mawonekedwe a Material Design. Izi zikutanthauza kuti idapangidwa ndendende molingana ndi Mapangidwe a Material ndi gawo lililonse lomwe limapangidwa mwaluso kuti likhale modula, lomvera, komanso lochita bwino.
Vuetify imakupatsani mwayi wosinthira mapulogalamu anu ndi masanjidwe apadera komanso osinthika ndikuwongolera masitaelo azinthu zanu pogwiritsa ntchito mitundu ya SASS.
Imathandiziranso malangizo ofikira, asakatuli onse amakono, ndipo imagwirizana ndi Vue CLI-3. Ndiosavuta kuphatikiza ndipo ili ndi zida zambiri zogwiritsiridwa ntchitonso za UI monga ma carousels, navigation, ndi makadi. Vuetify ndi gwero lotseguka ndipo ili ndi nyenyezi zopitilira 29k pa Github ndi kutsitsa 319,170 sabata iliyonse pa NPM.
3. Chakra UI Vue
Chakra UI ndi laibulale yophweka komanso yopezeka mosavuta yomwe imakupatsani zida zopangira mapulogalamu a Vue mwachangu komanso mosavuta.
Zigawo zonse ndizopezeka (zimatsatira miyezo ya WAI-ARIA), yotheka, komanso yophatikiza. Imathandizira masitayilo omvera kunja kwa bokosilo ndipo imagwirizana ndi mawonekedwe amdima.
Chakra UI ilinso ndi zigawo zingapo monga CBox ndi CStack zomwe zimapangitsa kuti zikhale zosavuta kupanga zida zanu podutsa ma props. Zimakupatsaninso mwayi wolowetsa zokha zida za Chakra UI Vue pogwiritsa ntchito pulogalamu yowonjezera pawebpack. Ndiwotseguka ndipo ili ndi nyenyezi 900+ pa Github ndi kutsitsa 331 sabata iliyonse pa NPM.
4. Bootstrap Vue
BootstrapVue, Ndi BootstrapVue mutha kupanga mapulojekiti omvera, oyambira mafoni, ndi ARIA pa intaneti pogwiritsa ntchito Vue.js ndi laibulale yotchuka yakutsogolo ya CSS - Bootstrap. Zolembazo ndizosavuta kumva komanso ndizosavuta kukhazikitsa. Zimapangitsa kuti ntchito zakutsogolo zichitike mwachangu.
Imakhala ndi zigawo 85+, mapulagini opitilira 45 omwe amapezeka, malangizo angapo, ndi zithunzi 1000+. Imaperekanso zigawo zogwira ntchito zomwe zimapangidwira masanjidwe ndi mapangidwe omvera. mutha kuphatikizanso BootstrapVue muma projekiti anu a Nuxt.js pogwiritsa ntchito gawo la Nuxt.js.
Amagwiritsidwanso ntchito mofanana ndi momwe bootstrap CSS chimango chikugwiritsidwa ntchito. Ndiwotseguka pa Github yokhala ndi nyenyezi pafupifupi 12.9k ndi mafoloko a 1.7k.
5. Vuesax
Vuesax ndi gawo latsopano la UI lopangidwa ndi Vuejs kuti lipangitse mapulojekiti mosavuta komanso ndi mawonekedwe apadera komanso osangalatsa, vuesax idapangidwa kuchokera poyambira ndipo idapangidwira mitundu yonse ya opanga kuyambira okonda kutsogolo mpaka kumbuyo omwe akufuna kupanga mawonekedwe awo owoneka mosavuta. wogwiritsa ntchito. Mapangidwewo ndi apadera pagawo lililonse ndipo samakhazikika kumayendedwe aliwonse owoneka kapena malamulo opangira, kupanga mapulojekiti omangidwa nawonso kukhala apadera.
imapereka masamba omvera komanso zida za UI zomwe zitha kugwiritsidwanso ntchito komanso makonda. Ndikosavuta kuyamba ndi kugwiritsa ntchito npm kapena CDN. Pakadali pano sichigwirizana ndi Vue CLI 3 mu mtundu wake waposachedwa. Ndiwotseguka pa Github yokhala ndi nyenyezi pafupifupi 4.9k ndi kutsitsa 6700 sabata iliyonse NPM.
6. Ant Design Vue
Ant Design vue kutengera mawonekedwe a Ant Design, Ant design vue ndi laibulale yavue UI yomwe ili ndi zida zapamwamba kwambiri komanso ma demo opangira malo olumikizana ndi ogwiritsa ntchito olemera, olumikizana.
Ant-design-vue imapereka zida zambiri za UI kuti mulemeretse mapulogalamu anu apa intaneti monga Skeleton, kabati, ziwerengero ndi zina zambiri.
Ndi kutulutsidwa kwaposachedwa kwa ant design vue version 2, yasinthidwa kuti ikhale yachangu komanso yosavuta kuphatikiza, kukula kwa mitolo yaying'ono, komanso imathandizira Vue 3, New Composition API chikalata. Imathandiziranso asakatuli amakono, Kupereka mbali ya seva, ndi ma elekitironi. Ili ndi nyenyezi zopitilira 13k pa Github komanso pakutsitsa 39,693 sabata iliyonse NPM.
7. Quasar
Quasar ndi imodzi mwazinthu zabwino kwambiri za Vue UI zomwe zimalola opanga kugwiritsa ntchito ma code code pamapulatifomu onse kudzera pa Quasar CLI ndi machitidwe abwino omwe atuluka m'bokosi. Imalola opanga kuti azingoyang'ana zomwe zili mu App yawo m'malo motengera zinthu zina zonse za boiler (kumanga dongosolo, masanjidwe) mozungulira. imayang'ana kwambiri pakutsata malangizo a Material 2.0 komanso ili ndi gulu lothandizira kwambiri.
Chimodzi mwazinthu zapadera za Quasar ndikutha kulemba kachidindo kamodzi ndikuyika nthawi imodzi ngati tsamba la webusayiti, Mobile App pogwiritsa ntchito codebase imodzi yokha. Palinso mtundu watsopano womwe uli mu beta womwe ungathandizire mawonekedwe a vue 3. Ili ndi nyenyezi pafupifupi 17.8k pa Github.
8. Buefy
Buefy ndi laibulale yopepuka ya UI ya Vue JS yotengera Bulma (chimake cha CSS). Buefy imaphatikiza Bulma ndi Vue, kukuthandizani kupanga mapulogalamu owoneka bwino pogwiritsa ntchito ma code ochepa. ndiye wosanjikiza wa javascript wamawonekedwe anu a Bulma.
Itha kutumizidwa kunja kwathunthu kapena magawo amodzi patsamba wamba. Kuyiphatikiza mu projekiti yanu ndikosavuta, zitha kuchitika pogwiritsa ntchito npm kapena CDN.
Buefy imapereka zida zokonzekera za UI, masanjidwe, ndi zithunzi. Zidazi zitha kugwiritsa ntchito SASS pamutu wanu. Imathandizanso osatsegula amakono.
9. Onani Zinthu
Vue Material ndi chimango chogwiritsidwa ntchito kwambiri, chopepuka chomwe chimakwaniritsa zofunikira za Material Design. Ndi imodzi mwazophatikizana zabwino kwambiri pakati pa Vue.js ndi Material Design specs! Mutha kuyikonza mosavuta kuti igwirizane ndi zosowa zanu zonse kudzera mu API yosavuta.
Ndiwogwirizana ndi kapangidwe kake komanso chithandizo cha Osakatula amakono onse. Laibulaleyi imagawidwa m'mitu, zigawo, ndi ma UI Elements. Mituyo imapereka chiwongolero chotsimikizika cha momwe mungapangire mutu wa pulogalamu yanu (kapena lembani mitu yanu) ndipo Magawo ndi UI Elements imakhala ndi masanjidwe, mayendedwe, kalembedwe, zithunzi, ndi zina 30. Ili ndi nyenyezi pafupifupi 9.2k ndi mafoloko 1.1k pa Github ndi 21k + kutsitsa sabata iliyonse NPM.
10. KeenUI
KeenUI ndi laibulale yopepuka ya vue.js UI yokhala ndi API yosavuta, yowuziridwa ndi Mapangidwe a Zinthu a Google. Keen UI si dongosolo la CSS. Choncho, sizimaphatikizapo masitayelo a grid system, typography, etc. M'malo mwake, chidwi chimakhala pazigawo zomwe zimafuna Javascript.
Ili ndi pafupifupi 30 zigawo zomwe zingagwiritsidwenso ntchito. Zidazi zimasinthidwa mwamakonda popitilira masitayelo pogwiritsa ntchito mitundu ya SASS. mutha kuziphatikiza ndi polojekiti yanu pogwiritsa ntchito CDN kapena npm. Ndiwotseguka ndipo ili ndi nyenyezi pafupifupi 4k pa Github.
Kutsiliza
Ma library omwe ali ndi UI amapangitsa kuti ntchito ikhale yosavuta. Kusankha yoyenera kumadalira mbali za polojekiti yomwe mukufuna kugwira. Asanalowe mu projekiti yatsopano, ndibwino kuti munthu awunikenso laibulale yachigawo cha UI yomwe ili yoyenera kutero.