Vue JS, tek sayfalı uygulamalar (SPA'lar) ve Kullanıcı Arayüzleri geliştirmek için kullanılan, ilerici bir JavaScript çerçevesidir. Ve en yaygın kullanılan ön uç çerçevelerden biridir.
Vue'nun ilginç bir özelliği, bir web sayfasını farklı bileşenlere ayırma yeteneğidir. Ve bu süreç, kullanıcı arayüzü bileşen kitaplıklarının kullanılmasıyla daha da basitleşiyor.
Bileşenleri kolay ve hızlı bir şekilde oluşturmanıza yardımcı olabilecek çeşitli UI bileşen kitaplıkları vardır. Bu blogda 10 yılının en iyi 2021 Vue UI Bileşen Kitaplığını inceleyeceğiz.
1. PrimeVue
PrimeVue, harika kullanıcı arayüzleri oluşturmanıza yardımcı olan, kullanımı basit, çok yönlü ve performanslı bir Vue UI Bileşen Kitaplığıdır.
Web İçeriği Erişilebilirlik Yönergeleri (WCAG) ve duyarlı tasarım için tam destek sağlayan 80'den fazla kullanıcı arayüzü bileşenine sahiptir. Ve yakın zamanda yapılan bir güncelleme sayesinde kütüphane artık Vue 3 için tam desteğe sahip. Ayrıca çok sayıda bileşen daha var.
Primevue'nun en iyi yanlarından biri geniş bileşen yelpazesidir. Bunlar, tablolar ve sayfalayıcılardan etkileşimli Vue uygulamaları oluşturmak için kullanabileceğiniz iyi hazırlanmış grafik tabanlı organizasyon şemalarına kadar çeşitlilik gösterir. Açık kaynaklıdır ve Github'da 1k'dan fazla yıldıza sahiptir ve NPM'de haftalık 6,983 indirmeye sahiptir.
2. Vuetify
Vuetify, Materyal Tasarımı spesifikasyonunu kullanan, güzelce hazırlanmış Bileşenlere sahip bir Vue UI Kitaplığıdır. Bu, her bileşenin modüler, duyarlı ve performanslı olacak şekilde titizlikle hazırlanmış olduğu Materyal Tasarımı spesifikasyonlarına göre tam olarak geliştirildiği anlamına gelir.
Vuetify, uygulamalarınızı benzersiz ve dinamik düzenlerle özelleştirmenize ve SASS değişkenlerini kullanarak bileşenlerinizin stillerini mükemmelleştirmenize olanak tanır.
Ayrıca erişilebilirlik yönergelerini ve tüm modern tarayıcıları destekler ve Vue CLI-3 ile uyumludur. Entegrasyonu kolaydır ve atlı karıncalar, navigasyonlar ve kartlar gibi çok sayıda yeniden kullanılabilir kullanıcı arayüzü bileşenine sahiptir. Vuetify açık kaynaktır ve Github'da 29'den fazla yıldıza ve NPM'de haftalık 319,170 indirmeye sahiptir.
3. Çakra Kullanıcı Arayüzü Vue
Chakra UI, Vue uygulamalarını hızlı ve kolay bir şekilde oluşturmanızı sağlayacak araçları sağlayan basit, modüler ve erişilebilir bir bileşen kitaplığıdır.
Tüm bileşenlere erişilebilir (WAI-ARIA standartlarını tam olarak takip eder), teması ayarlanabilir ve birleştirilebilir. Kutudan çıktığı haliyle duyarlı stilleri destekler ve karanlık modla uyumludur.
Chakra UI ayrıca, donanımları aktararak bileşenlerinize stil vermenizi kolaylaştıran CBox ve CStack gibi bir dizi düzen bileşeni içerir. Ayrıca bir web paketi eklenti çözümü kullanarak Chakra UI Vue bileşenlerini otomatik olarak içe aktarmanıza da olanak tanır. Açık kaynaklıdır ve Github'da 900'den fazla yıldıza ve NPM'de 331 haftalık indirmeye sahiptir.
4. Önyükleme Vue'su
BootstrapVue, BootstrapVue ile Vue.js'yi ve popüler ön uç CSS kütüphanesi Bootstrap'i kullanarak web üzerinde duyarlı, mobil öncelikli ve ARIA erişilebilir projeler oluşturabilirsiniz. Dokümantasyonun anlaşılması kolaydır ve kurulumu da kolaydır. Ön uç uygulamaların daha hızlı yapılmasını sağlar.
85'ten fazla bileşen, 45'in üzerinde kullanılabilir eklenti, çeşitli yönergeler ve 1000'den fazla simge sunar. Ayrıca düzenler ve duyarlı tasarım için uyarlanmış işlevsel bileşenler de sağlar. Ayrıca Nuxt.js modülünü kullanarak BootstrapVue'yu Nuxt.js projelerinize kolayca entegre edebilirsiniz.
Aynı zamanda bootstrap CSS çerçevesinin kullanıldığı şekilde de kullanılır. Yaklaşık 12.9 bin yıldız ve 1.7 bin çatalla Github'da açık kaynaklıdır.
5. Vuesax
Vuesax, projeleri kolayca ve benzersiz ve hoş bir tarzda yapmak için Vuejs ile oluşturulan yeni bir UI bileşen çerçevesidir, vuesax sıfırdan yaratılmış ve ön uç sevgilisinden arka uca kadar kendi görsel yaklaşımlarını kolayca oluşturmak isteyen her türden geliştirici için tasarlanmıştır. son kullanıcı. Tasarımlar her bileşen için benzersizdir ve herhangi bir görsel trende veya tasarım kuralına bağlı değildir; bu da onunla inşa edilen projeleri de benzersiz kılar.
duyarlı sayfalar ve yeniden kullanılabilir ve özelleştirilebilir kullanıcı arayüzü bileşenleri sunar. Npm veya CDN kullanmaya başlamak da kolaydır. Şu anda son sürümünde Vue CLI 3'ü desteklemiyor. Yaklaşık 4.9 bin yıldız ve 6700 haftalık indirme NPM'si ile Github'da açık kaynaklıdır.
6. Karınca Tasarım Vue
Ant Design vue, Ant Design spesifikasyonunu temel alan Ant design vue, zengin, etkileşimli kullanıcı arayüzleri oluşturmak için bir dizi yüksek kaliteli bileşen ve demo içeren bir vue UI kitaplığıdır.
Ant-design-vue, web uygulamalarınızı zenginleştirmek için Skeleton, çekmece, istatistik ve çok daha fazlası gibi birçok UI bileşeni sağlar.
Ant Design Vue Sürüm 2'nin son sürümüyle birlikte, entegrasyonu daha hızlı ve daha kolay olacak, paket boyutu daha küçük olacak ve ayrıca Yeni Kompozisyon API belgesi olan Vue 3'ü destekleyecek şekilde güncellendi. Aynı zamanda modern web tarayıcılarını, sunucu tarafı Rendering'i ve elektronu da destekler. Github'da 13'den fazla yıldıza ve haftalık 39,693 NPM indirme sayısına sahiptir.
7. Kuasar
Quasar, geliştiricilerin kutudan çıkan en iyi uygulamalarla Quasar CLI aracılığıyla tüm platformlar için tek bir kaynak kodu tabanı kullanmasına olanak tanıyan en iyi Vue UI çerçevelerinden biridir. Geliştiricilerin, etrafındaki diğer tüm kaplama malzemeleri (derleme sistemi, düzen) yerine Uygulamanın içeriğine odaklanmasına olanak tanır. Materyal 2.0 yönergelerini takip etmeye odaklanmıştır ve aynı zamanda oldukça destekleyici bir topluluğa sahiptir.
Quasar'ın özel yönlerinden biri, kodu bir kez yazıp aynı anda tek bir kod tabanı kullanarak bir web sitesi, Mobil Uygulama olarak dağıtma yeteneğidir. Ayrıca şu anda beta aşamasında olan ve vue 3 özelliklerini destekleyecek yeni bir sürüm de mevcut. Github'da yaklaşık 17.8 bin yıldız var.
8. Buefy
Buefy, Bulma'yı (bir CSS çerçevesi) temel alan Vue JS için hafif bir kullanıcı arayüzü bileşen kitaplığıdır. Buefy, Bulma'yı Vue ile birleştirerek minimum kod kullanarak güzel görünümlü uygulamalar oluşturmanıza yardımcı olur. Bulma arayüzünüz için javascript katmanıdır.
Sıradan bir web sayfasına tamamen veya tek tek bileşenler aktarılabilir. Bunu projenize entegre etmek oldukça kolaydır; npm veya CDN kullanılarak yapılabilir.
Buefy, hazır kullanıcı arayüzü bileşenleri, düzeni ve simgeleri sağlar. Bileşenler temanız için SASS'yi kullanabilir. Ayrıca modern tarayıcıları da destekler.
9. Vue Materyali
Vue Material, Materyal Tasarımı spesifikasyonlarını uygulayan, yaygın olarak kullanılan, hafif bir çerçevedir. Vue.js ve Materyal Tasarımı özellikleri arasındaki en iyi entegrasyonlardan biridir! Kolay bir API aracılığıyla tüm ihtiyaçlarınıza uyacak şekilde kolayca yapılandırabilirsiniz.
Tüm modern Web Tarayıcıları için duyarlı tasarım ve destekle uyumludur. Kitaplık Temalar, Bileşenler ve Kullanıcı Arayüzü Öğeleri'ne bölünmüştür. Temalar, uygulamanızın temasını nasıl oluşturacağınıza (veya kendi temalarınızı yazacağınıza) ilişkin eksiksiz bir kılavuz sağlar ve Bileşenler ve Kullanıcı Arayüzü Öğeleri düzenler, gezinme, tipografi, simgeler ve 30 bileşenden daha oluşur. Github'da yaklaşık 9.2 bin yıldız ve 1.1 bin çatal ve 21 bin + haftalık indirme NPM'si var.
10. KeenUI
KeenUI, Google'ın Materyal Tasarımı'ndan ilham alan, basit bir API'ye sahip hafif bir vue.js kullanıcı arayüzü kütüphanesidir. Keen UI bir CSS çerçevesi değildir. Bu nedenle ızgara sistemi, tipografi vb. için stiller içermez. Bunun yerine Javascript gerektiren etkileşimli bileşenlere odaklanılır.
Yaklaşık 30 yeniden kullanılabilir bileşene sahiptir. Bileşenler, SASS değişkenleri kullanılarak stillerin geçersiz kılınmasıyla özelleştirilebilir. CDN veya npm kullanarak projenize entegre edebilirsiniz. Açık kaynaklıdır ve Github'da yaklaşık 4k yıldıza sahiptir.
Sonuç
Kullanıcı arayüzü bileşen kitaplıkları kesinlikle bir proje oluşturmayı çok daha kolay hale getirir. Doğru olanı seçmek, üzerinde çalışmak istediğiniz projenin özelliklerine bağlıdır. Yeni bir projeye başlamadan önce, amaca en uygun olan kullanıcı arayüzü bileşen kütüphanesini incelemeniz tavsiye edilir.