Vue JS як чаҳорчӯбаи пешрафтаи JavaScript мебошад, ки барои таҳияи барномаҳои яксаҳифа (SPA) ва интерфейсҳои корбар истифода мешавад. Ва он яке аз чаҳорчӯбаҳои фарогиртарин дар он ҷост.
Як хусусияти ҷолиби 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 манбаи кушода аст ва дорои зиёда аз 29к ситораҳо дар Github ва 319,170 зеркашии ҳарҳафтаина дар NPM.
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 ба осонӣ ҳамҷоя кунед.
Он инчунин ҳамон тавре истифода мешавад, ки чаҳорчӯбаи CSS bootstrap истифода мешавад. Он дар Github бо тақрибан 12.9к ситора ва 1.7к фаршҳо кушода аст.
5. Vuesax
Vuesax як чаҳорчӯбаи ҷузъҳои нави UI мебошад, ки бо Vuejs барои сохтани лоиҳаҳо ба осонӣ ва бо услуби беназир ва гуворо сохта шудааст, vuesax аз сифр сохта шудааст ва барои ҳама намуди таҳиягарон аз дӯстдоштаи пештара то пуштибон, ки мехоҳад муносибати визуалии худро ба осонӣ эҷод кунад, тарҳрезӣ шудааст. истифодабарандаи ниҳоӣ. Тарҳҳо барои ҳар як ҷузъ беназиранд ва ба ягон тамоюлҳои визуалӣ ё қоидаҳои тарроҳӣ лангар нестанд ва лоиҳаҳои бо он сохташуда низ беназир мебошанд.
он саҳифаҳои ҷавобгӯ ва ҷузъҳои UI аз нав истифодашаванда ва танзимшавандаро пешниҳод мекунад. Оғози кор бо npm ё CDN низ осон аст. Дар айни замон он дар версияи охирини худ Vue CLI 3-ро дастгирӣ намекунад. Он дар Github бо тақрибан 4.9к ситора ва 6700 зеркашии ҳафтаинаи NPM кушода аст.
6. Ант Design Vue
Vue Design Vue дар асоси мушаххасоти Ant Design, Ant design vue китобхонаи vue UI мебошад, ки дорои маҷмӯи ҷузъҳои баландсифат ва намоишҳо барои сохтани интерфейсҳои бой ва интерактивии корбар аст.
Ant-design-vue миқдори зиёди ҷузъҳои UI-ро барои ғанӣ гардонидани замимаҳои веби шумо ба монанди Skeleton, Обоварь, омор ва ғайра таъмин мекунад.
Бо нашри охирини версияи ant design vue 2, он таҷдид карда шуд, ки ҳамгироӣ зудтар ва осонтар, андозаи бастаи хурдтар бошад ва инчунин Vue 3, ҳуҷҷати нави таркиби API-ро дастгирӣ мекунад. Он инчунин браузерҳои муосири веб, Rendering аз ҷониби сервер ва электрониро дастгирӣ мекунад. Он дар Github зиёда аз 13 ҳазор ситора дорад ва дар 39,693 зеркашии ҳарҳафтаинаи NPM.
7. Квазар
Quasar яке аз беҳтарин чаҳорчӯбаҳои Vue UI мебошад, ки ба таҳиягарон имкон медиҳад, ки як пойгоҳи рамзи сарчашмаро барои ҳама платформаҳо тавассути Quasar CLI бо таҷрибаҳои беҳтарин аз қуттӣ истифода баранд. Он ба таҳиягарон имкон медиҳад, ки ба мундариҷаи Барномаи худ тамаркуз кунанд, на ҳама чизҳои дигари пӯшонидани дегхона (системаи сохтмон, тарҳрезӣ) дар атрофи он. он ба риояи дастурҳои Material 2.0 нигаронида шудааст ва инчунин як ҷомеаи хеле дастгирӣ дорад.
Яке аз чизҳои махсус дар бораи Quasar ин қобилияти навиштани код як маротиба ва ҳамзамон ҷойгир кардани он ҳамчун вебсайт, Барномаи мобилӣ бо истифода аз як пойгоҳи код мебошад. Инчунин як версияи нав дар ҳоли ҳозир дар бета мавҷуд аст, ки хусусиятҳои Vue 3-ро дастгирӣ мекунад. Он дар Github тақрибан 17.8 ҳазор ситора дорад.
8. Буфи
Buefy як китобхонаи ҷузъҳои сабуки UI барои Vue JS дар асоси Bulma (чаҳорчӯбаи CSS) мебошад. Buefy Bulma-ро бо Vue муттаҳид мекунад ва ба шумо кӯмак мекунад, ки бо истифода аз рамзи ҳадди аққал барномаҳои зебо созед. он қабати JavaScript барои интерфейси Bulma аст.
Он метавонад пурра ё ҷузъҳои алоҳида дар вебсайти оддӣ ворид карда шавад. Интегратсияи он ба лоиҳаи шумо хеле осон аст, онро бо истифода аз npm ё CDN анҷом додан мумкин аст.
Buefy ҷузъҳои UI тайёр, тарҳрезӣ ва нишонаҳо медиҳад. Компонентҳо метавонанд SASS-ро барои мавзӯи шумо истифода баранд. Он инчунин браузерҳои муосирро дастгирӣ мекунад.
9. Материали Vue
Vue Material як чаҳорчӯбаи васеъ истифодашаванда ва сабук аст, ки мушаххасоти тарроҳии моддиро амалӣ мекунад. Ин яке аз беҳтарин ҳамгироӣ байни мушаххасоти Vue.js ва Material Design аст! Шумо метавонед онро ба осонӣ танзим кунед, то ба ҳама ниёзҳои шумо тавассути API осон мувофиқат кунад.
Он бо тарҳи ҷавобгӯ ва дастгирии ҳама веб-браузерҳои муосир мувофиқ аст. Китобхона ба мавзӯъҳо, ҷузъҳо ва унсурҳои UI тақсим карда шудааст. Мавзӯъҳо дастури дақиқро оид ба мавзӯи барномаи шумо (ё навиштани мавзӯъҳои худ) медиҳанд ва ҷузъҳо ва унсурҳои интерфейси интерфейси аз тарҳҳо, паймоиш, типография, нишонаҳо ва 30 ҷузъҳои дигар иборатанд. Он дар Github тақрибан 9.2к ситора ва 1.1к фард дорад ва 21к + зеркашиҳои ҳарҳафтаинаи NPM.
10. KeenUI
KeenUI китобхонаи сабуки vue.js UI бо API оддӣ аст, ки аз тарҳрезии маводи Google илҳом гирифта шудааст. Keen UI чаҳорчӯбаи CSS нест. Аз ин рӯ, он услубҳои системаи шабакавӣ, матбаа ва ғайраро дар бар намегирад. Ба ҷои ин, таваҷҷӯҳ ба ҷузъҳои интерактивӣ, ки Javascript-ро талаб мекунанд, равона карда шудааст.
Он дорои тақрибан 30 ҷузъҳои дубора истифодашаванда мебошад. Ҷузъҳо тавассути барҳам додани услубҳо бо истифода аз тағирёбандаҳои SASS танзим карда мешаванд. шумо метавонед онро бо истифода аз CDN ё npm ба лоиҳаи худ ворид кунед. Он сарчашмаи кушода аст ва дар Github тақрибан 4k ситора дорад.
хулоса
Китобхонаҳои ҷузъҳои UI бешубҳа сохтани лоиҳаро хеле осон мекунанд. Интихоби дуруст аз хусусиятҳои лоиҳае, ки шумо мехоҳед кор кунед, вобаста аст. Пеш аз ворид шудан ба лоиҳаи нав, тавсия дода мешавад, ки китобхонаи ҷузъҳои UI-ро аз назар гузаронад, ки ба ин мақсад мувофиқтар аст.