Vue JS babban tsarin JavaScript ne mai ci gaba wanda ake amfani dashi don haɓaka aikace-aikacen shafi ɗaya (SPAs) da Mu'amalar Mai amfani. Kuma yana daya daga cikin manyan tsare-tsare na gaba-gaba da aka fi amfani da su a can.

 

Wani fasali mai ban sha'awa na Vue shine ikonsa na rushe shafin yanar gizon zuwa sassa daban-daban. Kuma wannan tsari ya zama mafi sauƙi tare da amfani da ɗakunan karatu na UI.

 

Akwai ɗakunan karatu daban-daban na UI waɗanda zasu iya taimaka muku ƙirƙirar abubuwan cikin sauƙi da sauri. Don haka a cikin wannan rukunin yanar gizon, za mu sake nazarin manyan ɗakunan karatu na 10 na Vue UI don 2021.

 

1. PrimeVue

 

PrimeVue mai sauƙi ne don amfani, madaidaici, kuma mai aiwatarwa Vue UI Component Library wanda ke taimaka muku ƙirƙirar mu'amala mai ban sha'awa.

 

Yana da abubuwan haɗin UI sama da 80+ tare da cikakken goyan baya ga Sharuɗɗan Samun Abun cikin Yanar Gizo (WCAG) da ƙira mai amsawa. Kuma godiya ga sabuntawar kwanan nan, ɗakin karatu yanzu yana da cikakken goyon baya ga Vue 3. Har ila yau, ya sami ƙarin abubuwa masu yawa.

 

Ɗaya daga cikin mafi kyawun abubuwa game da Primevue shine nau'ikan abubuwan da ke tattare da shi. Suna kewayo daga teburi da masu fafutuka zuwa tsararrun ginshiƙi na ƙungiyar da za ku iya amfani da su don ƙirƙirar ƙa'idodin Vue masu mu'amala. Yana buɗe tushen kuma yana da taurari 1k+ akan Github da abubuwan zazzagewa 6,983 na mako-mako akan NPM.

 

2. Kuskure

 

Vuetify ɗakin karatu ne na Vue UI tare da kyawawan kayan aikin hannu waɗanda ke amfani da ƙayyadaddun ƙira na Kayan aiki. Wannan yana nufin cewa an ƙirƙira shi daidai bisa ƙayyadaddun Ƙirar Kayan Aiki tare da kowane sashi da aka ƙera sosai don ya zama na zamani, mai amsawa, da mai aiwatarwa.

 

Vuetify yana ba ku damar keɓance aikace-aikacenku tare da na musamman da shimfidu masu ƙarfi da kuma cika salon abubuwan abubuwan haɗin ku ta amfani da masu canjin SASS.

 

Hakanan yana goyan bayan jagororin samun dama, duk masu bincike na zamani, kuma yana dacewa da Vue CLI-3. Yana da sauƙin haɗawa kuma yana da yawancin abubuwan sake amfani da UI kamar carousels, kewayawa, da katunan. Vuetify buɗaɗɗen tushe ne kuma yana da taurari sama da 29k akan Github da zazzagewar mako-mako 319,170 akan NPM.

 

3. Chakra UI Vue

 

Chakra UI babban ɗakin karatu ne mai sauƙi kuma mai sauƙi wanda ke ba ku kayan aikin don gina aikace-aikacen Vue cikin sauri da sauƙi.

 

Ana samun damar duk abubuwan haɗin gwiwa (yana bin ƙa'idodin WAI-ARIA sosai), mai jigo, kuma mai haɗawa. Yana goyan bayan salo masu amsawa daga cikin akwatin kuma yana dacewa da yanayin duhu.

 

Chakra UI kuma yana ƙunshe da saitin abubuwan haɗin gwiwa kamar CBox da CStack waɗanda ke sauƙaƙa salon abubuwan abubuwan haɗin ku ta hanyar wucewa. Hakanan yana ba ku damar shigo da abubuwan haɗin Chakra UI Vue ta atomatik ta amfani da maganin plugin ɗin fakitin gidan yanar gizo. Yana buɗe tushen kuma yana da taurari 900+ akan Github da zazzagewar mako 331 akan NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Tare da BootstrapVue za ku iya gina ayyukan amsawa, wayar hannu-farko, da ARIA akan yanar gizo ta amfani da Vue.js da mashahurin ɗakin karatu na CSS na gaba - Bootstrap. Takardun yana da sauƙin fahimta kuma yana da sauƙin saitawa. Yana sa aiwatar da aiwatar da gaba-gaba da sauri.

 

Yana ba da abubuwa 85+, sama da 45 akwai plugins, umarni da yawa, da gumaka 1000+. Hakanan yana ba da kayan aikin da aka keɓance don shimfidu da ƙira mai amsawa. Hakanan zaka iya haɗa BootstrapVue cikin sauƙi cikin ayyukan Nuxt.js ta amfani da tsarin Nuxt.js.

 

Hakanan ana amfani da ita kamar yadda ake amfani da tsarin bootstrap CSS. An buɗe shi akan Github tare da taurari kusan 12.9k da cokali 1.7k.

 

5. Vuesax

 

Vuesax sabon tsarin tsarin UI ne wanda aka kirkira tare da Vuejs don yin ayyuka cikin sauƙi kuma tare da salo na musamman kuma mai daɗi, vuesax an ƙirƙira shi daga karce kuma an tsara shi don kowane nau'ikan masu haɓakawa daga masu son gaba har zuwa baya waɗanda ke son ƙirƙirar tsarin gani nasu cikin sauƙi. ƙarshen mai amfani. Zane-zane na musamman ne ga kowane bangare kuma ba a haɗa su zuwa kowane yanayi na gani ko ƙa'idodin ƙira ba, suna yin ayyukan da aka gina tare da shi na musamman.

 

yana ba da shafuka masu amsawa da sake amfani da abubuwan UI waɗanda za a iya daidaita su. Hakanan yana da sauƙin farawa da ko dai ta amfani da npm ko CDN. A halin yanzu baya goyan bayan Vue CLI 3 a cikin kwanan nan. An buɗe shi akan Github tare da taurari kusan 4.9k da 6700 abubuwan zazzagewar mako-mako NPM.

 

6. Ant Design Vue

 

Ant Design vue bisa ƙayyadaddun ƙayyadaddun Ant Design, Ant design vue ɗakin karatu ne na UI wanda ya ƙunshi saiti na ingantattun abubuwan gyara da nunin nuni don gina wadatattun hanyoyin mu'amala da masu amfani.

 

Ant-design-vue yana samar da abubuwa da yawa na UI don wadatar da aikace-aikacen yanar gizonku kamar Skeleton, drawer, statistics da ƙari.

 

Tare da fitowar kwanan nan na ant design vue version 2, an sabunta shi don zama mai sauri da sauƙi don haɗawa, ƙarami girma, kuma yana goyan bayan Vue 3, Sabon Haɗin API. Hakanan yana goyan bayan masu binciken gidan yanar gizo na zamani, Rendering-gefen sabar, da lantarki. Yana da taurari sama da 13k akan Github kuma akan 39,693 zazzagewar mako-mako NPM.

 

7. Kwasar

 

Quasar yana ɗaya daga cikin mafi kyawun tsarin Vue UI wanda ke ba masu haɓaka damar amfani da tushe guda ɗaya na lambar tushe don duk dandamali ta hanyar Quasar CLI tare da mafi kyawun ayyuka daga cikin akwatin. Yana barin masu haɓakawa su mai da hankali kan abubuwan da ke cikin App maimakon duk sauran abubuwan da ake saka tukunyar jirgi (tsarin gini, shimfidawa) kewaye da shi. yana mai da hankali kan bin ka'idodin Material 2.0 kuma yana da al'umma mai tallafi sosai.

 

Ɗaya daga cikin abubuwa na musamman game da Quasar shine ikon rubuta lamba sau ɗaya kuma a lokaci guda tura shi azaman gidan yanar gizo, Mobile App ta amfani da codebase guda ɗaya kawai. Hakanan akwai sabon sigar a halin yanzu a cikin beta wanda zai goyi bayan fasalulluka 3. Yana da kusan taurari 17.8k akan Github.

 

8. Buefy

 

Buefy ɗakin karatu ne mai nauyi na UI don Vue JS dangane da Bulma (tsarin CSS). Buefy yana haɗa Bulma tare da Vue, yana taimaka muku ƙirƙirar ƙa'idodi masu kyau ta amfani da ƙaramin lamba. shi ne javascript Layer na Bulma interface.

 

Ana iya shigo da shi gabaɗaya ko kuma abubuwa guda ɗaya akan shafin yanar gizo na yau da kullun. Haɗa shi cikin aikinku abu ne mai sauƙi, ko dai ana iya yin ta ta amfani da npm ko CDN.

 

Buefy yana ba da shirye-shiryen abubuwan haɗin UI, shimfidawa, da gumaka. Abubuwan da aka gyara zasu iya amfani da SASS zuwa jigon ku. Hakanan yana goyan bayan masu bincike na zamani.

 

9. Vue Material

 

Vue Material babban tsari ne da aka yi amfani da shi, mai nauyi mai nauyi wanda ke aiwatar da ƙayyadaddun ƙira na Kayan abu. Yana ɗayan mafi kyawun haɗin kai tsakanin Vue.js da ƙayyadaddun ƙayyadaddun kayan ƙira! Kuna iya daidaita shi cikin sauƙi don dacewa da duk bukatunku ta hanyar API mai sauƙi.

 

Ya dace da ƙira mai amsawa da goyan baya ga duk masu binciken gidan yanar gizo na zamani. An raba ɗakin karatu zuwa Jigogi, Abubuwan da aka gyara, da Abubuwan UI. Jigogi suna ba da takamaiman jagora kan yadda ake jigo aikace-aikacenku (ko rubuta jigogin ku) da Abubuwan da aka haɗa da UI sun ƙunshi shimfidu, kewayawa, rubutun rubutu, gumaka, da ƙarin abubuwan 30. Yana da kusan taurari 9.2k da cokali 1.1k akan Github da 21k + abubuwan zazzagewar mako-mako NPM.

 

10. KeenUI

 

KeenUI babban ɗakin karatu ne mai nauyi vue.js UI mai sauƙi tare da API mai sauƙi, wanda aka yi wahayi daga Ƙirƙirar Material na Google. Keen UI ba tsarin CSS bane. Don haka, baya haɗa da salo don tsarin grid, rubutun rubutu, da sauransu. Maimakon haka, an fi mayar da hankali kan abubuwan haɗin gwiwa waɗanda ke buƙatar Javascript.

 

Yana da kusan abubuwan sake amfani da su guda 30. Abubuwan da aka gyara ana iya yin su ta hanyar ƙetare salo ta amfani da masu canjin SASS. Kuna iya haɗa shi cikin aikin ku ta amfani da CDN ko npm. Buɗewa ce kuma tana da tauraro kusan 4k akan Github.

 

Kammalawa

 

Tabbas ɗakunan karatu na ɓangaren UI suna ba da sauƙin gina aikin. Zaɓin wanda ya dace ya dogara da fasalin aikin da kake son yin aiki akai. Kafin nutsewa cikin sabon aiki, yana da kyau mutum ya sake duba ɗakin karatu na ɓangaren UI wanda ya fi dacewa da manufar.