Vue UI Bileşenleri: 15 Kitaplık ve Kit

Yıllık ön uç çerçeveler raporunda gördüğümüz gibi, Vue.js web geliştirme için en popüler JavaScript çerçevesi olarak sağlam bir ilk 3 sırasını koruyor. Ve Şubat 2022'de - Evan You, Vue'nun varsayılan sürüm olarak Vue 3'e taşınacağını duyurdu.

Bu toplama, çeşitli çerçeveler için yaptığım bir dizinin parçası. Özellikle, Tailwind CSS bileşen kitaplıkları koleksiyonum ve aynı zamanda en iyi performans gösteren React UI kitaplıkları hakkındaki incelemem. Vue için yaklaşım tamamen aynı olacak.

Hem aktif geliştirme aşamasında olan hem de yeni Vue 3 sürümünü* destekleyen kitaplıklara odaklanacağız. Pek çok kütüphanenin en son birkaç yıl önce güncellendiği için kesintiye uğramadığını şimdiden söyleyebilirim. Her gün gelişen bir çerçeve için yetersiz desteğe sahip bir kütüphane ile çalışmak mantıklı değil.

* Bu kuralın birkaç istisnası vardır. Bazı kitaplıkların Vue 3'e güncelleme planı yoktur, ancak hala aktif geliştirme aşamasındadır. Ve birkaçının gelecekte güncelleme planları var, ancak bakım açısından bakıldığında oldukça fazla iş var.

kuasar

Quasar, kelimenin tam anlamıyla bir çerçeve içinde bir çerçevedir. Kullanıcı arayüzleri oluşturmak için kapsamlı araçlar isteyen geliştiriciler için en iyi seçeneklerden biridir. Popülerlik, büyük ölçüde Quasar'ın çeşitli yapı modları için yerleşik desteğe sahip olmasından kaynaklanmaktadır.

Yani ister bir SPA, ister PWA, isterse bir mobil uygulama geliştiriyor olun, başlamak için ter dökmenize gerek yok. Ve hepsinden iyisi, geniş özellik havuzuna rağmen – küçük bir kişisel web sitesi kurarsanız, Quasar yalnızca o proje için gereken kaynakları sıraya alacaktır.

Bu, projenizi kullanılmayan kodlarla şişirmekten kaçınmanıza yardımcı olur. Ve son olarak, Quasar'da yazılan tüm kodlar tek bir birleşik kod tabanı olarak paylaşılır. Dolayısıyla, tek sayfalık bir uygulama oluşturuyorsanız, bunu mobil uygulama olarak da kolayca dışa aktarabilirsiniz.

Arco Tasarım

Arco, React.js geliştiricileri arasında popüler olan kurumsal düzeyde bir tasarım sistemidir. Ancak Arco Design'ın bir Vue.js sürümü de vardır. Ve bağımsız geliştiriciler tarafından oluşturulan kişisel UI kitaplıklarının aksine, Arco özellikler ve tasarım dosyalarıyla doludur .

Bunlar, her bileşen için Figma & Sketch dosyalarını içeriyordu. Anında indirilebilen özel simgeler kitaplığı ve 60'tan fazla özel bileşen koleksiyonu.

Tüm bu kaynaklarla birkaç dakika içinde bir tasarım maketi oluşturabilirsiniz.

Vuetify

Herkes malzeme tasarımını sever, değil mi? Vuetify UI kitaplığı, Materyal Tasarımı spesifikasyonuna dayalı özel yapım bileşenlerle yüklenir. Aynı zamanda Vue.js'nin başından beri var olan eski tarz kütüphanelerden biridir. Bu, kütüphanenin sunduğu şeylere ve ayrıca diğer kütüphanelerle nasıl karşılaştırıldığına en iyi şekilde yansır.

Yalnızca bu karşılaştırma tablosuna dayanarak, Vuetify'ın geliştiricilerin ellerinde en iyi araçlara sahip olmalarını sağlamak için gerçekten işe koyulduğunu görebiliriz. Ayrıca şablonlama sistemini öğrenmenin oldukça kolay olduğunu söyleyebilirim. Tailwind CSS'nin yardımcı program sınıflarını öğreneceğiniz gibi.

Vue Önyükleme

 Bu kitaplık hakkında dikkat edilmesi gereken tek şey, güncellemeler konusunda biraz durgun olması. Bu GitHub sayısında açıklandığı gibi - kitaplığı Vue 3 desteğiyle Bootstrap 5'e güncellemeye yardımcı olmak için yeni bakıcılar arıyorlar. Ve zamanı gelince yapacaklarını düşünüyorum, bu yüzden makalenin başında söylediklerime rağmen bunu yine de dahil edeceğim.

Diğer her şeye gelince – bu bileşen kitaplığı beklediğinizi yapar. Vue.js çerçevesiyle kullanılabilen bir Bootstrap uygulamasıdır. Erişilebilirlik için optimize edilmiştir ve tüm bileşenlerinin belgelere dahil edilmiş çok sayıda örneği vardır.

Modüler destek sayesinde sadece ihtiyacınız olanı kullanabilir, gerisini atlayabilirsiniz.

Buefy

Bulma, olması gerektiği kadar sevgi görmez. Bir şekilde tüm trendlerin ve ön uç çılgınlığının dışında kalmayı başaran CSS çerçevelerinden biridir. Ancak, bununla birlikte çalışmak için çok iyi bir çerçevedir ve şimdi Bulfy kütüphanesi aracılığıyla Bulma'yı Vue ile birlikte kullanabilirsiniz. Çalışması kolaydır ve hafif bir yapıyı vurgular.

Daha önce Bulma ile çalıştıysanız, Buefy tüm şık Bulma UI bileşenlerini elinde tutar. Ayrıca, her bileşen varyasyonu için önceden hazırlanmış bir kod örneği alırsınız. Belgeler ayrıca CodePen'e bağlantılar içerir, böylece kütüphaneyi kendiniz başlatmadan örneklerle oynayabilirsiniz.

 Lütfen Buefy'nin kesinlikle bir Vue 2 kitaplığı olduğunu ve çok fazla iş gerektirdiğinden Vue 3'e güncelleme planları olmadığını unutmayın. Bir alternatif, Bulma direktifinin mevcut olduğu Oruga'yı (bu topluluğa dahil edilmiştir) kullanmaktır.

Lütuf

Grace, özel olarak oluşturulmuş bir Tasarım Sistemidir. Paketleme için TypeScript, SASS, Jest ve Rollup kullanılarak uygulanır. Proje geliştirme aşamasındadır ve belgelerinin uygun şekilde güncellenmesi gerekmektedir. Her ne kadar, bakıcılar bu özel durum için GitHub Sorunlarını açmaya başladıkları için durum böyle olacak gibi görünüyor.

Vuetensils

Her şeyi kendiniz şekillendirme özgürlüğüne sahipken bileşen kitaplıklarını başlangıç ​​noktası olarak kullanmayı tercih ediyorsanız - Vuetensils özellikle bu amaç için yapılmış bir çerçevedir.

Hazırda bulunan kapsamlı bir Bileşenler kitaplığına sahiptir ve ayrıca ihtiyacınız olanı seçip seçebilirsiniz. Stilin ardındaki felsefe, özünde, projenizi kullanılmayan stiller ile tıkamaktan kaçınmak için her şeyin minimum düzeyde tutulmasıdır.

Naif kullanıcı arayüzü

Naive UI, entegre performans optimizasyonuna sahip bir Vue 3 bileşen kitaplığıdır. Halihazırda TypeScript kullanan geliştiriciler için oluşturulmuştur. Bileşenler temiz bir yapıya sahiptir ve neredeyse akla gelebilecek her senaryoyu kapsar.

Önceden hazırlanmış düzen bileşenlerinin eklenmesiyle – Naive UI, yeni web sitesi projeleri için kullanmak için sağlam bir adaydır. Ayrıca, global bir tema kullanarak veya adım adım kendi yapılandırmanızı oluşturarak özel yapılandırmalar tanımlayabilirsiniz.

Vuestic Kullanıcı Arayüzü

Vuestic, 50'den fazla duyarlı bileşen, entegre erişilebilirlik özellikleri ve tüm büyük tarayıcılarda destek sağlayan şık bir Vue 3 UI çerçevesidir: web ve mobil. Ayrıca, SaaS ürünleri olarak oluşturulmuş projeleri başlatmanıza izin veren özel olarak oluşturulmuş bir yönetici panosu şablonuna da erişebilirsiniz.

Bileşen tasarımı oldukça yalındır ve katı bir özellik dayatmaz. Bu nedenle, Vuestic UI, yelpazenin her tarafındaki projelerde çalışmalıdır.

Varlet Kullanıcı Arayüzü

Varlet, bu listedeki mobil öncelikli kit olarak oluşturulmuş ilk (iki kişiden) UI kitaplığıdır.

Materyal Tasarımı ile entegredir ve mobil uygulama geliştirmede kullanılan çok çeşitli bileşenleri kapsar. Varlet, Sunucu Tarafı Oluşturma için kalıcı desteğe sahiptir.

Belgelerdeki bileşenlerle oynayabilirsiniz. Ancak, bunları denemenin önerilen yolu, yazarların yerel bir sözdizimi vurgulama çözümü sağladığı VS Kodu veya WebStorm kullanmaktır.

 Vue'nin (Evan You) yaratıcısı Çin kökenlidir ve Çin, Japonya ve Kore gibi ülkelerden birçok insanın diğer çerçevelerin aksine Vue ile çalışmayı tercih etmesiyle doğrudan bir ilişkisi vardır. Bu aynı zamanda Vue topluluğunun Doğu ülkelerinde, React'in bir numaralı çerçeve olarak görüldüğü ABD gibi yerlerde olduğundan çok daha aktif olduğu anlamına gelir.

oruga

Oruga, Vue UI bileşenlerinin çerçeveden bağımsız bir kitaplığıdır. Buradaki fikir, sağlanan bileşenleri kullanmanız ve bunları kendiniz şekillendirmeniz veya mevcut bileşenlerin üzerine inşa etmek için harici bir çerçeve (Bulma gibi) kullanmanızdır.

Orgua'nın ilginç bir özelliği, bileşenlerin yalnızca düz arayüzler olmamasıdır. Ancak, iyi bir grup, ek özelliklerle birlikte gelir. Belgelerde, gerekli tüm Props tanımlarına ve ayrıca hem CSS hem de SASS'deki bireysel değişken adlarına sahip olacaksınız.

Dalga kullanıcı arayüzü

Wave UI, bileşenlerin CSS kullanılarak özelleştirilebilir olması gerektiği fikri üzerine kurulmuştur. Bu nedenle, bileşenin özel bir stili olsa bile - belirli bir özelliği zorlamaya gerek kalmadan özel parametreleri CSS ile geçersiz kılabilirsiniz.

Tasarım stili oldukça mütevazı olsa da, bazıları için sınırda minimal hissedilebilir.

Wave UI, kendi düzen tanımıyla birlikte gelir. Bu, Spaces olarak mevcuttur, ayrıca Flexbox ve Grid olarak da mevcuttur. Fayda sınıflarını takip etmek oldukça kolaydır - bu nedenle karmaşık yapılar inşa etmek sorun olmaz.

Çakra UI Vue

Chakra UI, muhtemelen en iyi React kütüphanelerinden biri olarak bilinir. Ama bir Vue sürümü var. Bu nedenle, ister Çakra'da yeni olun, ister geçmişte kullanmış olun - Vue sürümünü kullanmak tamamen aynı hissedecektir.

Kütüphane, erişilebilir web geliştirme konusundaki katı yaklaşımıyla bilinir. Bu, her bir bileşenin WAI-ARIA yönergeleriyle uyumlu olmasını sağlayarak elde edilir.

Ancak Çakra'nın en çok öne çıktığı alan, bileşenleri oluşturma yeteneğidir. Başka bir deyişle, bileşen öğelerini birlikte harmanlamak için yeniden kullanabilirsiniz. Bu, başka türlü mümkün olmayan bileşen yapısı ve stili elde etmenizi sağlar.

Karınca Tasarım Vue

Ant Design, modern web geliştirme için önde gelen Tasarım Sistemlerinden biridir. Tekliflerini, React kitaplıkları hakkında önceki bir makalede zaten ele aldık.

Ancak özetlemek gerekirse – Ant Design, rastgele bir projeye bağladığınız bir dizi bileşenden ziyade bir tasarım felsefesi uygulamaya odaklanır. Bu nedenle, bu kitaplık, profesyonel (kurumsal düzeyde) bir proje üzerinde çalışırken kullanmak isteyeceksiniz.

Kılavuzlardan bileşen felsefesine kadar her şey dokümanlarında dikkatlice açıklanmıştır.

Vant

Vant, mobil geliştirme için oluşturulmuş ikinci (ve son!) bileşen kitaplığıdır. GitHub'daki 20.000 yıldızla - bu bölümde mutlak bir canavar olduğundan emin olabilirsiniz.

Bileşenler, her şey söylenip yapıldığında ortalama bileşenin boyutu yalnızca 1 kb olacak şekilde, mümkün olduğunca hafif olacak şekilde tasarlanmıştır. Vant, TypeScript kullanır ve ayrıca Sketch veya Axure için dışa aktarılan bazı tasarım varlıklarına sahiptir.

Sketch varlıkları Figma'ya da aktarılabilir.

Mobil geliştirme yapıyorsanız ve Vue ile çalışıyorsanız – Vant muhtemelen en iyi kütüphanelerden biridir. Belgeler kapsamlıdır ve bileşen yapısını özelleştirme yeteneği, hem SPA hem de PWA projeleri için uygun olduğu anlamına gelir.

Bir bileşen kitaplığı ile yeni bir proje başlatma

Oldukça fazla ön uç geliştirme, bileşen kitaplıkları tarafından yönetilir. Aslında, en popüler çerçevelerin tümü, bileşen odaklı bir yaklaşım uygular. Ve Vue'nin birçok, özellikle Doğu bölgesindeki topluluklar için en iyi seçim olduğunu söylemek güvenli.

Daha önce web geliştirme projeleri yaptıysanız (modern bir yığın kullanarak), Vue.js'ye başlamak oldukça kolaydır. Aynı zamanda çerçeveyi kullanmanın en büyük faydalarından biridir. Ayrıca Vue oldukça iyi çalışsa da TypeScript öğrenmeniz gerekmez.