Top-Vue-UI-Libraries-a-Frameworks-e-Noʻonoʻo-i-2021

 

ʻO Vue JS kahi hoʻolālā JavaScript holomua i hoʻohana ʻia no ka hoʻomohala ʻana i nā noi ʻaoʻao hoʻokahi (SPA) a me nā Interfaces Mea hoʻohana. A ʻo ia kekahi o nā papa hana mua i hoʻohana nui ʻia ma waho.

 

ʻO kahi hiʻohiʻona hoihoi o Vue ʻo kona hiki ke wāwahi i kahi ʻaoʻao pūnaewele i nā ʻāpana like ʻole. A maʻalahi kēia kaʻina hana me ka hoʻohana ʻana i nā waihona waihona UI.

 

Aia nā waihona waihona UI like ʻole e hiki ke kōkua iā ʻoe e hana maʻalahi a me ka wikiwiki. No laila ma kēia blog, e nānā mākou i ka 10 Vue UI Component Libraries no 2021.

 

1. PrimeVue

 

He mea maʻalahi ka PrimeVue e hoʻohana, maʻalahi, a me ka hana Vue UI Component Library e kōkua iā ʻoe e kūkulu i nā mea hoʻohana weliweli.

 

Loaʻa iā ia ma luna o 80+ mau ʻāpana UI me ke kākoʻo piha no Web Content Accessibility Guidelines (WCAG) a me ka hoʻolālā pane. A mahalo i ka hoʻonui hou ʻana, ua kākoʻo piha ka waihona iā Vue 3. Ua loaʻa pū kekahi mau ʻāpana.

 

ʻO kekahi o nā mea maikaʻi loa e pili ana iā Primevue ʻo ia ka laulā o nā ʻāpana. Loaʻa lākou mai nā papa a me nā paginators a hiki i nā palapala hoʻonohonoho hoʻonohonoho pono ʻia e hiki ai iā ʻoe ke hoʻohana no ka hana ʻana i nā polokalamu Vue. He kumu hāmama a loaʻa iā 1k+ hōkū ma Github a me 6,983 hoʻoiho i kēlā me kēia pule ma NPM.

 

2. Vuetify

 

He Vue UI Library ʻo Vuetify me nā ʻāpana hana lima nani e hoʻohana ana i ka kikoʻī Hoʻolālā Mea. ʻO ia hoʻi, ua hoʻomohala ʻia e like me nā kikoʻī o ka Material Design me kēlā me kēia ʻāpana meticulously i hana ʻia e modular, pane, a me ka hana.

 

Hāʻawi ʻo Vuetify iā ʻoe e hoʻopilikino i kāu mau noi me nā hoʻolālā kūʻokoʻa a me ka hoʻomaʻamaʻa ʻana i nā ʻano o kāu mau ʻāpana me ka hoʻohana ʻana i nā mea hoʻololi SASS.

 

Kākoʻo pū ʻo ia i nā alakaʻi no ke komo ʻana, nā mākaʻikaʻi hou a pau, a kūpono pū me Vue CLI-3. He maʻalahi ka hoʻohui ʻana a he nui nā ʻāpana UI hiki ke hoʻohana hou ʻia e like me nā carousels, nā hoʻokele, a me nā kāleka. He kumu wehe ʻo Vuetify a me 29k mau hōkū ma Github a me 319,170 hoʻoiho i kēlā me kēia pule ma NPM.

 

3. Chakra UI Vue

 

ʻO Chakra UI kahi waihona waihona modular maʻalahi a hiki ke loaʻa iā ʻoe i nā mea hana e kūkulu wikiwiki a maʻalahi i nā noi Vue.

 

Hiki ke loaʻa nā ʻāpana āpau (e hahai pono i nā kūlana WAI-ARIA), themeable, a me ka haku mele. Kākoʻo ia i nā ʻano pane i waho o ka pahu a kūpono i ke ʻano ʻeleʻele.

 

Loaʻa i ka Chakra UI kahi pūʻulu o nā ʻāpana hoʻolālā e like me CBox a me CStack e maʻalahi ai ke kāhiko ʻana i kāu mau ʻāpana ma ke kau ʻana i nā props. Hāʻawi ia iā ʻoe e hoʻokomo i nā ʻāpana Chakra UI Vue me ka hoʻohana ʻana i kahi hopena plugin webpack. He kumu hāmama a loaʻa iā 900+ mau hōkū ma Github a me 331weekly download ma NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Me BootstrapVue hiki iā ʻoe ke kūkulu i nā papahana pane, mobile-first, a me ARIA ma ka pūnaewele me ka hoʻohana ʻana iā Vue.js a me ka waihona CSS mua-hope kaulana - Bootstrap. He maʻalahi ka hoʻomaopopo ʻana i ka palapala a maʻalahi hoʻi e hoʻonohonoho. E hana wikiwiki ana i nā hoʻokō mua.

 

Hāʻawi ia i nā ʻāpana 85+, ʻoi aku ma mua o 45 mau plugins i loaʻa, kekahi mau kuhikuhi, a me 1000+ ikona. Hāʻawi pū ia i nā mea hana i hoʻohālikelike ʻia no nā hoʻolālā a me ka hoʻolālā pane. hiki iā ʻoe ke hoʻohui maʻalahi iā BootstrapVue i kāu mau papahana Nuxt.js me ka hoʻohana ʻana i ka module Nuxt.js.

 

Hoʻohana ʻia ia e like me ka hoʻohana ʻia ʻana o ka bootstrap CSS framework. Ua wehe ʻia ma Github me kahi o 12.9k mau hōkū a me 1.7k forks.

 

5. Vuesax

 

ʻO Vuesax kahi ʻāpana UI hou i hana ʻia me Vuejs e hana maʻalahi i nā papahana a me ke ʻano kūʻokoʻa a me ke ʻano ʻoluʻolu, hana ʻia ʻo vuesax mai ka wā ʻōpala a hoʻolālā ʻia no nā ʻano mea hoʻomohala āpau mai ka mea aloha mua a hiki i ka hope e makemake e hana maʻalahi i kā lākou ʻike ʻike. ka mea hoʻohana hope. He ʻokoʻa nā hoʻolālā no kēlā me kēia ʻāpana a ʻaʻole i hoʻopaʻa ʻia i nā hiʻohiʻona hiʻohiʻona a i ʻole nā ​​lula hoʻolālā, e hana ana i nā papahana i kūkulu ʻia me ia.

 

Hāʻawi ia i nā ʻaoʻao pane a me nā ʻāpana UI hiki ke hoʻohana hou ʻia. He mea maʻalahi hoʻi e hoʻomaka me ka hoʻohana ʻana i ka npm a i ʻole CDN. ʻAʻole ia i kākoʻo iā Vue CLI 3 i kāna mana hou. Ua wehe ʻia ma Github me nā hōkū 4.9k a me 6700 hoʻoiho NPM i kēlā me kēia pule.

 

6. Vue Hoʻolālā Aneti

 

ʻO ka Ant Design vue e pili ana i ka kikoʻī Ant Design, ʻo Ant design vue he waihona UI vue i loaʻa i kahi pūʻulu o nā ʻāpana kiʻekiʻe a me nā demos no ke kūkulu ʻana i nā pilina mea hoʻohana waiwai.

 

Hāʻawi ʻo Ant-design-vue i nā ʻāpana UI he nui e hoʻonui i kāu mau noi pūnaewele e like me Skeleton, drawer, statistics a me nā mea hou aku.

 

Me ka hoʻokuʻu hou ʻana o ka ant design vue version 2, ua hōʻano hou ʻia e ʻoi aku ka wikiwiki a me ka maʻalahi o ka hoʻohui ʻana, ʻoi aku ka nui o ka pūʻolo liʻiliʻi, a kākoʻo pū i ka Vue 3, New Composition API palapala. Kākoʻo ia i nā polokalamu kele pūnaewele hou, ka ʻaoʻao kikowaena Rendering, a me ka electron. Loaʻa iā ia ma luna o 13k mau hōkū ma Github a ma 39,693 mau pule pule NPM.

 

7. Kuasar

 

ʻO Quasar kekahi o nā papa hana Vue UI maikaʻi loa e hiki ai i nā mea hoʻomohala ke hoʻohana i hoʻokahi kumu kumu kumu no nā paepae āpau ma o Quasar CLI me nā hana maikaʻi loa ma waho o ka pahu. Hāʻawi ia i nā mea hoʻomohala e kālele i kā lākou ʻikepili o App ma mua o nā mea ʻē aʻe a pau e hoʻoheheʻe ʻia ai ka paila (kūkulu i ka ʻōnaehana, hoʻonohonoho) a puni ia. ua kālele ʻia ma ka hahai ʻana i nā ʻōlelo aʻoaʻo Material 2.0 a he kaiāulu kākoʻo pū kekahi.

 

ʻO kekahi o nā mea kūikawā e pili ana iā Quasar, ʻo ia ka hiki ke kākau i ke code i hoʻokahi manawa a kau ʻia ma ke ʻano he pūnaewele, he Mobile App me ka hoʻohana ʻana i hoʻokahi codebase. Aia kekahi mana hou i kēia manawa i ka beta e kākoʻo i nā hiʻohiʻona vue 3. Aia ma kahi o 17.8k mau hōkū ma Github.

 

8. Buefy

 

ʻO Buefy kahi waihona waihona UI māmā no Vue JS i hoʻokumu ʻia ma Bulma (kahi hoʻolālā CSS). Hoʻohui ʻo Buefy iā Bulma me Vue, e kōkua ana iā ʻoe e kūkulu i nā noi nani me ka hoʻohana ʻana i nā code liʻiliʻi. ʻo ia ka papa javascript no kāu kikowaena Bulma.

 

Hiki ke hoʻokomo piha ʻia a i ʻole nā ​​ʻāpana hoʻokahi ma kahi ʻaoʻao pūnaewele maʻamau. Maʻalahi ka hoʻohui ʻana i kāu papahana, hiki ke hana ʻia me ka npm a i ʻole CDN.

 

Hāʻawi ʻo Buefy i nā ʻāpana UI i mākaukau, hoʻonohonoho, a me nā kiʻi. Hiki i nā ʻāpana ke hoʻohana i ka SASS i kāu kumuhana. Kākoʻo ia i nā polokalamu kele hou.

 

9. Mea Vue

 

ʻO Vue Material kahi hoʻohana nui, māmā māmā e hoʻokō i nā kikoʻī Hoʻolālā Material. ʻO ia kekahi o ka hoʻohui maikaʻi loa ma waena o Vue.js a me Material Design specs! Hiki iā ʻoe ke hoʻonohonoho maʻalahi e kūpono i kāu mau pono āpau ma o kahi API maʻalahi.

 

He kūpono ia me ka hoʻolālā pane a me ke kākoʻo no nā polokalamu kele pūnaewele hou. Hoʻokaʻawale ʻia ka waihona i nā Themes, Components, a me UI Elements. Hāʻawi nā kumumanaʻo i kahi alakaʻi kikoʻī e pili ana i ke kumumanaʻo i kāu noi (a i ʻole e kākau i kāu mau kumumanaʻo ponoʻī) a ʻo nā ʻāpana a me nā UI Elements he papa kuhikuhi, hoʻokele, typography, icons, a me 30 mau mea hou aku. Loaʻa iā ia ma kahi o 9.2k hōkū a me 1.1k forks ma Github a me 21k + wiki hoʻoiho NPM.

 

10. KeenUI

 

ʻO KeenUI kahi waihona UI māmā vue.js me kahi API maʻalahi, i hoʻoulu ʻia e ka Google Material Design. ʻAʻole ʻo Keen UI kahi hoʻolālā CSS. No laila, ʻaʻole i hoʻokomo ʻia nā kaila no ka ʻōnaehana mānoanoa, typography, a me nā mea ʻē aʻe.

 

Loaʻa iā ia ma kahi o 30 mau mea hoʻohana hou. Hoʻopilikino ʻia nā ʻāpana ma ka hoʻohana ʻana i nā ʻano hoʻololi SASS. hiki iā ʻoe ke hoʻohui iā ia i kāu papahana me ka hoʻohana ʻana iā CDN a i ʻole npm. Ua wehe ʻia a loaʻa ma kahi o 4k mau hōkū ma Github.

 

Panina

 

ʻOi aku ka maʻalahi o nā hale waihona puke UI i ke kūkulu ʻana i kahi papahana. ʻO ke koho ʻana i ka mea kūpono e pili ana i nā hiʻohiʻona o ka papahana āu e makemake ai e hana. Ma mua o ka luʻu ʻana i kahi papahana hou, pono e nānā kekahi i ka waihona waihona UI i kūpono loa no ia kumu.