Vue JS – бір беттік қолданбаларды (SPA) және пайдаланушы интерфейстерін әзірлеу үшін пайдаланылатын прогрессивті JavaScript жүйесі. Және бұл жерде ең көп қолданылатын фронтальды фреймворктердің бірі.
Vue-тің бір қызықты ерекшелігі - оның веб-бетті әртүрлі құрамдас бөліктерге бөлу мүмкіндігі. Бұл процесс UI құрамдас кітапханаларын пайдалану арқылы оңайырақ болады.
Компоненттерді оңай және жылдам жасауға көмектесетін әртүрлі UI құрамдас кітапханалары бар. Осы блогта біз 10 жылға арналған ең жақсы 2021 Vue UI құрамдас кітапханаларын қарастырамыз.
1. PrimeVue
PrimeVue – пайдаланудың қарапайым, жан-жақты және өнімді Vue UI құрамдас кітапханасы, ол керемет пайдаланушы интерфейстерін құруға көмектеседі.
Оның веб-мазмұнға қол жетімділік нұсқауларын (WCAG) толық қолдауы және жауап беру дизайны бар 80+ астам UI құрамдастары бар. Жақында жаңартылған жаңартудың арқасында кітапхана енді Vue 3-ке толық қолдау көрсетеді. Сондай-ақ оның көптеген компоненттері бар.
Primevue туралы ең жақсы нәрселердің бірі - оның кең ауқымды компоненттері. Олар кестелер мен пагинаторлардан бастап интерактивті Vue қолданбаларын жасау үшін пайдалануға болатын жақсы жасалған графикаға негізделген ұйымдастыру диаграммаларына дейін ауытқиды. Бұл ашық бастапқы болып табылады және Github-та 1k+ жұлдызы және NPM-те апта сайын 6,983 жүктеп алынуы бар.
2. Vuetify
Vuetify - бұл Материалдық дизайн спецификациясын пайдаланатын әдемі қолдан жасалған компоненттері бар Vue UI кітапханасы. Бұл оның Материалдық дизайн спецификацияларына сәйкес әзірленгенін білдіреді, оның әрбір компоненті модульдік, жауапты және өнімді болу үшін мұқият жасалған.
Vuetify қолданбаларды бірегей және динамикалық орналасулармен теңшеуге және SASS айнымалы мәндерін пайдаланып құрамдастардың стильдерін жетілдіруге мүмкіндік береді.
Ол сондай-ақ қол жетімділік нұсқауларын, барлық заманауи браузерлерді қолдайды және Vue CLI-3 үйлесімді. Оны біріктіру оңай және карусельдер, навигациялар және карталар сияқты көптеген қайта пайдалануға болатын UI құрамдастары бар. Vuetify ашық көзі болып табылады және Github-та 29 мыңнан астам жұлдыз және NPM-те апта сайын 319,170 XNUMX жүктеп алынады.
3. Чакра UI Vue
Chakra UI - бұл Vue қолданбаларын жылдам және оңай құруға арналған құралдарды беретін қарапайым модульдік және қол жетімді компоненттер кітапханасы.
Барлық компоненттер қол жетімді (ол WAI-ARIA стандарттарына қатаң сәйкес келеді), тақырыптық және құрастыруға болады. Ол қораптан тыс жауап беретін стильдерді қолдайды және қараңғы режиммен үйлесімді.
Chakra UI сонымен қатар CBox және CStack сияқты орналасу құрамдастарының жиынтығын қамтиды, олар тіректерді беру арқылы компоненттерді сәндеуді жеңілдетеді. Ол сондай-ақ Chakra UI Vue құрамдастарын веб-пакет плагинінің шешімі арқылы автоматты түрде импорттауға мүмкіндік береді. Бұл ашық бастапқы болып табылады және Github-та 900+ жұлдызы және NPM-де 331 апта сайын жүктеп алынуы бар.
4. Bootstrap Vue
BootstrapVue, BootstrapVue көмегімен Vue.js және танымал алдыңғы қатарлы CSS кітапханасы — Bootstrap арқылы вебте жауап беретін, мобильді және ARIA қолжетімді жобаларды құра аласыз. Құжаттаманы түсіну оңай және оны орнату да оңай. Бұл алдыңғы қатардағы енгізулерді жылдамырақ етеді.
Ол 85+ құрамдастарды, 45-тен астам қолжетімді плагиндерді, бірнеше директиваларды және 1000+ белгішелерді ұсынады. Ол сондай-ақ макеттер мен жауап беретін дизайнға бейімделген функционалдық құрамдастарды қамтамасыз етеді. сонымен қатар Nuxt.js модулін пайдаланып BootstrapVue бағдарламасын Nuxt.js жобаларыңызға оңай біріктіруге болады.
Ол сондай-ақ bootstrap CSS фреймворк пайдаланылғандай пайдаланылады. Ол Github-та 12.9 мың жұлдыз және 1.7 мың шанышқысы бар ашық бастапқы коды бар.
5. Vueax
Vuesax - жобаларды оңай және бірегей және жағымды стильде жасау үшін Vuejs көмегімен жасалған жаңа UI құрамдас бөлігі, vuesax нөлден бастап жасалған және өзінің визуалды тәсілін оңай жасағысы келетін алдыңғы қатардағы әуесқойдан серверге дейінгі әзірлеушілердің барлық түріне арналған. соңғы пайдаланушы. Дизайндар әрбір құрамдас үшін бірегей және кез келген визуалды үрдістерге немесе дизайн ережелеріне байланысты емес, онымен жасалған жобаларды да бірегей етеді.
ол жауап беретін беттерді және қайта пайдалануға болатын және теңшелетін UI құрамдастарын ұсынады. Сондай-ақ npm немесе CDN арқылы бастау оңай. Ол қазіргі уақытта соңғы нұсқасында Vue CLI 3 қолданбасын қолдамайды. Ол Github-та 4.9 мың жұлдызы және апта сайынғы 6700 NPM жүктеуі бар ашық бастапқы коды бар.
6. Ant Design Vue
Ant Design спецификациясына негізделген Ant Design vue, Ant design vue — бай, интерактивті пайдаланушы интерфейстерін құруға арналған жоғары сапалы компоненттер мен демонстрациялар жинағын қамтитын vue UI кітапханасы.
Ant-design-vue веб-қосымшаларды байыту үшін көптеген UI құрамдастарын ұсынады, мысалы, Skeleton, тартпа, статистика және т.б.
Ant design vue нұсқасының 2-нұсқасының жақында шығарылымымен ол тезірек және біріктіру оңайырақ, жинақ өлшемі кішірек болу үшін жаңартылды, сонымен қатар Vue 3, Жаңа композиция API құжатын қолдайды. Ол сондай-ақ заманауи веб-браузерлерді, серверлік көрсетуді және электронды қолдайды. Оның Github-та 13 мыңнан астам жұлдызы бар және апта сайынғы 39,693 XNUMX NPM жүктеуі бар.
7. Квазар
Quasar - ең жақсы тәжірибелермен Quasar CLI арқылы әзірлеушілерге барлық платформалар үшін бір бастапқы код базасын пайдалануға мүмкіндік беретін ең жақсы Vue UI құрылымдарының бірі. Бұл әзірлеушілерге оның айналасындағы барлық басқа қазандық жабындарына (құрылыс жүйесі, орналасу) емес, олардың қолданбасының мазмұнына назар аударуға мүмкіндік береді. ол Материал 2.0 нұсқауларын орындауға бағытталған және сонымен бірге өте қолдау көрсететін қауымдастыққа ие.
Quasar туралы ерекше нәрселердің бірі - кодты бір рет жазу және оны бір уақытта бір кодтық базаны қолданатын веб-сайт, мобильді қосымша ретінде орналастыру мүмкіндігі. Сондай-ақ, қазіргі уақытта бета-нұсқада Vue 3 мүмкіндіктерін қолдайтын жаңа нұсқасы бар. Оның Github-та шамамен 17.8 мың жұлдызы бар.
8. Buefy
Buefy — Bulma (CSS құрылымы) негізіндегі Vue JS үшін жеңіл UI құрамдас кітапханасы. Buefy Bulma-ны Vue-мен біріктіріп, минималды кодты пайдалана отырып, әдемі қолданбаларды жасауға көмектеседі. бұл Bulma интерфейсіне арналған JavaScript қабаты.
Оны кәдімгі веб-бетке толығымен немесе жеке құрамдастарды импорттауға болады. Оны жобаңызға біріктіру өте оңай, оны npm немесе CDN арқылы жасауға болады.
Buefy дайын UI құрамдастарын, орналасуын және белгішелерін ұсынады. Компоненттер сіздің тақырыбыңызға SASS пайдалана алады. Ол сонымен қатар заманауи браузерлерді қолдайды.
9. Vue материалы
Vue материалы - бұл Материалдық дизайнның техникалық сипаттамаларын жүзеге асыратын кеңінен қолданылатын, жеңіл құрылым. Бұл Vue.js және Material Design ерекшеліктері арасындағы ең жақсы интеграцияның бірі! Сіз оны оңай API арқылы барлық қажеттіліктеріңізге сай етіп оңай конфигурациялай аласыз.
Ол барлық заманауи веб-шолғыштар үшін жауап беретін дизайнмен және қолдауымен үйлесімді. Кітапхана тақырыптарға, құрамдастарға және UI элементтеріне бөлінген. Тақырыптар қолданбаның тақырыбына (немесе өзіңіздің тақырыптарыңызды жазуға) қатысты нақты нұсқаулық береді және Құрамдас бөліктер мен UI элементтері орналасулардан, навигациядан, типографиядан, белгішелерден және тағы 30 құрамдастардан тұрады. Оның Github-та шамамен 9.2 мың жұлдызы мен 1.1 мың шанышқысы және 21 мың + апта сайынғы NPM жүктеулері бар.
10. KeenUI
KeenUI — Google материалды дизайнымен шабыттандырылған қарапайым API интерфейсі бар жеңіл салмақты vue.js UI кітапханасы. Keen UI CSS жүйесі емес. Сондықтан ол тор жүйесіне, типографияға және т.б. мәнерлерді қамтымайды. Оның орнына Javascript қажет интерактивті құрамдастарға назар аударылады.
Оның 30-ға жуық қайта пайдалануға болатын компоненттері бар. Құрамдастарды SASS айнымалы мәндерін пайдаланып мәнерлерді қайта анықтау арқылы теңшеуге болады. оны жобаңызға CDN немесе npm арқылы біріктіруге болады. Оның бастапқы көзі ашық және Github-та шамамен 4k жұлдызы бар.
қорытынды
UI құрамдас кітапханалары жобаны құруды айтарлықтай жеңілдетеді. Дұрысын таңдау сіз жұмыс істегіңіз келетін жобаның ерекшеліктеріне байланысты. Жаңа жобаға кіріспес бұрын, мақсатқа ең қолайлы UI құрамдас кітапханасын қарап шыққан жөн.