Vue JS нь нэг хуудасны програмууд (SPA) болон хэрэглэгчийн интерфэйсийг хөгжүүлэхэд ашигладаг дэвшилтэт JavaScript хүрээ юм. Мөн энэ нь хамгийн өргөн хэрэглэгддэг урд талын хүрээнүүдийн нэг юм.
Vue-ийн нэг сонирхолтой онцлог нь вэб хуудсыг өөр өөр бүрэлдэхүүн хэсгүүдэд хуваах чадвар юм. UI бүрэлдэхүүн хэсгүүдийн сангуудыг ашигласнаар энэ процесс илүү хялбар болно.
Бүрэлдэхүүн хэсгүүдийг хялбар бөгөөд хурдан бүтээхэд туслах төрөл бүрийн UI бүрэлдэхүүн хэсгүүдийн сангууд байдаг. Тиймээс энэ блогт бид 10 оны шилдэг 2021 Vue UI бүрэлдэхүүн хэсгүүдийн сангуудыг авч үзэх болно.
1. PrimeVue
PrimeVue бол хэрэглэхэд хялбар, олон талт, гүйцэтгэл сайтай Vue UI бүрэлдэхүүн хэсгийн номын сан бөгөөд танд гайхалтай хэрэглэгчийн интерфэйс бүтээхэд тусалдаг.
Энэ нь вэб контентын хүртээмжийн удирдамж (WCAG) болон мэдрэмжтэй дизайныг бүрэн дэмждэг 80 гаруй UI бүрэлдэхүүн хэсэгтэй. Саяхан шинэчлэгдсэний ачаар номын сан Vue 3-ыг бүрэн дэмждэг болсон. Мөн илүү олон бүрэлдэхүүн хэсгүүдтэй болсон.
Primevue-ийн хамгийн сайн талуудын нэг бол түүний өргөн хүрээний бүрэлдэхүүн хэсгүүд юм. Эдгээр нь хүснэгт, хуудас үүсгэгчээс эхлээд график дээр суурилсан зохион байгуулалтын графикаас эхлээд интерактив Vue програмуудыг бий болгоход ашиглах боломжтой. Энэ нь нээлттэй эх сурвалж бөгөөд Github дээр 1к+ одтой, 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 стандартыг чанд мөрддөг), сэдэвчилсэн, зохицох боломжтой. Энэ нь хайрцагнаас гарсан мэдрэмжтэй хэв маягийг дэмждэг бөгөөд харанхуй горимд нийцдэг.
Чакра 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 хүрээг ашиглаж байгаатай адил хэрэглэгддэг. Энэ нь Github дээр нээлттэй эх сурвалжтай бөгөөд ойролцоогоор 12.9к од, 1.7к сэрээтэй.
5. Vuesax
Vuesax нь Vuejs-тэй хамтран төслүүдийг хялбархан, өвөрмөц, тааламжтай хэв маягаар бүтээх шинэ UI бүрэлдэхүүн хэсэг бөгөөд vuesax нь эхнээс нь бүтээгдсэн бөгөөд урд талын дурлагчаас эхлээд визуаль хандлагыг хялбархан бий болгохыг хүсдэг бүх төрлийн хөгжүүлэгчдэд зориулагдсан. эцсийн хэрэглэгч. Загварууд нь бүрэлдэхүүн хэсэг тус бүрийн хувьд өвөрмөц бөгөөд ямар ч харааны чиг хандлага, дизайны дүрэмд нийцдэггүй тул үүнтэй хамт баригдсан төслүүдийг бас өвөрмөц болгодог.
Энэ нь мэдрэмжтэй хуудсууд болон дахин ашиглах боломжтой, тохируулах боломжтой 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 нь Skeleton, шургуулга, статистик гэх мэт вэб програмуудыг баяжуулах олон тооны UI бүрэлдэхүүн хэсгүүдээр хангадаг.
Шоргоолжны дизайны vue 2-р хувилбар саяхан гарсан тул илүү хурдан, нэгтгэхэд хялбар, багцын хэмжээ бага байхаар шинэчлэгдсэн бөгөөд Vue 3, New Composition API баримт бичгийг дэмждэг. Мөн орчин үеийн вэб хөтчүүд, сервер талын Rendering болон электронуудыг дэмждэг. Энэ нь Github дээр 13 мянга гаруй одтой бөгөөд долоо хоногт 39,693 удаа 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-тэй хослуулсан нь танд хамгийн бага код ашиглан үзэсгэлэнтэй програмуудыг бүтээхэд тусална. Энэ нь таны Булма интерфейсийн JavaScript давхарга юм.
Үүнийг энгийн вэб хуудсанд бүрэн эсвэл нэг бүрэлдэхүүн хэсэг болгон импортлох боломжтой. Үүнийг төсөлдөө нэгтгэх нь маш хялбар бөгөөд npm эсвэл CDN ашиглан хийж болно.
Buefy нь UI-ийн бэлэн бүрэлдэхүүн хэсэг, зохион байгуулалт, дүрс дүрсээр хангадаг. Бүрэлдэхүүн хэсгүүд нь таны сэдэвт SASS ашиглаж болно. Мөн орчин үеийн хөтчүүдийг дэмждэг.
9. Vue материал
Vue Материал нь материалын дизайны техникийн үзүүлэлтүүдийг хэрэгжүүлдэг өргөн хэрэглэгддэг, хөнгөн бүтэц юм. Энэ бол Vue.js болон Материалын дизайны үзүүлэлтүүдийн хоорондох хамгийн сайн интеграцчлалын нэг юм! Та үүнийг хялбар API ашиглан өөрийн бүх хэрэгцээнд нийцүүлэн тохируулах боломжтой.
Энэ нь орчин үеийн бүх вэб хөтчүүдэд зориулсан мэдрэмжтэй дизайн, дэмжлэгтэй нийцдэг. Номын сан нь Сэдэв, Бүрэлдэхүүн хэсэг, UI элементүүдэд хуваагддаг. Сэдвүүд нь таны програмыг хэрхэн загварчлах (эсвэл өөрийн сэдвийг бичих) талаар тодорхой зааварчилгаа өгдөг бөгөөд Бүрэлдэхүүн хэсгүүд болон UI элементүүд нь зохион байгуулалт, навигаци, хэвлэх дүрс, дүрс болон өөр 30 бүрэлдэхүүн хэсгээс бүрдэнэ. Энэ нь Github дээр 9.2 мянга орчим одтой, 1.1 мянган сэрээтэй бөгөөд долоо хоног бүр NPM татдаг 21 мянга юм.
10. KeenUI
KeenUI бол Google-ийн Материалын дизайнаас санаа авсан энгийн API-тай, хөнгөн жинтэй vue.js UI номын сан юм. Keen UI нь CSS хүрээ биш юм. Тиймээс энэ нь сүлжээний систем, хэвлэх гэх мэт хэв маягийг оруулаагүй болно. Үүний оронд Javascript шаарддаг интерактив бүрэлдэхүүн хэсгүүдэд анхаарлаа хандуулдаг.
Энэ нь дахин ашиглах боломжтой 30 орчим бүрэлдэхүүн хэсэгтэй. Бүрэлдэхүүн хэсгүүдийг SASS хувьсагч ашиглан хэв маягийг дарж өөрчлөх боломжтой. Та үүнийг CDN эсвэл npm ашиглан төсөлдөө нэгтгэж болно. Энэ нь нээлттэй эх сурвалжтай бөгөөд Github дээр 4к орчим одтой.
Дүгнэлт
UI бүрэлдэхүүн хэсгүүдийн сангууд нь төслийг боловсруулахад илүү хялбар болгодог. Зөвийг сонгох нь таны ажиллахыг хүсч буй төслийн онцлогоос хамаарна. Шинэ төсөл рүү орохын өмнө зорилгодоо хамгийн тохиромжтой UI бүрэлдэхүүн хэсгийн номын санг үзэхийг зөвлөж байна.