Τα καλύτερα κινητά στοιχεία για προοδευτικές εφαρμογές ιστού στο VueJs

Προοδευτικές εφαρμογές ιστού (Πηγή: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

Το 2015 ο σχεδιαστής Frances Berriman και ο μηχανικός του Google Chrome, Alex Russell, επεξεργάστηκαν τον όρο "Progressive Web Apps" για να περιγράψουν τις εφαρμογές που εκμεταλλεύονται τις νέες λειτουργίες που υποστηρίζονται από σύγχρονα προγράμματα περιήγησης που επιτρέπουν στους χρήστες να αναβαθμίζουν εφαρμογές ιστού σε προοδευτικές εφαρμογές ιστού στο λειτουργικό σύστημα . Είναι αξιόπιστοι, γρήγοροι και αφοσιωμένοι. Με λίγα λόγια, είναι μια ώθηση για να φέρει εγγενή δύναμη στο διαδίκτυο. Σήμερα, η PWA έχει αυξηθεί, εδώ είναι η βιτρίνα της ιστοσελίδας που χρησιμοποιεί PWA, μπορείτε να ελέγξετε εδώ.

Πρόσφατα στο Google IO 2017, ο Addy Osmani (Διευθυντής Μηχανικών στο Google που εργάζεται στην πλατφόρμα Chrome & Web) μίλησε για το pwa σε πολλά πλαίσια javascript που περιλαμβάνουν vuejs.

Δύο μήνες πριν από την Google IO, ο Addy Osmani έστειλε τεύχος στο επίσημο αποθετήριο vuejs στο προτεινόμενο για το vue-cli πρότυπο vue pwa, κατόπιν ο Evan You ως συντάκτης της vuejs συμφώνησε με την πρόταση του Addy. Έτσι, μετά από την Google IO, ακριβώς την 1η Ιουνίου 2017 Addy κυκλοφόρησε το pwa template στο vue-cli. Τώρα μπορείτε να δημιουργήσετε pwa έργο από την εντολή τύπου στο τερματικό σας όπως αυτό.

$ vue init pwa 

Το πρότυπο ήταν τόσο ισχυρό, συμπεριλαμβανόταν η προεγκατάσταση του εργαζόμενου στις υπηρεσίες εφαρμογής του κελύφους + στατικά στοιχεία (prod), η προεγκατάσταση δέσμης ενεργειών (async chunk) με τη χρήση διαφήμιση + favicons , και σκορ φάρου 90 + / 100. Αλλά δεν έρχεται με ενσωματωμένα εξαρτήματα, οπότε σε αυτή τη θέση θα προτείνω μερικά από τα κινητά στοιχεία να επιταχύνουν την ανάπτυξη του UI σας στις προοδευτικές εφαρμογές web vuejs. Ακολουθούν οι κατάλογοι του κινητού εξαρτήματος για τη δημιουργία PWA σε vuejs.

  1. Vuetify

Το Vuetify.js είναι ένα πλαίσιο σημασιολογικού στοιχείου για το Vue.js 2. Σκοπός του είναι να παρέχει καθαρά, σημασιολογικά και επαναχρησιμοποιήσιμα στοιχεία που καθιστούν την εφαρμογή σας μια αύρα. Το Vuetify.js χρησιμοποιεί το σχέδιο σχεδίασης υλικών της Google, λαμβάνοντας υπαινιγμούς από άλλα δημοφιλή πλαίσια όπως το Materialalize.css, το Material Design Lite, το Semantic UI και το Bootstrap 4. Το Vuetify.js συνοδεύεται από καλή τεκμηρίωση και πλήρη υποστήριξη, είναι πολύ εύκολο να μάθει.

2. UI μέντας

Με βάση το στυλ iOS, το μέντας UI είναι αρκετά ελαφρύ. Όταν όλα τα εισαγόμενα, ο συμπιεσμένος κώδικας λαμβάνει μόνο χώρο ~ 30kb (JS + CSS) gzip. Το Mint UI έρχεται με μικρό μέγεθος και πλήρη συνιστώσα υποστήριξης, αλλά η τεκμηρίωση είναι τόσο δύσκολο να κατανοηθεί, επειδή είναι πολύ απλή και κάποια από τα docs κόπηκαν. Τέλος, αν και το μέντιουμ UI έχει υποστήριξη αγγλικής γλώσσας στην τεκμηρίωση, αλλά στο ζωντανό παράδειγμα που εξακολουθεί να χρησιμοποιεί κινέζικη γλώσσα, τόσο άσχημα.

3. Υλικό Vue

Το Vue Material είναι ελαφρύ πλαίσιο που κατασκευάστηκε ακριβώς σύμφωνα με τις προδιαγραφές σχεδιασμού υλικών. Δημιουργήστε ισχυρές και καλά σχεδιασμένες εφαρμογές ιστού που μπορούν να χωρέσουν σε κάθε οθόνη. Το υλικό Vue έχει ομοιότητα με τα στοιχεία γωνιακού υλικού, εάν χρησιμοποιήσατε ποτέ γωνιακό υλικό που μπορείτε εύκολα να αλλάξετε.

4. Keen UI

Το Keen UI είναι σχεδιασμένο να είναι μια ελαφριά βιβλιοθήκη Vue.js UI με ένα απλό API. Το Keen UI εμπνέεται από το υλικό σχεδίασης της Google, αλλά το Keen UI δεν είναι ένα πλαίσιο CSS και ως εκ τούτου δεν θα βρείτε ένα σύστημα πλέγματος ή στυλ τυπογραφίας σε αυτό. Αντ 'αυτού, η εστίαση είναι στη δημιουργία επαναχρησιμοποιήσιμων στοιχείων που έχουν διαδραστικότητα.

5. Vum

Το Vum είναι ένα πλαίσιο UI που βασίζεται στο Vue.js για webapp για κινητά. Το Vum έχει λειτουργία, δομή πλήρους σελίδας (κεφαλίδα, περιεχόμενο, υποσέλιδο), δέσμη ισχυρών στοιχείων, εύκολη στη χρήση και επέκταση και υψηλής απόδοσης animation CSS3. Το Vum είναι σχεδιασμός iOS με βάση τη μέντα UI, αλλά το vum έχει λιγότερα συστατικά από το μέντας UI.

Συμπέρασμα, το Vuetify είναι το πιο πλήρες και ισχυρό στοιχείο για τις εφαρμογές vuejs, έρχεται με καλή τεκμηρίωση και το τελευταίο έχει επίσης την ενσωμάτωση με το NUXT για την κατασκευή του server rendering side project. Γι 'αυτό θα το θέσω ως πρώτη προτεραιότητά μου. Αλλά, αν θέλετε να επιλέξετε απλότητα, θα πρέπει να θεωρήσετε το Mint UI ή Keen UI ως την επιλογή σας. Εάν προτιμάτε το Android με βάση το σχεδιασμό, μπορείτε να επιλέξετε Vuetify, και αν προτιμάτε να χρησιμοποιήσετε το iOS βασισμένο στο σχεδιασμό θα πρέπει να πάτε στο Mint UI.