Vue JS არის პროგრესული JavaScript ჩარჩო, რომელიც გამოიყენება ერთგვერდიანი აპლიკაციების (SPA) და მომხმარებლის ინტერფეისების შესაქმნელად. და ეს არის ერთ-ერთი ყველაზე ფართოდ გამოყენებული ფრონტ-ენდის ჩარჩო.
Vue-ს ერთ-ერთი საინტერესო თვისებაა ვებგვერდის სხვადასხვა კომპონენტებად დაშლის შესაძლებლობა. და ეს პროცესი უფრო მარტივი ხდება UI კომპონენტის ბიბლიოთეკების გამოყენებით.
არსებობს სხვადასხვა UI კომპონენტის ბიბლიოთეკა, რომელიც დაგეხმარებათ შექმნათ კომპონენტები მარტივად და სწრაფად. ასე რომ, ამ ბლოგში, ჩვენ ვაპირებთ მიმოვიხილოთ 10 საუკეთესო Vue UI კომპონენტის ბიბლიოთეკა 2021 წლისთვის.
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. ჩაკრას UI Vue
Chakra UI არის მარტივი მოდულური და ხელმისაწვდომი კომპონენტის ბიბლიოთეკა, რომელიც გაძლევთ ინსტრუმენტებს Vue აპლიკაციების სწრაფად და მარტივად შესაქმნელად.
ყველა კომპონენტი ხელმისაწვდომია (ის მკაცრად მიჰყვება WAI-ARIA სტანდარტებს), თემატური და კომპოზირებადი. იგი მხარს უჭერს საპასუხო სტილებს გარეთ და თავსებადია ბნელ რეჟიმში.
ჩაკრას ინტერფეისი ასევე შეიცავს განლაგების კომპონენტებს, როგორიცაა CBox და CStack, რაც აადვილებს თქვენი კომპონენტების სტილს რეკვიზიტების გადაცემით. ის ასევე საშუალებას გაძლევთ ავტომატურად შემოიტანოთ Chakra UI Vue კომპონენტები ვებპაკეტის მოდულის გადაწყვეტის გამოყენებით. ის არის ღია კოდით და აქვს 900+ ვარსკვლავი Github-ზე და 331 კვირაში ჩამოტვირთვა NPM-ზე.
4. Bootstrap Vue
BootstrapVue, BootstrapVue-ით შეგიძლიათ შექმნათ საპასუხო, მობილურზე პირველ რიგში და ARIA ხელმისაწვდომი პროექტები ვებზე Vue.js-ის და პოპულარული წინა CSS ბიბლიოთეკის - Bootstrap-ის გამოყენებით. დოკუმენტაცია ადვილი გასაგებია და ასევე ადვილი დასაყენებელი. ის უფრო სწრაფად ახორციელებს წინა ნაწილის განხორციელებას.
ის გთავაზობთ 85+ კომპონენტს, 45-ზე მეტ ხელმისაწვდომ დანამატს, რამდენიმე დირექტივას და 1000+ ხატს. ის ასევე უზრუნველყოფს ფუნქციურ კომპონენტებს, რომლებიც მორგებულია განლაგებისა და საპასუხო დიზაინისთვის. თქვენ ასევე შეგიძლიათ მარტივად მოაწყოთ BootstrapVue თქვენს Nuxt.js პროექტებში Nuxt.js მოდულის გამოყენებით.
იგი ასევე გამოიყენება ისევე, როგორც გამოიყენება ჩატვირთვის CSS ჩარჩო. ის არის ღია წყარო Github-ზე, დაახლოებით 12.9 ათასი ვარსკვლავით და 1.7 ათასი ჩანგლით.
5. Vuesax
Vuesax არის ახალი UI კომპონენტის ჩარჩო, რომელიც შექმნილია Vuejs-ით, რათა პროექტები მარტივად და უნიკალური და სასიამოვნო სტილით განხორციელდეს, 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 გთავაზობთ უამრავ UI კომპონენტს თქვენი ვებ აპლიკაციების გასამდიდრებლად, როგორიცაა Skeleton, უჯრა, სტატისტიკა და მრავალი სხვა.
ant design vue ვერსიის 2-ის ბოლო გამოშვებით, ის განახლდა, რათა უფრო სწრაფი და ადვილად ინტეგრირებული იყოს, უფრო მცირე ზომის პაკეტი, და ასევე მხარს უჭერს Vue 3, New Composition API დოკუმენტს. იგი ასევე მხარს უჭერს თანამედროვე ვებ ბრაუზერებს, სერვერის მხარეს გადაცემას და ელექტრონს. მას აქვს 13 ათასზე მეტი ვარსკვლავი Github-ზე და 39,693 ყოველკვირეული ჩამოტვირთვა 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 არის ფართოდ გამოყენებული, მსუბუქი ჩარჩო, რომელიც ახორციელებს მასალის დიზაინის სპეციფიკაციებს. ეს არის ერთ-ერთი საუკეთესო ინტეგრაცია Vue.js-სა და Material Design-ის სპეციფიკაციებს შორის! თქვენ შეგიძლიათ მარტივად დააკონფიგურიროთ იგი თქვენს ყველა საჭიროებაზე მარტივი API-ის საშუალებით.
ის თავსებადია საპასუხო დიზაინთან და ყველა თანამედროვე ვებ ბრაუზერის მხარდაჭერასთან. ბიბლიოთეკა დაყოფილია თემებად, კომპონენტებად და UI ელემენტებად. თემები იძლევა საბოლოო სახელმძღვანელოს იმის შესახებ, თუ როგორ უნდა გააფორმოთ თქვენი აპლიკაცია (ან დაწეროთ თქვენი საკუთარი თემები) და კომპონენტები და UI ელემენტები შედგება განლაგებისგან, ნავიგაციისგან, ტიპოგრაფიისგან, ხატულებისგან და კიდევ 30 კომპონენტისგან. მას აქვს დაახლოებით 9.2 ათასი ვარსკვლავი და 1.1 ათასი ჩანგალი Github-ზე და 21 ათასი + ყოველკვირეული ჩამოტვირთვა NPM.
10. KeenUI
KeenUI არის მსუბუქი vue.js UI ბიბლიოთეკა მარტივი API-ით, შთაგონებული Google-ის Material Design-ით. Keen UI არ არის CSS ჩარჩო. ამიტომ, ის არ შეიცავს ბადის სისტემის სტილებს, ტიპოგრაფიას და ა.შ. სამაგიეროდ, ყურადღება გამახვილებულია ინტერაქტიულ კომპონენტებზე, რომლებიც საჭიროებენ Javascript-ს.
მას აქვს დაახლოებით 30 მრავალჯერადი გამოყენებადი კომპონენტი. კომპონენტების კონფიგურირებადია სტილების გადაფარვით SASS ცვლადების გამოყენებით. თქვენ შეგიძლიათ მისი ინტეგრირება თქვენს პროექტში CDN ან npm გამოყენებით. ის არის ღია წყაროდან და აქვს დაახლოებით 4k ვარსკვლავი Github-ზე.
დასკვნა
UI კომპონენტის ბიბლიოთეკები ნამდვილად აადვილებენ პროექტის შექმნას. სწორი არჩევა დამოკიდებულია პროექტის მახასიათებლებზე, რომელზეც გსურთ მუშაობა. ახალ პროექტში ჩასვლამდე მიზანშეწონილია განიხილოს UI კომპონენტის ბიბლიოთეკა, რომელიც საუკეთესოდ შეეფერება ამ მიზნისთვის.