Beste mobilkomponenter for progressive webapper i VueJs

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

I 2015 tegnet designeren Frances Berriman og Google Chrome-ingeniøren Alex Russell begrepet "Progressive Web Apps" for å beskrive apper som drar nytte av nye funksjoner som støttes av moderne nettlesere som lar brukere oppgradere webapper til progressive webapplikasjoner i sitt eget operativsystem (OS) . De er pålitelige, raske og engasjerende. Kort sagt, det er et press for å bringe innfødt kraft til nettet. I dag har PWA blitt større, her er utstillingsvinduet til nettstedet som bruker PWA, kan du sjekke her.

Nylig i Google IO 2017 snakket Addy Osmani (ingeniørsjef hos Google som jobber med Chrome & Web Platform) om pwa i mange javascript-rammer, inkludert vuejs.

To måneder før Google IO har Addy Osmani sendt saken til vuejs offisielle repository til foreslått om vue pwa offisiell mal for vue-cli, da var Evan You som forfatter av vuejs enig med Addys forslag. Så etter Google IO, publiserte Addy nøyaktig 1. juni 2017 pwa mal i vue-cli. Nå kan du opprette pwa-prosjekt etter kommandotype i terminalen din som denne.

$ vue init pwa 

Malen var så kraftig, den ble inkludert servicearbeider forhåndsvasking av applikasjonsskall + statiske eiendeler (prod), skript (async chunk) forhåndsinnlasting ved bruk av , webapplikasjons manifest + favicons, mobilvennlig meta-viewport , og fyrt poengsum på 90 + / 100. Men det kommer ikke med innebygde komponenter, så i dette innlegget vil jeg foreslå noen av mobile komponenter for å øke hastigheten på UI-utviklingen din i vuejs progressive webapper. Her er listene over mobilkomponenter for å opprette PWA i vuejs.

  1. Vuetify

Vuetify.js er en semantisk komponentramme for Vue.js 2. Den har som mål å tilby rene, semantiske og gjenbrukbare komponenter som gjør det å bygge applikasjonen din til en lek. Vuetify.js bruker Googles designmønster for design og tar signaler fra andre populære rammer som Materialize.css, Material Design Lite, Semantic UI og Bootstrap 4. Vuetify.js kommer med god dokumentasjon og full supportkomponent, det er veldig enkelt å lære.

2. Mint UI

Basert i iOS-stil, er mint UI ganske lett. Når alt er importert, tar den komprimerte koden bare ~ 30 kb (JS + CSS) gzip-plass. Mint UI kommer med liten størrelse og full støttekomponent, men dokumentasjonen er så vanskelig å forstå, fordi den er for enkel, og noen av dokumentene ble avskåret. Sist, selv om mynt UI har engelsk språkstøtte i dokumentasjonen, men i liveeksemplet fremdeles bruker kinesisk, så ille.

3. Vue-materiale

Vue Material er lette rammer bygget nøyaktig i henhold til Material Design spesifikasjonene. Bygg kraftige og godt designet webapper som kan passe på hver skjerm. Vue-materiale har likhet med komponenter i vinkelmaterialet, hvis du noen gang har brukt vinkelmateriale kan du enkelt bytte.

4. Keen UI

Keen UI er designet for å være et lett Vue.js UI-bibliotek med et enkelt API. Keen UI er inspirert av Googles materialdesign, men Keen UI er ikke et CSS-rammeverk, og som sådan vil du ikke finne et rutenettsystem eller stiler for typografi i det. I stedet er fokuset på å lage gjenbrukbare komponenter som har interaktivitet.

5. Vum

Vum er et UI Framework-bygg med Vue.js for mobil webapp. Vum har funksjon, fullsidestruktur (topptekst, innhold, bunntekst), haug med kraftige komponenter, enkle å bruke og utvide, og høy ytelse CSS3-animasjon. Vum er iOS-design basert på mint UI, men vum har mindre komponenter enn mint UI.

Konklusjon, Vuetify er de mest komplette og kraftfulle komponentene for vuejs-apper, kommer med god dokumentasjon, og den siste har den også integrasjon med NUXT for å bygge server-rendering-prosjekt. Så jeg vil sette vuetify som min første prioritet. Men hvis du vil velge enkelhet, bør du vurdere Mint UI eller Keen UI som ditt valg. Hvis du foretrekker Android-basert design, kan du velge Vuetify, og hvis du foretrekker å bruke iOS-basert design, bør du gå til Mint UI.