Vue JS - бул бир беттик тиркемелерди (SPA) жана Колдонуучу интерфейстерин иштеп чыгуу үчүн колдонулган прогрессивдүү JavaScript алкагы. Жана бул жерде эң көп колдонулган алдыңкы рамкалардын бири.
Vue бир кызыктуу өзгөчөлүгү, анын веб-баракчасын ар кандай компоненттерге бөлүү жөндөмдүүлүгү. Жана бул процесс UI компоненттеринин китепканаларын колдонуу менен жөнөкөйлөштүрүлөт.
Компоненттерди оңой жана тез түзүүгө жардам бере турган ар кандай UI компоненттер китепканалары бар. Ошентип, бул блогдо биз 10-жылга Vue UI компоненттеринин эң мыкты 2021 китепканасын карап чыгабыз.
1. PrimeVue
PrimeVue – колдонууга жөнөкөй, ар тараптуу жана натыйжалуу Vue UI компоненттеринин китепканасы, ал сизге укмуштуудай колдонуучу интерфейстерин түзүүгө жардам берет.
Анын 80ден ашык UI компоненттери бар жана Веб мазмунуна жеткиликтүүлүк колдонмолорун (WCAG) толук колдойт жана жооп берүүчү дизайн. Жана акыркы жаңыртуунун аркасында китепкана азыр 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 жүктөмөлөр бар.
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ти колдобойт. Бул болжол менен 4.9к жылдыз жана 6700 жума сайын жүктөлүп алынган NPM менен Githubда ачык булактуу.
6. Ant Design Vue
Ant Design спецификациясына негизделген Ant Design vue, Ant design vue - бул Vue UI китепканасы, анда бай, интерактивдүү колдонуучу интерфейстерин куруу үчүн жогорку сапаттагы компоненттер жана демонстрациялар топтому бар.
Ant-design-vue веб тиркемелериңизди байытуу үчүн көптөгөн UI компоненттерин камсыз кылат, мисалы, Skeleton, тартма, статистика жана башка көптөгөн нерселер.
Кумурсканын дизайны Vue 2 версиясынын жакында чыкканы менен, ал тезирээк жана оңой интеграцияланган, таңгактын көлөмү кичирээк болуп жаңыртылган, ошондой эле Vue 3, Жаңы Композиция API документин колдойт. Ал ошондой эле заманбап веб-браузерлерди, сервердик рендерингди жана электронду колдойт. Анын Githubда 13 миңден ашык жылдызы бар жана жума сайын 39,693 NPM жүктөлүп алынган.
7. Квазар
Quasar бул эң мыкты Vue UI алкактарынын бири, ал иштеп чыгуучуларга Quasar CLI аркылуу бардык платформалар үчүн эң мыкты тажрыйбалар менен бир баштапкы код базасын колдонууга мүмкүндүк берет. Бул иштеп чыгуучуларга анын тегерегиндеги бардык башка казан каптоочу нерселерге (куруу тутуму, макет) эмес, алардын Колдонмосунун мазмунуна көңүл бурууга мүмкүндүк берет. ал Материал 2.0 көрсөтмөлөрүн аткарууга багытталган жана ошондой эле абдан колдоочу коомчулукка ээ.
Quasar жөнүндө өзгөчө нерселердин бири - кодду бир жолу жазып, аны бир эле учурда бир эле код базасын колдонгон веб-сайт, Мобилдик колдонмо катары жайгаштыруу мүмкүнчүлүгү. Vue 3 функцияларын колдой турган жаңы версия дагы бета версиясында бар. Анын Githubда 17.8 миң жылдызы бар.
8. Buefy
Buefy бул Булмага негизделген Vue JS үчүн жеңил UI компоненттеринин китепканасы (CSS алкагы). Buefy Булманы Vue менен бириктирип, минималдуу кодду колдонуу менен жакшы көрүнгөн колдонмолорду түзүүгө жардам берет. бул Булма интерфейсиңиз үчүн JavaScript катмары.
Ал кадимки веб-баракчага толугу менен же жалгыз компоненттерден импорттолушу мүмкүн. Аны долбооруңузга интеграциялоо абдан оңой, аны npm же CDN аркылуу жасаса болот.
Buefy даяр UI компоненттерин, макетти жана сүрөтчөлөрдү камсыз кылат. Компоненттер темаңыз үчүн SASS колдоно алат. Ал ошондой эле заманбап браузерлерди колдойт.
9. Vue материалы
Vue Материалы материалдык Дизайн спецификацияларын ишке ашырган кеңири колдонулган, жеңил алкак. Бул Vue.js жана Материалдык Дизайн өзгөчөлүктөрүнүн ортосундагы эң мыкты интеграциялардын бири! Сиз аны оңой API аркылуу бардык муктаждыктарыңызга ылайыктап конфигурациялай аласыз.
Бул бардык заманбап веб-браузерлерге жооп берүүчү дизайн жана колдоо менен шайкеш келет. Китепкана темаларга, компоненттерге жана UI элементтерине бөлүнөт. Темалар колдонмоңузга кантип тематикалоо (же өзүңүздүн темаларыңызды жазуу) боюнча так көрсөтмөнү берет жана Компоненттер жана UI элементтери макеттерден, навигациядан, типографиядан, иконалардан жана дагы 30 компоненттен турат. Бул Github боюнча 9.2k жылдыз жана 1.1k айрыларды жана 21k + жума сайын жүктөө NPM бар.
10. KeenUI
KeenUI – бул Google'дун Материалдык Дизайнынан шыктанган, жөнөкөй API менен жеңил vue.js UI китепканасы. Keen UI CSS алкагы эмес. Ошондуктан, ал тор системасы үчүн стилдерди, типографияны ж.б. камтыбайт. Анын ордуна, көңүл Javascriptти талап кылган интерактивдүү компоненттерге бурулат.
Анын 30га жакын көп жолу колдонулуучу компоненттери бар. Компоненттерди SASS өзгөрмөлөрүнүн жардамы менен стилдерди жокко чыгаруу аркылуу ыңгайлаштырууга болот. сиз аны долбооруңузга CDN же npm аркылуу интеграциялай аласыз. Бул ачык булактуу жана Github'та болжол менен 4к жылдызы бар.
жыйынтыктоо
UI компоненттеринин китепканалары долбоорду түзүүнү бир топ жеңилдетет. Туура тандоо сиз иштегиңиз келген долбоордун өзгөчөлүктөрүнө жараша болот. Жаңы долбоорго киришүүдөн мурун, максатка эң ылайыктуу болгон UI компоненттеринин китепканасын карап чыгуу сунушталат.