VueJs-dagi progressiv veb-ilovalar uchun eng yaxshi mobil komponentlar

Progressiv veb-ilovalar (Manba: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

2015 yilda dizayner Frensis Berriman va Google Chrome muhandisi Aleks Rassel "Barkamol veb-ilovalar" atamasini zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadigan yangi xususiyatlardan foydalanuvchi foydalanuvchilarga veb-ilovalarni o'zlarining shaxsiy operatsion tizimidagi (OT) progressiv veb-ilovalariga oshirishga imkon beradigan dasturlarni tavsiflash uchun ishlatishdi. . Ular ishonchli, tezkor va qiziqarli. Muxtasar qilib aytganda, bu mahalliy kuchni Internetga jalb qilish uchun turtki. Bugungi kunda PWA kattalashmoqda, PWA-dan foydalanadigan veb-saytlarning vitrini mana bu erda ko'rishingiz mumkin.

Yaqinda Google IO 2017-da Addy Osmani (Google-da Chrome va veb-platformada ishlaydigan muhandislik menejeri) ko'plab javascript doirasidagi pue haqida vuej-lar haqida gapirdi.

Google IO-dan ikki oy oldin, Addy Osmani vuejs-ning rasmiy omboriga vue-kva uchun vue pwa rasmiy shablonini yubordi, keyin Evan You Addy tomonidan taklif qilingan vuejlarning muallifi sifatida. Shunday qilib, Google IO-dan so'ng, 2017 yil 1-iyun kuni Addy vue-cli-da pwa shablonini chiqazdi. Endi siz o'zingizning terminalingizda shunday buyruq turi bilan pwa loyihasini yaratishingiz mumkin.

$ vue tashabbus pwa 

Ushbu shablon juda kuchli edi, unga xizmat ko'rsatuvchi ishchi kirdi: dastur qobig'i + statik aktivlar (prod), skriptni (asyncunk) oldindan yuklashni , veb-dastur manifest + favikonlar, mobil aloqa uchun qulay bo'lgan meta-viewport. , va mayoqlarning ballari 90 + / 100. Ammo bu ichki komponentlar bilan ta'minlanmaydi, shuning uchun men ushbu postda vuejs progressiv veb-ilovalarida UI-ni rivojlantirishni tezlashtirishni taklif qilaman. Vuejs-da PWA yaratish uchun mobil komponentlarning ro'yxati.

  1. Vuetify

Vuetify.js - bu Vue.js 2 uchun semantik tarkibiy qism. Bu sizning dasturingizni shamolga aylantiradigan toza, semantik va qayta ishlatiladigan qismlarni taqdim etishga qaratilgan. Vuetify.js Materialize.css, Material Dizayn Lite, Semantik UI va Bootstrap 4 kabi boshqa mashhur ramkalardan foydalanib, Google-ning Material Dizayn dizaynidagi naqshlaridan foydalanadi, Vuetify.js yaxshi hujjatlar va to'liq qo'llab-quvvatlovchi komponentlar bilan ta'minlangan, uni o'rganish juda oson.

2. Yalpiz UI

IOS uslubiga asoslangan yalpiz UI juda engil. Barcha import qilinganida, siqilgan kod faqat ~ 30 kb (JS + CSS) gzip joy oladi. Mint UI kichik o'lchamdagi va to'liq qo'llab-quvvatlovchi qism bilan ta'minlangan, ammo hujjatlarni tushunish juda qiyin, chunki bu juda sodda va ba'zi hujjatlar o'chirilgan. Va nihoyat, mint UI hujjatlarda ingliz tilini qo'llab-quvvatlaydi, ammo jonli misolda xitoy tilidan foydalanadi, shuning uchun yomon.

3. Vue material

Vue Material - bu Materiallar dizayn xususiyatlariga muvofiq aniq tuzilgan engil ramka. Har bir ekranga sig'adigan kuchli va yaxshi mo'ljallangan veb-ilovalarni yarating. Vue materiali burchak materialining tarkibiy qismlari bilan o'xshashlikka ega, agar siz biron-bir burchakli materialdan foydalangan bo'lsangiz, uni osongina almashtirish mumkin.

4. Keen UI

Keen UI oddiy API bilan engil Vue.js UI kutubxonasi bo'lishi uchun mo'ljallangan. Keen UI Google-ning Material Dizaynidan ilhomlangan, ammo Keen UI CSS-ning ramkasi emas va shuning uchun unda panjara tizimi yoki tipografiya uchun uslub topa olmaysiz. Buning o'rniga, asosiy e'tibor interaktivlikka ega bo'lgan qayta ishlatiladigan komponentlarni yaratishga qaratiladi.

5. Vum

Vum - bu mobil webapp uchun Vue.js yordamida UI Framework qurilishi. Vum-ning xususiyati, to'liq sahifa tuzilmasi (sarlavha, tarkib, pastki satr), kuchli tarkibiy qismlar to'plami, ulardan foydalanish oson va kengaytirilishi va CSS3-ning yuqori samaradorligiga ega. Vum - bu yalpiz UI kabi iOS dizayni asosida ishlangan, ammo vum yalpiz UIga qaraganda kamroq tarkibiy qismlarga ega.

Xulosa, Vuetify - bu vuejs ilovalari uchun eng to'liq va kuchli tarkibiy qismlar, yaxshi hujjatlar bilan ta'minlangan va oxirgisi, shuningdek, NUXT bilan integratsiyalashgan bo'lib, server tomonini ko'rsatish loyihasini yaratish uchun mo'ljallangan. Shuning uchun men vujudga kelishni birinchi o'ringa qo'yaman Agar siz soddaligini tanlamoqchi bo'lsangiz, Mint UI yoki Keen UI ni o'zingizning tanlovingiz deb bilishingiz kerak. Agar siz android asosidagi dizaynni afzal ko'rsangiz, Vuetify-ni tanlashingiz mumkin, va agar siz iOS asosidagi dizayndan foydalanishni xohlasangiz, Mint UI-ga o'tishingiz kerak.