Bedste mobile komponenter til progressive webapps i VueJs

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

I 2015 opdagede designer Frances Berriman og Google Chrome-ingeniøren Alex Russell udtrykket “Progressive Web Apps” for at beskrive apps, der drager fordel af nye funktioner understøttet af moderne browsere, der lader brugerne opgradere webapps til progressive webapplikationer i deres oprindelige operativsystem (OS) . De er pålidelige, hurtige og engagerende. Kort sagt, det er et skub for at bringe native power til internettet. I dag er PWA blevet større, her er udstillingsvinduet for det websted, der bruger PWA, du kan tjekke her.

For nylig i Google IO 2017 talte Addy Osmani (Engineering Manager hos Google, der arbejder på Chrome & Web Platform) om pwa i mange javascript-rammer, herunder vuejs.

To måneder før Google IO har Addy Osmani sendt et emne til det officielle vuejs-arkiv til det foreslåede officielle skabelon for vue pwa for vue-cli, så blev Evan You som forfatter af vuejs enige med Addys forslag. Så efter Google IO udsendte Addy nøjagtigt den 1. juni 2017 pwa-skabelon i vue-cli. Nu kan du oprette pwa-projekt efter kommandotype i din terminal som denne.

$ vue init pwa 

Skabelonen var så kraftig, den var inkluderet forarbejder af servicearbejdere af applikations shell + statiske aktiver (prod), script (async chunk) forindlæsning ved hjælp af , webapplikationsmanifest + favicons, mobilvenlig meta-viewport , og fyrtårens score på 90 + / 100. Men det kommer ikke med indbyggede komponenter, så i dette indlæg vil jeg foreslå nogle af mobile komponenter til at fremskynde din UI-udvikling i vuejs progressive webapps. Her er listerne med mobilkomponenter til oprettelse af PWA i vuejs.

  1. Vuetify

Vuetify.js er en semantisk komponentramme til Vue.js 2. Den sigter mod at levere rene, semantiske og genanvendelige komponenter, der gør det at opbygge din applikation en leg. Vuetify.js bruger Googles designmateriale for design af materialer og tager signaler fra andre populære rammer som Materialize.css, Material Design Lite, Semantic UI og Bootstrap 4. Vuetify.js kommer med god dokumentation og fuld supportkomponent, det er meget nemt at lære.

2. Mint UI

Baseret i iOS-stil er mint UI temmelig let. Når alt importeres, tager den komprimerede kode kun ~ 30 kb (JS + CSS) gzip-plads. Mint UI leveres med lille størrelse og fuld supportkomponent, men dokumentationen er så svær at forstå, fordi det er for simpelt, og nogle af dokumenter blev afbrudt. Endelig, selvom mynte UI har engelsk sprogunderstøttelse i dokumentationen, men i det levende eksempel stadig bruger kinesisk sprog, så dårligt.

3. Vue-materiale

Vue Material er letvægtsramme bygget nøjagtigt i henhold til Material Design specs. Byg kraftfulde og godt designet webapps, der kan passe på enhver skærm. Vue-materiale har lighed med kantede materialekomponenter, hvis du nogensinde har brugt kantet materiale, kan du nemt skifte.

4. Keen UI

Keen UI er designet til at være et let Vue.js UI-bibliotek med et simpelt API. Keen UI er inspireret af Googles materialdesign, men Keen UI er ikke en CSS-ramme, og som sådan finder du ikke et gittersystem eller typografier til typografi i det. I stedet er fokus på at skabe genanvendelige komponenter, der har interaktivitet.

5. Vum

Vum er en UI Framework-bygning med Vue.js til mobil webapp. Vum har funktion, hel sidestruktur (header, indhold, sidefod), en masse kraftfulde komponenter, let at bruge og udvide og højtydende CSS3-animation. Vum er iOS-design baseret på mint UI, men vum har mindre komponenter end mint UI.

Konklusion, Vuetify er de mest komplette og kraftfulde komponenter til vuejs-apps, leveres med god dokumentation, og den sidstnævnte har også integration med NUXT til bygning af server-side gengivelsesprojekt. Så jeg vil sætte vuetify som min første prioritet. Men hvis du vil vælge enkelhed, skal du overveje Mint UI eller Keen UI som dit valg. Hvis du foretrækker Android-baseret design, kan du vælge Vuetify, og hvis du foretrækker at bruge iOS-baseret design, skal du gå til Mint UI.