VueJ'lerde Progressive Web Uygulamaları için En İyi Mobil Bileşenler

Progressive Web Uygulamaları (Kaynak: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

Tasarımcı Frances Berriman ve Google Chrome mühendisi Alex Russell, 2015 yılında “Progressive Web Apps” terimini, kullanıcıların web uygulamalarını kendi işletim sistemlerinde ilerleyen web uygulamalarına yükseltmelerini sağlayan modern tarayıcıların desteklediği yeni özelliklerden faydalanan uygulamaları tanımlamak için kullandı. . Güvenilir, hızlı ve ilgi çekicidirler. Kısacası, yerel gücü web’e getirmek çok zor. Günümüzde, PWA büyüdükçe, burada PWA'yı kullanarak kontrol edebileceğiniz web sitesinin vitrini.

Son zamanlarda Google IO 2017’de, Addy Osmani (Google’da Chrome ve Web Platformunda çalışan Mühendislik Yöneticisi) pek çok javascript çerçevesinde pwa hakkında konuştu.

Google IO'dan iki ay önce, Addy Osmani, vuejs resmi deposuna vue-cli için vue pwa resmi şablonunu önermek üzere bir konu gönderdi, sonra Addy'nin önerdiği gibi vuejs yazarı olarak Evan You. Bu nedenle, Google IO'dan sonra, tam olarak 1 Haziran 2017'de Addy, vue-cli'da pwa şablonunu yayınladı. Artık terminalinizde komut yazarak pwa project oluşturabilirsiniz.

$ vue init pwa 

Şablon o kadar güçlüydü ki, , web uygulama bildirimi + favicons, mobil dostu meta-viewport kullanarak uygulama kabuğu + statik varlıklar (prod), script (async chunk) önyüklemesi önceden yapılmış servis çalışanıydı. ve 90 + / 100 fener puanı. Ancak yerleşik bileşenlerle birlikte gelmediğinden, bu yazıda, vuejs ilerici web uygulamalarında UI geliştirmenizi hızlandırmak için bazı mobil bileşenler önereceğim. İşte vuejs'de PWA oluşturmak için mobil bileşenlerin listeleri.

  1. Vuetify

Vuetify.js, Vue.js 2 için anlamsal bir bileşen çerçevesidir. Uygulamanızı geliştirmeyi kolaylaştıran temiz, anlamsal ve yeniden kullanılabilir bileşenler sağlamayı amaçlar. Vuetify.js, Materialize.css, Material Design Lite, Semantic UI ve Bootstrap 4 gibi diğer popüler çerçevelerden ipuçlarını alarak Google’ın Material Design tasarım desenini kullanıyor. Vuetify.js iyi bir dokümantasyon ve tam destek bileşeni ile geliyor, öğrenmesi çok kolay.

2. Nane Kullanıcı Arabirimi

İOS stiline dayanan nane UI oldukça hafif. Tüm içe aktarıldığında, sıkıştırılmış kod yalnızca ~ 30kb (JS + CSS) gzip alanı alır. Nane UI küçük boyutlu ve tam destek bileşeniyle birlikte gelir, ancak belgelerin anlaşılması çok zordur, çünkü çok basit ve bazı dokümanlar kesildi. Son olarak, nane UI belgelerinde İngilizce dil desteği olmasına rağmen, ancak canlı örnekte hala Çince kullanarak, çok kötü.

3. Vue Malzemesi

Vue Material, tam olarak Material Design özelliklerine göre inşa edilmiş hafif bir çerçevedir. Her ekrana sığabilecek güçlü ve iyi tasarlanmış web uygulamaları oluşturun. Vue malzemesi köşeli malzeme bileşenleri ile benzerlik gösterir, eğer köşeli malzeme kullandıysanız kolayca geçiş yapabilirsiniz.

4. Keen UI

Keen UI, basit bir API'ye sahip hafif bir Vue.js UI kütüphanesi olacak şekilde tasarlanmıştır. Keen UI, Google’ın Materyal Tasarımı’ndan ilham alıyor, ancak Keen UI bir CSS çerçevesi değil ve bu şekilde içinde tipografi için bir ızgara sistemi veya stilleri bulamayacaksınız. Bunun yerine odak noktası, etkileşime sahip yeniden kullanılabilir bileşenler oluşturmaktır.

5. Vum

Vum, mobil webapp için Vue.js ile oluşturulmuş bir UI Çerçevesidir. Vum özelliği, tam sayfa yapısı (üstbilgi, içerik, altbilgi), güçlü bileşenlerden oluşan bir grup, kullanımı ve genişletilmesi kolay ve yüksek performanslı CSS3 animasyonu bulunuyor. Vum, nane UI gibi iOS tasarımına sahiptir, ancak vum, nane UI'sından daha az bileşene sahiptir.

Sonuç, Vuetify, vuejs uygulamaları için en eksiksiz ve en güçlü bileşendir, iyi belgelerle birlikte gelir ve son olarak da sunucu tarafı oluşturma projesi oluşturmak için NUXT ile entegrasyona sahiptir. Bu yüzden ilk önceliğim olarak titreteceğim. Ancak, basitliği seçmek istiyorsanız, Mint UI veya Keen UI'yi tercihiniz olarak düşünmelisiniz. Android tabanlı tasarımı tercih ediyorsanız, Vuetify'ı seçebilir ve iOS tabanlı tasarımı kullanmayı tercih ediyorsanız Mint UI'ye gitmelisiniz.