Vue JS dia rafitra JavaScript mandroso izay ampiasaina amin'ny famolavolana rindranasa pejy tokana (SPA) sy Fifandraisan'ny mpampiasa. Ary io no iray amin'ireo frameworks front-end be mpampiasa indrindra any.
Ny endri-javatra iray mahaliana an'ny Vue dia ny fahafahany manapaka pejy web ho singa samihafa. Ary lasa tsotra kokoa ity dingana ity amin'ny fampiasana tranomboky singa UI.
Misy tranomboky singa UI isan-karazany izay afaka manampy anao hamorona singa mora sy haingana. Ka ato amin'ity bilaogy ity dia hijery ny tranomboky 10 Vue UI Component izahay ho an'ny taona 2021.
1. PrimeVue
PrimeVue dia Vue UI Component Library izay mora ampiasaina, azo ampiasaina ary mahomby izay manampy anao hananganana interface tsara.
Manana singa UI mihoatra ny 80 izy io miaraka amin'ny fanohanana feno ho an'ny Torolàlana momba ny fidirana amin'ny Internet (WCAG) sy ny famolavolana mamaly. Ary noho ny fanavaozana vao haingana, ny tranomboky izao dia manana fanohanana feno ho an'ny Vue 3. Nahazo singa maromaro ihany koa izy.
Ny iray amin'ireo zavatra tsara indrindra momba ny Primevue dia ireo singa marobe. Avy amin'ny tabilao sy ny paginators izy ireo ka hatramin'ny tabilao fandaminana mifototra amin'ny grafika izay azonao ampiasaina hamoronana fampiharana Vue interactive. Izy io dia loharano misokatra ary manana kintana 1k+ ao amin'ny Github ary 6,983 isan-kerinandro amin'ny NPM.
2. Vuetify
Vuetify dia Vue UI Library miaraka amin'ny singa tsara tarehy vita tanana izay mampiasa ny mari-pamantarana Material Design. Midika izany fa novolavolaina araka ny fepetra takian'ny Material Design miaraka amin'ny singa tsirairay novolavolaina tamim-pitandremana mba ho modular, mandray andraikitra ary mahomby.
Vuetify dia ahafahanao manamboatra ny rindranasao miaraka amin'ny lamina miavaka sy mavitrika ary tonga lafatra ny fomban'ny singanao amin'ny alàlan'ny fari-piadidiana SASS.
Izy io koa dia manohana ny torolàlana momba ny fidirana, ny navigateur maoderina rehetra, ary mifanaraka amin'ny Vue CLI-3. Mora ny mampiditra azy ary manana singa UI azo ampiasaina be dia be toy ny carousels, navigation ary karatra. Vuetify dia loharano misokatra ary misy kintana maherin'ny 29k ao amin'ny Github ary fampidinana 319,170 isan-kerinandro amin'ny NPM.
3. Chakra UI Vue
Chakra UI dia tranomboky singa modular sy azo idirana izay manome anao ny fitaovana hananganana rindranasa Vue haingana sy mora.
Ny singa rehetra dia azo idirana (manaraka tanteraka ny fenitry ny WAI-ARIA), azo ampiharina ary azo amboarina. Izy io dia manohana ny fomba fandraisana andraikitra ivelan'ny boaty ary mifanaraka amin'ny maizina.
Ny Chakra UI koa dia misy andiana singa fandrindrana toa ny CBox sy Cstack izay manamora ny famolavolana ny singanao amin'ny alàlan'ny fampitaovana props. Izy io koa dia ahafahanao manafatra ireo singa Chakra UI Vue amin'ny alàlan'ny vahaolana plugin webpack. Loharano misokatra izy io ary manana kintana 900+ ao amin'ny Github ary fampidinana 331 isan-kerinandro amin'ny NPM.
4. Bootstrap Vue
BootstrapVue, Miaraka amin'ny BootstrapVue dia azonao atao ny manangana tetik'asa mora raisina, voalohany amin'ny finday ary ARIA amin'ny Internet amin'ny alàlan'ny Vue.js sy ny tranomboky CSS malaza eo anoloana - Bootstrap. Mora azo ny antontan-taratasy ary mora apetraka ihany koa. Mahatonga ny fampiharana eo anoloana vita haingana kokoa izany.
Manolotra singa 85+ izy io, plugins mihoatra ny 45 misy, torolàlana maromaro ary kisary 1000+. Izy io koa dia manome singa miasa mifanaraka amin'ny famolavolana sy ny famolavolana mandray andraikitra. azonao atao koa ny mampiditra mora foana ny BootstrapVue amin'ny tetikasa Nuxt.js anao amin'ny fampiasana ny maody Nuxt.js.
Izy io koa dia ampiasaina mitovy amin'ny fampiasana ny rafitra bootstrap CSS. Misokatra amin'ny Github izy io miaraka amin'ny kintana 12.9k sy forks 1.7k.
5. Vuesax
Vuesax dia rafitra singa UI vaovao noforonina miaraka amin'ny Vuejs mba hanaovana tetikasa mora sy miaraka amin'ny fomba tokana sy mahafinaritra, ny vuesax dia noforonina hatrany am-boalohany ary natao ho an'ny karazana mpamorona rehetra manomboka amin'ny mpankafy eo anoloana ka hatrany amin'ny backend izay te-hamorona mora foana ny fomba fijeriny. ny mpampiasa farany. Ny endrika dia miavaka ho an'ny singa tsirairay ary tsy mifototra amin'ny fironana hita maso na ny fitsipiky ny famolavolana, ka mahatonga ny tetikasa naorina miaraka aminy manokana ihany koa.
manolotra pejy mandray andraikitra sy singa UI azo ampiasaina sy azo zahana. Mora ihany koa ny manomboka amin'ny fampiasana npm na CDN. Tsy manohana ny Vue CLI 3 amin'ny dikan-teny vao haingana. Misokatra amin'ny Github izy io miaraka amin'ny kintana 4.9k eo ho eo ary NPM 6700 isan-kerinandro.
6. Ant Design Vue
Ant Design vue mifototra amin'ny fanondroana Ant Design, Ant design vue dia vue UI famakiam-boky izay misy andiana singa avo lenta sy demo ho an'ny fananganana fifandraisana manankarena sy mifampiresaka.
Ant-design-vue dia manome singa UI maro hanatsara ny rindranasan-tranonkalanao toy ny Skeleton, drawer, statistika sy ny maro hafa.
Miaraka amin'ny famoahana ant design vue version 2 vao haingana, dia nohavaozina ho haingana kokoa sy mora kokoa ny mampiditra azy, habe kely kokoa, ary koa manohana ny Vue 3, antontan-taratasy API New Composition. Izy io koa dia manohana ny mpitety tranonkala maoderina, ny famandrihana amin'ny lafiny server, ary ny elektronika. Manana kintana maherin'ny 13k ao amin'ny Github izy ary amin'ny fampidinana NPM 39,693 isan-kerinandro.
7. Quasar
Quasar dia iray amin'ireo rafitra Vue UI tsara indrindra izay ahafahan'ny mpamorona mampiasa fototra kaody loharano iray ho an'ny sehatra rehetra amin'ny alàlan'ny Quasar CLI miaraka amin'ny fanao tsara indrindra ivelan'ny boaty. Izy io dia mamela ny mpamorona hifantoka amin'ny votoatin'ny App fa tsy ny zavatra hafa rehetra momba ny boiler plate (rafitra fananganana, layout) manodidina azy. izy io dia mifantoka amin'ny fanarahana ny torolàlana Material 2.0 ary manana vondrom-piarahamonina tena manohana ihany koa.
Ny iray amin'ireo zavatra manokana momba an'i Quasar dia ny fahafahana manoratra kaody indray mandeha ary mametraka azy io amin'ny maha-tranonkala azy, App Mobile mampiasa codebase iray monja. Misy ihany koa ny dikan-teny vaovao amin'izao fotoana izao amin'ny beta izay hanohana ny endri-javatra vue 3. Manana kintana 17.8k eo amin'ny Github izy io.
8. Buefy
Buefy dia tranomboky singa UI maivana ho an'ny Vue JS miorina amin'ny Bulma (rafitra CSS). Buefy dia manambatra an'i Bulma amin'ny Vue, manampy anao hanangana rindranasa tsara tarehy amin'ny fampiasana kaody kely indrindra. io no sosona javascript ho an'ny interface Bulma anao.
Azo ampidirina tanteraka na singa tokana amin'ny pejin-tranonkala mahazatra. Ny fampidirana azy amin'ny tetikasanao dia mora, azo atao amin'ny fampiasana npm na CDN.
Ny Buefy dia manome singa UI efa vita, lamina ary kisary. Ireo singa dia afaka mampiasa SASS amin'ny lohahevitrao. Izy io koa dia manohana ny navigateur maoderina.
9. Vue Material
Ny Vue Material dia rafitra ampiasaina betsaka sy maivana izay mampihatra ny mari-pamantarana Material Design. Izy io dia iray amin'ny fampidirana tsara indrindra eo amin'ny Vue.js sy ny mari-pamantarana Material Design! Azonao atao mora ny manamboatra azy io hifanaraka amin'ny filanao rehetra amin'ny alàlan'ny API mora.
Mifanaraka amin'ny famolavolana sy fanohanana ho an'ny navigateur Internet maoderina rehetra izy io. Ny tranomboky dia mizara ho Themes, Components, ary UI Elements. Ny lohahevitra dia manome torolalana voafaritra tsara amin'ny fomba fametahana loha-hevitra ny fampiharanao (na manoratra ny lohahevitry ny tenanao manokana) ary ny Components sy ny UI Elements dia misy lamina, fitetezana, typography, kisary ary singa 30 hafa. Manana kintana 9.2k eo ho eo izy io ary 1.1k forks ao amin'ny Github ary 21k + isan-kerinandro ny fandefasana NPM.
10. KeenUI
KeenUI dia tranomboky UI maivana vue.js misy API tsotra, aingam-panahy avy amin'ny Design Material an'ny Google. Keen UI dia tsy rafitra CSS. Noho izany, tsy misy fomba ho an'ny rafitra grid, typography, sns. Fa kosa, ny fifantohana dia amin'ny singa mifampiresaka izay mitaky Javascript.
Misy singa 30 eo ho eo azo ampiasaina indray. Ny singa dia azo zahana amin'ny alàlan'ny fanosehana ireo fomba amin'ny fampiasana ny fari-piainan'ny SASS. azonao ampidirina amin'ny tetikasanao izany na mampiasa CDN na npm. Izy io dia loharano misokatra ary manana kintana 4k eo amin'ny Github.
Famaranana
Ny tranomboky singa UI dia azo antoka fa manamora ny fananganana tetikasa iray. Ny fisafidianana ny tsara dia miankina amin'ny endri-javatra amin'ny tetikasa tianao hiasana. Alohan'ny hidirana amin'ny tetikasa vaovao, dia tsara ny mijery ny tranomboky singa UI izay mety indrindra amin'ny tanjona.