Beste mobiele componenten voor progressieve web-apps in VueJs

Progressive Web Apps (bron: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

In 2015 bedachten ontwerper Frances Berriman en Google Chrome-ingenieur Alex Russell de term 'Progressive Web Apps' om apps te beschrijven die profiteren van nieuwe functies die worden ondersteund door moderne browsers waarmee gebruikers web-apps kunnen upgraden naar progressieve web-applicaties in hun eigen besturingssysteem (OS) . Ze zijn betrouwbaar, snel en aantrekkelijk. Kortom, het is een zetje om native kracht op het internet te brengen. Tegenwoordig wordt PWA groter, hier is de showcase van de website die u met PWA kunt bekijken.

Onlangs in Google IO 2017, Addy Osmani (Engineering Manager bij Google werkt aan Chrome & Web Platform) sprak over pwa in veel javascript framework include vuejs.

Twee maanden voor Google IO heeft Addy Osmani een kwestie naar de officiële repository van vuej gestuurd om een ​​voorstel te doen voor de officiële template van vue pwa voor vue-cli, en vervolgens Evan You als auteur van vuejs eens met het voorstel van Addy. Dus, na Google IO, bracht Addy precies op 1 juni 2017 pwa-sjabloon in vue-cli uit. Nu kunt u op deze manier pwa-project maken met de opdracht type in uw terminal.

$ vue init pwa 

De sjabloon was zo krachtig, het was inclusief servicewerker precaching van applicatie shell + statische activa (prod), script (async chunk) preloading met , webapplicatie manifest + favicons, mobielvriendelijke meta-viewport en vuurtorenscore van 90 + / 100. Maar het komt niet met ingebouwde componenten, dus in dit bericht zal ik enkele mobiele componenten voorstellen om uw UI-ontwikkeling in progressieve web-apps van vuej te versnellen. Hier zijn de lijsten met mobiele componenten om PWA in vuejs te maken.

  1. Vuetify

Vuetify.js is een semantisch componentenraamwerk voor Vue.js 2. Het beoogt schone, semantische en herbruikbare componenten te bieden die het bouwen van uw applicatie een fluitje van een cent maken. Vuetify.js maakt gebruik van het ontwerppatroon Material Design van Google en neemt aanwijzingen van andere populaire frameworks zoals Materialize.css, Material Design Lite, Semantic UI en Bootstrap 4. Vuetify.js wordt geleverd met goede documentatie en een volledige ondersteuningscomponent, het is heel gemakkelijk te leren.

2. Mint UI

Mint UI is gebaseerd op iOS-stijl en is vrij licht van gewicht. Wanneer alles geïmporteerd, neemt de gecomprimeerde code slechts ~ 30kb (JS + CSS) gzipruimte in beslag. Mint UI wordt geleverd met een klein formaat en volledige ondersteuningscomponent, maar de documentatie is zo moeilijk te begrijpen, omdat het te eenvoudig is en sommige documenten zijn afgesneden. Ten slotte, hoewel mint UI ondersteuning voor de Engelse taal biedt in de documentatie, maar in het live-voorbeeld nog steeds de Chinese taal gebruikt, zo slecht.

3. Vue-materiaal

Vue-materiaal is een lichtgewicht raamwerk dat precies is gebouwd volgens de specificaties van het materiaalontwerp. Bouw krachtige en goed ontworpen web-apps die op elk scherm passen. Vue-materiaal heeft gelijkenis met hoekige materiaalcomponenten, als u ooit hoekig materiaal hebt gebruikt, kunt u eenvoudig schakelen.

4. Scherpe gebruikersinterface

Keen UI is ontworpen als een lichtgewicht Vue.js UI-bibliotheek met een eenvoudige API. Keen UI is geïnspireerd op het materiaalontwerp van Google, maar Keen UI is geen CSS-framework en u vindt er dus geen rastersysteem of stijlen voor typografie in. In plaats daarvan ligt de nadruk op het maken van herbruikbare componenten die interactiviteit hebben.

5. Vum

Vum is een UI Framework gebouwd met Vue.js voor mobiele webapp. Vum heeft een functie, volledige paginastructuur (koptekst, inhoud, voettekst), veel krachtige componenten, eenvoudig te gebruiken en uit te breiden en hoogwaardige CSS3-animatie. Vum is gebaseerd op iOS-ontwerp zoals mint UI, maar vum heeft minder componenten dan mint UI.

Conclusie, Vuetify is de meest complete en krachtige componenten voor vuejs-apps, wordt geleverd met goede documentatie en de laatste heeft ook integratie met NUXT voor het bouwen van een server side rendering-project. Dus ik zal vuetify als mijn eerste prioriteit stellen. Maar als u eenvoud wilt kiezen, moet u Mint UI of Keen UI als uw keuze beschouwen. Als u de voorkeur geeft aan op Android gebaseerd ontwerp, kunt u Vuetify kiezen en als u liever op iOS gebaseerd ontwerp gebruikt, moet u naar Mint UI gaan.