Vue JS-ը առաջադեմ JavaScript շրջանակ է, որն օգտագործվում է մեկ էջի հավելվածներ (SPA) և օգտատերերի միջերեսներ մշակելու համար: Եվ դա ամենաշատ օգտագործվող առջևի շրջանակներից մեկն է այնտեղ:

 

Vue-ի հետաքրքիր առանձնահատկություններից մեկը կայքէջը տարբեր բաղադրիչների բաժանելու կարողությունն է: Եվ այս գործընթացը դառնում է ավելի պարզ՝ օգտագործելով UI բաղադրիչ գրադարանները:

 

Կան UI բաղադրիչների տարբեր գրադարաններ, որոնք կարող են օգնել ձեզ հեշտությամբ և արագ բաղադրիչներ ստեղծել: Այսպիսով, այս բլոգում մենք պատրաստվում ենք վերանայել 10 թվականի լավագույն 2021 Vue UI բաղադրիչ գրադարանները:

 

1. PrimeVue

 

PrimeVue-ն օգտագործման համար պարզ, բազմակողմանի և արդյունավետ Vue UI բաղադրիչ գրադարան է, որն օգնում է ձեզ ստեղծել հիանալի օգտագործողի միջերես:

 

Այն ունի ավելի քան 80+ UI բաղադրիչ՝ վեբ բովանդակության մատչելիության ուղեցույցների (WCAG) և արձագանքող դիզայնի լիարժեք աջակցությամբ: Եվ վերջին թարմացման շնորհիվ գրադարանն այժմ լիովին աջակցում է Vue 3-ին: Այն նաև ստացել է ավելի շատ բաղադրիչներ:

 

Primevue-ի լավագույն բաներից մեկը բաղադրիչների լայն տեսականի է: Դրանք տատանվում են՝ սկսած աղյուսակներից և էջագրիչներից մինչև գրաֆի վրա հիմնված լավ մշակված կազմակերպչական գծապատկերներ, որոնք կարող եք օգտագործել ինտերակտիվ Vue հավելվածներ ստեղծելու համար: Այն բաց կոդով է և ունի 1k+ աստղ Github-ում և շաբաթական 6,983 ներբեռնում NPM-ում:

 

2. Vuetify

 

Vuetify-ը Vue UI գրադարան է՝ գեղեցիկ ձեռքով պատրաստված բաղադրիչներով, որն օգտագործում է Նյութերի դիզայնի առանձնահատկությունը: Սա նշանակում է, որ այն մշակվել է հենց Նյութական դիզայնի բնութագրերի համաձայն՝ յուրաքանչյուր բաղադրիչ մանրակրկիտ մշակված է մոդուլային, արձագանքող և կատարողական լինելու համար:

 

Vuetify-ը թույլ է տալիս հարմարեցնել ձեր հավելվածները եզակի և դինամիկ դասավորություններով և կատարելագործել ձեր բաղադրիչների ոճերը՝ օգտագործելով SASS փոփոխականները:

 

Այն նաև աջակցում է մատչելիության ուղեցույցներին, բոլոր ժամանակակից բրաուզերներին և համատեղելի է Vue CLI-3-ի հետ: Այն հեշտ է ինտեգրվել և ունի բազմաթիվ բազմակի օգտագործման UI բաղադրիչներ, ինչպիսիք են կարուսելները, նավիգացիաները և քարտերը: Vuetify-ը բաց կոդով է և ունի ավելի քան 29 հազար աստղ Github-ում և 319,170 շաբաթական ներբեռնումներ NPM-ում:

 

3. Chakra UI Vue

 

Chakra UI-ն պարզ մոդուլային և հասանելի բաղադրիչ գրադարան է, որը ձեզ հնարավորություն է տալիս Vue հավելվածներ արագ և հեշտությամբ ստեղծելու համար:

 

Բոլոր բաղադրիչները հասանելի են (այն խստորեն հետևում է WAI-ARIA ստանդարտներին), թեմատիկ և բաղադրելի: Այն աջակցում է արձագանքող ոճերին և համատեղելի է մութ ռեժիմին:

 

Chakra UI-ն պարունակում է նաև դասավորության բաղադրիչների մի շարք, ինչպիսիք են CBox-ը և CStack-ը, որոնք հեշտացնում են ձեր բաղադրիչների ոճավորումը՝ փոխանցելով հենարաններ: Այն նաև թույլ է տալիս ավտոմատ ներմուծել Chakra UI Vue բաղադրիչները՝ օգտագործելով webpack plugin լուծումը: Այն բաց կոդով է և ունի 900+ աստղ Github-ում և շաբաթական 331 ներբեռնում NPM-ում:

 

4. Bootstrap Vue

 

BootstrapVue, BootstrapVue-ի միջոցով դուք կարող եք ստեղծել պատասխանող, բջջային հեռախոսների համար և ARIA հասանելի նախագծեր համացանցում՝ օգտագործելով Vue.js-ը և հանրաճանաչ առջևի CSS գրադարանը՝ Bootstrap: Փաստաթղթերը հեշտ է հասկանալ, ինչպես նաև հեշտ է կարգավորել: Այն ավելի արագ է դարձնում առջևի իրականացումները:

 

Այն առաջարկում է 85+ բաղադրիչ, ավելի քան 45 հասանելի պլագիններ, մի քանի հրահանգներ և 1000+ սրբապատկերներ: Այն նաև ապահովում է ֆունկցիոնալ բաղադրիչներ, որոնք հարմարեցված են դասավորության և արձագանքող դիզայնի համար: Դուք կարող եք նաև հեշտությամբ ինտեգրել BootstrapVue-ն ձեր Nuxt.js նախագծերի մեջ՝ օգտագործելով Nuxt.js մոդուլը:

 

Այն նաև օգտագործվում է այնպես, ինչպես օգտագործվում է bootstrap CSS շրջանակը: Այն բաց կոդով է Github-ում՝ մոտ 12.9 հազար աստղերով և 1.7 հազար պատառաքաղներով:

 

5. Vuesax

 

Vuesax-ը UI բաղադրիչի նոր շրջանակ է, որը ստեղծվել է Vuejs-ի հետ՝ նախագծերը հեշտությամբ և յուրահատուկ և հաճելի ոճով կատարելու համար, vuesax-ը ստեղծվել է զրոյից և նախատեսված է բոլոր տեսակի ծրագրավորողների համար՝ սկսած frontend-ի սիրահարից մինչև հետնամաս, ովքեր ցանկանում են հեշտությամբ ստեղծել իրենց տեսողական մոտեցումը։ վերջնական օգտագործողը. Դիզայնները եզակի են յուրաքանչյուր բաղադրիչի համար և խարսխված չեն որևէ վիզուալ միտումների կամ դիզայնի կանոնների վրա՝ դրանով կառուցված նախագծերը նույնպես յուրահատուկ դարձնելով:

 

այն առաջարկում է արձագանքող էջեր և բազմակի օգտագործման և հարմարեցված UI բաղադրիչներ: Հեշտ է նաև սկսել npm կամ CDN-ի միջոցով: Այն ներկայումս չի աջակցում Vue CLI 3-ին իր վերջին տարբերակում: Այն բաց կոդով է Github-ում, ունի մոտ 4.9 հազար աստղ և շաբաթական 6700 NPM ներբեռնում:

 

6. Ant Design Vue

 

Ant Design vue-ն, որը հիմնված է Ant Design-ի առանձնահատկությունների վրա, Ant design vue-ն vue UI գրադարան է, որը պարունակում է բարձրորակ բաղադրիչներ և ցուցադրություններ՝ հարուստ, ինտերակտիվ ինտերֆեյս ստեղծելու համար:

 

Ant-design-vue-ն ապահովում է բազմաթիվ UI բաղադրիչներ՝ ձեր վեբ հավելվածները հարստացնելու համար, ինչպիսիք են Skeleton-ը, գզրոցը, վիճակագրությունը և շատ ավելին:

 

Ant design vue տարբերակի վերջին թողարկումով այն թարմացվել է, որպեսզի ավելի արագ և հեշտ ինտեգրվի, փաթեթի փոքր չափը, ինչպես նաև աջակցում է Vue 2, New Composition API փաստաթուղթը: Այն նաև աջակցում է ժամանակակից վեբ բրաուզերներին, սերվերի կողմից մատուցման և էլեկտրոնին: Այն ունի ավելի քան 3 հազար աստղ Github-ում և շաբաթական 13 NPM ներբեռնումներ:

 

7. Քվազար

 

Quasar-ը Vue UI-ի լավագույն շրջանակներից մեկն է, որը թույլ է տալիս ծրագրավորողներին օգտագործել մեկ կոդերի բազա բոլոր հարթակների համար Quasar CLI-ի միջոցով՝ լավագույն փորձից դուրս: Այն թույլ է տալիս ծրագրավորողներին կենտրոնանալ իրենց Հավելվածի բովանդակության վրա, այլ ոչ թե դրա շուրջը գտնվող կաթսաների բոլոր այլ նյութերի (կառուցման համակարգ, դասավորություն): այն կենտրոնացած է Material 2.0 ուղեցույցներին հետևելու վրա և ունի նաև շատ աջակցող համայնք:

 

Quasar-ի առանձնահատկություններից մեկն այն է, որ մեկ անգամ կոդ գրելու և այն որպես վեբ կայք, բջջային հավելված տեղադրելու հնարավորությունն է ընդամենը մեկ կոդային բազայի միջոցով: Կա նաև նոր տարբերակ, որը ներկայումս բետա է, որը կաջակցի vue 3-ի առանձնահատկություններին: Այն ունի մոտ 17.8 հազար աստղ Github-ում:

 

8. Բուեֆի

 

Buefy-ը թեթև UI բաղադրիչ գրադարան է Vue JS-ի համար՝ հիմնված Bulma-ի վրա (CSS շրջանակ): Buefy-ն համատեղում է Bulma-ն Vue-ի հետ՝ օգնելով ձեզ ստեղծել գեղեցիկ հավելվածներ՝ օգտագործելով նվազագույն կոդ: դա javascript շերտն է ձեր Bulma ինտերֆեյսի համար:

 

Այն կարող է ներմուծվել կա՛մ ամբողջությամբ, կա՛մ առանձին բաղադրիչներ սովորական կայքէջում: Այն ինտեգրելը ձեր նախագծին բավականին հեշտ է, կարող է կատարվել կամ օգտագործելով npm կամ CDN:

 

Buefy-ն տրամադրում է պատրաստի UI բաղադրիչներ, դասավորություն և պատկերակներ: Բաղադրիչները կարող են օգտագործել SASS-ը ձեր թեմայի համար: Այն նաև աջակցում է ժամանակակից բրաուզերներին:

 

9. Vue Նյութ

 

Vue Material-ը լայնորեն օգտագործվող, թեթև շրջանակ է, որն իրականացնում է Material Design-ի բնութագրերը: Դա Vue.js-ի և Material Design-ի ակնարկների միջև լավագույն ինտեգրումներից մեկն է: Դուք կարող եք հեշտությամբ կարգավորել այն, որպեսզի համապատասխանի ձեր բոլոր կարիքներին հեշտ API-ի միջոցով:

 

Այն համատեղելի է արձագանքող դիզայնի և աջակցության հետ բոլոր ժամանակակից վեբ բրաուզերների համար: Գրադարանը բաժանված է թեմաների, բաղադրիչների և UI տարրերի: Թեմաները վերջնական ուղեցույց են տալիս, թե ինչպես կարելի է թեմատավորել ձեր հավելվածը (կամ գրել ձեր սեփական թեմաները), իսկ Բաղադրիչները և UI տարրերը բաղկացած են դասավորությունից, նավիգացիայից, տպագրությունից, պատկերակներից և ևս 30 բաղադրիչներից: Այն ունի մոտ 9.2 հազար աստղ և 1.1 հազար պատառաքաղ Github-ում և 21 հազար + շաբաթական NPM ներբեռնումներ:

 

10. KeenUI

 

KeenUI-ը թեթև vue.js UI գրադարան է՝ պարզ API-ով, որը ոգեշնչված է Google-ի նյութական դիզայնով: Keen UI-ն CSS շրջանակ չէ: Հետևաբար, այն չի ներառում ցանցային համակարգի ոճերը, տպագրությունը և այլն: Փոխարենը, ուշադրությունը կենտրոնացված է ինտերակտիվ բաղադրիչների վրա, որոնք պահանջում են Javascript:

 

Այն ունի մոտ 30 բազմակի օգտագործման բաղադրիչ: Բաղադրիչները կարգավորելի են՝ գերակայելով ոճերը՝ օգտագործելով SASS փոփոխականները: դուք կարող եք այն ինտեգրել ձեր նախագծին՝ օգտագործելով CDN կամ npm: Այն բաց կոդով է և ունի մոտ 4k աստղ Github-ում:

 

Եզրափակում

 

UI բաղադրիչ գրադարանները միանշանակ շատ ավելի հեշտացնում են նախագծի կառուցումը: Ճիշտը ընտրելը կախված է այն նախագծի առանձնահատկություններից, որոնց վրա ցանկանում եք աշխատել: Նախքան նոր նախագծի մեջ մտնելը, խորհուրդ է տրվում, որ մեկը վերանայի UI բաղադրիչի գրադարանը, որը լավագույնս համապատասխանում է այդ նպատակին: