Vue JS to progresywna platforma JavaScript używana do tworzenia aplikacji jednostronicowych (SPA) i interfejsów użytkownika. Jest to jeden z najpowszechniej używanych frameworków front-endowych.
Jedną interesującą funkcją Vue jest możliwość podziału strony internetowej na różne komponenty. Proces ten staje się prostszy dzięki zastosowaniu bibliotek komponentów interfejsu użytkownika.
Istnieją różne biblioteki komponentów interfejsu użytkownika, które mogą pomóc w łatwym i szybkim tworzeniu komponentów. Dlatego na tym blogu dokonamy przeglądu 10 najlepszych bibliotek komponentów Vue UI na rok 2021.
1. PrimeVue
PrimeVue to prosta w obsłudze, wszechstronna i wydajna biblioteka komponentów Vue UI, która pomaga tworzyć niesamowite interfejsy użytkownika.
Posiada ponad 80 komponentów interfejsu użytkownika z pełną obsługą wytycznych dotyczących dostępności treści internetowych (WCAG) i responsywnym projektem. Dzięki ostatniej aktualizacji biblioteka w pełni obsługuje Vue 3. Zawiera także o wiele więcej komponentów.
Jedną z najlepszych rzeczy w Primevue jest szeroka gama komponentów. Obejmują one tabele i paginatory, a także dobrze przygotowane schematy organizacyjne oparte na wykresach, których można używać do tworzenia interaktywnych aplikacji Vue. Jest oprogramowaniem typu open source i ma ponad 1 tys. gwiazdek na Githubie oraz 6,983 pobrań tygodniowo w NPM.
2. Vuefikuj
Vuetify to biblioteka interfejsu użytkownika Vue z pięknie wykonanymi ręcznie komponentami, która wykorzystuje specyfikację Material Design. Oznacza to, że został opracowany dokładnie według specyfikacji Material Design, a każdy komponent został starannie wykonany, aby był modułowy, responsywny i wydajny.
Vuetify pozwala dostosowywać aplikacje za pomocą unikalnych i dynamicznych układów oraz doskonalić style komponentów za pomocą zmiennych SASS.
Obsługuje także wytyczne dotyczące dostępności, wszystkie nowoczesne przeglądarki i jest kompatybilny z Vue CLI-3. Jest łatwy w integracji i zawiera wiele elementów interfejsu użytkownika wielokrotnego użytku, takich jak karuzele, nawigacje i karty. Vuetify to oprogramowanie typu open source, które ma ponad 29 319,170 gwiazdek na Githubie i XNUMX XNUMX pobrań tygodniowo w NPM.
3. Interfejs użytkownika czakr
Chakra UI to prosta modułowa i dostępna biblioteka komponentów, która zapewnia narzędzia do szybkiego i łatwego tworzenia aplikacji Vue.
Wszystkie komponenty są dostępne (ściśle przestrzegają standardów WAI-ARIA), można je tematycznie i komponować. Obsługuje responsywne style od razu po wyjęciu z pudełka i jest kompatybilny z trybem ciemnym.
Interfejs Chakra zawiera również zestaw komponentów układu, takich jak CBox i CStack, które ułatwiają stylizowanie komponentów poprzez przekazywanie rekwizytów. Umożliwia także automatyczny import komponentów Chakra UI Vue za pomocą wtyczki webpack. Jest oprogramowaniem typu open source i ma ponad 900 gwiazdek na Githubie i 331 pobrań tygodniowo w NPM.
4. Wersja Bootstrap
BootstrapVue Dzięki BootstrapVue możesz tworzyć responsywne, dostosowane do urządzeń mobilnych i dostępne w technologii ARIA projekty w Internecie, korzystając z Vue.js i popularnej biblioteki CSS front-end — Bootstrap. Dokumentacja jest łatwa do zrozumienia i łatwa w konfiguracji. Dzięki temu wdrożenia front-endowe przebiegają szybciej.
Oferuje ponad 85 komponentów, ponad 45 dostępnych wtyczek, kilka dyrektyw i ponad 1000 ikon. Zapewnia także komponenty funkcjonalne dostosowane do układów i responsywnego projektowania. możesz także łatwo zintegrować BootstrapVue ze swoimi projektami Nuxt.js za pomocą modułu Nuxt.js.
Jest również używany w taki sam sposób, jak framework CSS bootstrap. Jest open source na Githubie i zawiera około 12.9 tys. gwiazdek i 1.7 tys. forków.
5. Vuesax
Vuesax to nowy framework komponentów interfejsu użytkownika stworzony za pomocą Vuejs, aby łatwo tworzyć projekty w unikalnym i przyjemnym stylu. Vuesax jest tworzony od podstaw i przeznaczony dla wszystkich typów programistów, od miłośnika frontendu po backend, którzy chcą łatwo stworzyć swoje wizualne podejście do użytkownik końcowy. Projekty są unikalne dla każdego komponentu i nie są powiązane z żadnymi trendami wizualnymi ani zasadami projektowania, dzięki czemu budowane z ich pomocą projekty również są wyjątkowe.
oferuje responsywne strony oraz elementy interfejsu użytkownika, które można ponownie wykorzystać i które można dostosowywać. Rozpoczęcie pracy z npm lub CDN jest również łatwe. Obecnie nie obsługuje Vue CLI 3 w swojej najnowszej wersji. Jest dostępny na licencji open source na Githubie i ma około 4.9 tys. gwiazdek i 6700 pobrań tygodniowo w formacie NPM.
6. Projekt Ant Design
Ant Design vue oparta na specyfikacji Ant Design, Ant design vue to biblioteka interfejsu użytkownika vue zawierająca zestaw wysokiej jakości komponentów i wersji demonstracyjnych do tworzenia bogatych, interaktywnych interfejsów użytkownika.
Ant-design-vue zapewnia wiele komponentów interfejsu użytkownika, które wzbogacają Twoje aplikacje internetowe, takie jak szkielet, szuflada, statystyki i wiele więcej.
Wraz z niedawnym wydaniem wersji 2 ant design vue, została ona zaktualizowana, aby była szybsza i łatwiejsza w integracji, miała mniejszy rozmiar pakietu, a także obsługiwała Vue 3, dokument New Composition API. Obsługuje także nowoczesne przeglądarki internetowe, renderowanie po stronie serwera i elektronikę. Ma ponad 13 tys. gwiazdek na Githubie i 39,693 XNUMX pobrań tygodniowo NPM.
7. Kwazar
Quasar to jeden z najlepszych frameworków Vue UI, który umożliwia programistom korzystanie z jednej bazy kodu źródłowego dla wszystkich platform za pośrednictwem Quasar CLI z najlepszymi praktykami od razu po wyjęciu z pudełka. Pozwala programistom skupić się na zawartości aplikacji, a nie na wszystkich innych elementach związanych z nią (system kompilacji, układ). koncentruje się na przestrzeganiu wytycznych Material 2.0 i ma również bardzo wspierającą społeczność.
Jedną ze specjalnych cech Quasara jest możliwość jednorazowego napisania kodu i jednoczesnego wdrożenia go jako strony internetowej lub aplikacji mobilnej przy użyciu tylko jednej bazy kodu. Dostępna jest również nowa wersja, która jest obecnie w fazie beta i obsługuje funkcje vue 3. Ma około 17.8 tys. Gwiazd na Githubie.
8. Buefy
Buefy to lekka biblioteka komponentów interfejsu użytkownika dla Vue JS oparta na Bulmie (framework CSS). Buefy łączy Bulmę z Vue, pomagając tworzyć dobrze wyglądające aplikacje przy użyciu minimalnej ilości kodu. jest to warstwa javascript dla interfejsu Bulma.
Można go zaimportować w całości lub jako pojedyncze komponenty na zwykłą stronę internetową. Integracja go z projektem jest dość łatwa, można to zrobić za pomocą npm lub CDN.
Buefy zapewnia gotowe komponenty interfejsu użytkownika, układ i ikony. Komponenty mogą używać SASS do Twojego motywu. Obsługuje także nowoczesne przeglądarki.
9. Materiał Vue
Vue Material to szeroko stosowana, lekka platforma, która implementuje specyfikacje Material Design. Jest to jedna z najlepszych integracji specyfikacji Vue.js i Material Design! Możesz go łatwo skonfigurować tak, aby spełniał wszystkie Twoje potrzeby za pomocą prostego interfejsu API.
Jest kompatybilny z responsywnym projektem i obsługą wszystkich nowoczesnych przeglądarek internetowych. Biblioteka jest podzielona na motywy, komponenty i elementy interfejsu użytkownika. Motywy stanowią ostateczny przewodnik na temat tworzenia motywów aplikacji (lub pisania własnych motywów), a komponenty i elementy interfejsu użytkownika składają się z układów, nawigacji, typografii, ikon i 30 innych komponentów. Ma około 9.2 tys. gwiazdek i 1.1 tys. forków na Githubie oraz ponad 21 tys. pobrań NPM tygodniowo.
10. KeenUI
KeenUI to lekka biblioteka interfejsu użytkownika vue.js z prostym interfejsem API, zainspirowana Material Design firmy Google. Keen UI nie jest frameworkiem CSS. Dlatego nie obejmuje stylów systemu siatki, typografii itp. Zamiast tego skupiono się na interaktywnych komponentach wymagających JavaScript.
Zawiera około 30 elementów wielokrotnego użytku. Komponenty można dostosowywać, zastępując style za pomocą zmiennych SASS. możesz zintegrować go ze swoim projektem za pomocą CDN lub npm. Jest open source i ma około 4 tys. gwiazdek na Githubie.
Wnioski
Biblioteki komponentów interfejsu użytkownika zdecydowanie ułatwiają tworzenie projektu. Wybór odpowiedniego zależy od cech projektu, nad którym chcesz pracować. Przed przystąpieniem do nowego projektu zaleca się przejrzenie biblioteki komponentów interfejsu użytkownika, która najlepiej nadaje się do tego celu.