Vue JS ir progresīvs JavaScript ietvars, ko izmanto vienas lapas lietojumprogrammu (SPA) un lietotāja interfeisu izstrādei. Un tas ir viens no visplašāk izmantotajiem priekšgala ietvariem.
Viena interesanta Vue iezīme ir tās spēja sadalīt tīmekļa lapu dažādos komponentos. Un šis process kļūst vienkāršāks, izmantojot UI komponentu bibliotēkas.
Ir dažādas UI komponentu bibliotēkas, kas var palīdzēt viegli un ātri izveidot komponentus. Tāpēc šajā emuārā mēs apskatīsim 10 populārākās Vue UI komponentu bibliotēkas 2021. gadam.
1. PrimeVue
PrimeVue ir vienkārši lietojama, daudzpusīga un veiktspējīga Vue UI komponentu bibliotēka, kas palīdz izveidot lieliskas lietotāja saskarnes.
Tam ir vairāk nekā 80 UI komponenti ar pilnu Web satura pieejamības vadlīniju (WCAG) atbalstu un atsaucīgu dizainu. Pateicoties nesenajam atjauninājumam, bibliotēkai tagad ir pilns Vue 3 atbalsts. Tajā ir arī daudz vairāk komponentu.
Viena no labākajām Primevue lietām ir tā plašais komponentu klāsts. Tās svārstās no tabulām un lappušu lapām līdz labi izstrādātām, uz grafiku balstītām organizācijas diagrammām, kuras varat izmantot, lai izveidotu interaktīvas Vue lietotnes. Tas ir atvērtā koda, un tam ir 1 6,983+ zvaigznes vietnē Github un XNUMX nedēļas lejupielādes NPM.
2. Vuetify
Vuetify ir Vue lietotāja interfeisa bibliotēka ar skaisti izstrādātiem komponentiem, kas izmanto materiālu dizaina specifikāciju. Tas nozīmē, ka tas ir izstrādāts tieši saskaņā ar Materiālu dizaina specifikācijām, un katrs komponents ir rūpīgi izstrādāts, lai būtu modulārs, atsaucīgs un veiktspējīgs.
Vuetify ļauj pielāgot lietojumprogrammas ar unikālu un dinamisku izkārtojumu un pilnveidot savu komponentu stilus, izmantojot SASS mainīgos.
Tas atbalsta arī pieejamības vadlīnijas, visas mūsdienu pārlūkprogrammas un ir saderīgs ar Vue CLI-3. To ir viegli integrēt, un tajā ir daudz atkārtoti lietojamu lietotāja interfeisa komponentu, piemēram, karuseļi, navigācijas un kartes. Vuetify ir atvērtā koda versija, un tajā ir vairāk nekā 29 319,170 zvaigžņu vietnē Github un XNUMX XNUMX nedēļas lejupielādes NPM.
3. Chakra UI Vue
Chakra UI ir vienkārša modulāra un pieejama komponentu bibliotēka, kas sniedz jums rīkus, lai ātri un viegli izveidotu Vue lietojumprogrammas.
Visas sastāvdaļas ir pieejamas (tas stingri atbilst WAI-ARIA standartiem), tematiskas un saliekamas. Tas atbalsta atsaucīgus stilus jau no kastes un ir saderīgs ar tumšo režīmu.
Chakra lietotāja interfeiss satur arī tādu izkārtojuma komponentu kopu kā CBox un CStack, kas atvieglo komponentu stilu veidošanu, nododot rekvizītus. Tas arī ļauj automātiski importēt Chakra UI Vue komponentus, izmantojot tīmekļa pakotnes spraudņa risinājumu. Tas ir atvērtā pirmkoda, un tam ir 900+ zvaigznes Github un 331 nedēļas lejupielādes NPM.
4. Bootstrap Vue
BootstrapVue, izmantojot BootstrapVue, varat izveidot adaptīvus, mobilajām ierīcēm paredzētus un ARIA pieejamus projektus tīmeklī, izmantojot Vue.js un populāro priekšgala CSS bibliotēku — Bootstrap. Dokumentācija ir viegli saprotama, un to ir arī viegli iestatīt. Tas padara priekšgala ieviešanu ātrāku.
Tas piedāvā 85+ komponentus, vairāk nekā 45 pieejamos spraudņus, vairākas direktīvas un 1000+ ikonas. Tas nodrošina arī funkcionālus komponentus, kas pielāgoti izkārtojumiem un atsaucīgam dizainam. Varat arī viegli integrēt BootstrapVue savos Nuxt.js projektos, izmantojot Nuxt.js moduli.
Tas tiek izmantots tāpat kā bootstrap CSS ietvars. Tas ir atvērts Github ar aptuveni 12.9 1.7 zvaigznēm un XNUMX XNUMX dakšām.
5. Vuesax
Vuesax ir jauns lietotāja interfeisa komponentu ietvars, kas izveidots ar Vuejs, lai viegli un unikālā un patīkamā stilā veidotu projektus. Vuesax ir izveidots no nulles un paredzēts visu veidu izstrādātājiem, sākot no priekšgala mīļotājiem līdz aizmugursistēmai, kas vēlas viegli izveidot savu vizuālo pieeju gala lietotājs. Dizaini ir unikāli katram komponentam un nav saistīti ar vizuālām tendencēm vai dizaina likumiem, padarot arī ar to veidotus projektus unikālus.
tas piedāvā atsaucīgas lapas un atkārtoti lietojamus un pielāgojamus lietotāja interfeisa komponentus. Ir arī viegli sākt darbu, izmantojot npm vai CDN. Pašlaik tā neatbalsta Vue CLI 3 tās jaunākajā versijā. Tas ir atvērts Github ar aptuveni 4.9 6700 zvaigznēm un XNUMX nedēļas lejupielāžu NPM.
6. Ant Design Vue
Ant Design vue, pamatojoties uz Ant Design specifikāciju, Ant design vue ir vue lietotāja interfeisa bibliotēka, kas satur augstas kvalitātes komponentu un demonstrāciju komplektu bagātīgu, interaktīvu lietotāja saskarņu izveidei.
Ant-design-vue nodrošina daudz lietotāja interfeisa komponentu, lai bagātinātu jūsu tīmekļa lietojumprogrammas, piemēram, skeletu, atvilktni, statistiku un daudz ko citu.
Nesen iznākot ant design vue 2. versijai, tā ir atjaunināta, lai tā būtu ātrāka un vieglāk integrējama, mazāks komplekta izmērs, kā arī atbalsta Vue 3, New Composition API dokumentu. Tā atbalsta arī modernas tīmekļa pārlūkprogrammas, servera puses renderēšanu un elektronu. Tam ir vairāk nekā 13 39,693 zvaigžņu vietnē Github un XNUMX XNUMX nedēļas lejupielādes NPM.
7.Kvazārs
Quasar ir viens no labākajiem Vue UI ietvariem, kas ļauj izstrādātājiem izmantot vienu avota koda bāzi visām platformām, izmantojot Quasar CLI, izmantojot labāko praksi. Tas ļauj izstrādātājiem koncentrēties uz savas lietotnes saturu, nevis uz visiem citiem katlu pārklājuma elementiem (veidošanas sistēma, izkārtojums). tā ir vērsta uz Material 2.0 vadlīniju ievērošanu, un tai ir arī ļoti atbalstoša kopiena.
Viena no Quasar īpašajām īpašībām ir iespēja vienu reizi ierakstīt kodu un vienlaikus izvietot to kā vietni, mobilo lietotni, izmantojot tikai vienu kodu bāzi. Pašlaik ir arī jauna versija beta versijā, kas atbalstītu vue 3 funkcijas. Tam ir aptuveni 17.8 XNUMX zvaigznes vietnē Github.
8. Buefy
Buefy ir viegla lietotāja interfeisa komponentu bibliotēka Vue JS, kuras pamatā ir Bulma (CSS ietvars). Buefy apvieno Bulma ar Vue, palīdzot jums izveidot izskatīgas lietojumprogrammas, izmantojot minimālu kodu. tas ir JavaScript slānis jūsu Bulma interfeisam.
To var importēt pilnībā vai atsevišķi komponenti parastajā tīmekļa lapā. Tā integrēšana projektā ir diezgan vienkārša, to var izdarīt, izmantojot npm vai CDN.
Buefy nodrošina gatavus lietotāja interfeisa komponentus, izkārtojumu un ikonas. Komponenti var izmantot SASS jūsu motīvam. Tā atbalsta arī mūsdienu pārlūkprogrammas.
9. Vue materiāls
Vue Material ir plaši izmantots, viegls ietvars, kas ievieš Material Design specifikācijas. Tā ir viena no labākajām integrācijām starp Vue.js un Material Design specifikācijām! Izmantojot vienkāršu API, varat to viegli konfigurēt, lai tas atbilstu visām jūsu vajadzībām.
Tas ir saderīgs ar atsaucīgu dizainu un atbalstu visām mūsdienu tīmekļa pārlūkprogrammām. Bibliotēka ir sadalīta motīvos, komponentos un lietotāja interfeisa elementos. Motīvi sniedz precīzu norādījumu par to, kā lietojumprogrammai izveidot tēmu (vai rakstīt savus motīvus), un komponenti un lietotāja interfeisa elementi sastāv no izkārtojumiem, navigācijas, tipogrāfijas, ikonām un vēl 30 komponentiem. Tam ir aptuveni 9.2 1.1 zvaigznes un 21 XNUMX dakšas vietnē Github un XNUMX XNUMX + nedēļas lejupielādes NPM.
10. KeenUI
KeenUI ir viegla vue.js lietotāja interfeisa bibliotēka ar vienkāršu API, ko iedvesmojis Google materiālu dizains. Keen UI nav CSS ietvars. Tāpēc tajā nav iekļauti režģa sistēmas stili, tipogrāfija utt. Tā vietā galvenā uzmanība tiek pievērsta interaktīviem komponentiem, kuriem nepieciešams Javascript.
Tam ir aptuveni 30 atkārtoti lietojami komponenti. Komponenti ir pielāgojami, ignorējot stilus, izmantojot SASS mainīgos. varat to integrēt savā projektā, izmantojot CDN vai npm. Tas ir atvērts avots, un Github tam ir aptuveni 4k zvaigžņu.
Secinājumi
UI komponentu bibliotēkas noteikti atvieglo projekta izstrādi. Pareizā izvēle ir atkarīga no tā projekta iezīmēm, pie kura vēlaties strādāt. Pirms iedziļināties jaunā projektā, ieteicams pārskatīt šim mērķim vispiemērotāko lietotāja interfeisa komponentu bibliotēku.