15 από τις πιο ενδιαφέρουσες Vue UI Component Library για το 2020

15 από τις πιο ενδιαφέρουσες Vue UI Component Library για το 2020

15 από τις πιο ενδιαφέρουσες Vue UI Component Library για το 2020
СОДЕРЖАНИЕ
02 июня 2020

Ενδιαφέρουσες βιβλιοθήκες στοιχείων Vue UI


"Γιατί να ασχοληθείτε με τις βιβλιοθήκες στοιχείων Vue UI?" Λοιπόν, το Vue ή το Vue.js, είναι μια δημοφιλής βιβλιοθήκη JavaScript που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε δυναμικές εφαρμογές στη διεπαφή. Από το ταπεινό ξεκίνημά του το 2014, έχει συγκεντρωθεί δυναμική τα τελευταία δύο χρόνια. Ο Vue έχει αναδειχθεί ως ο κύριος ανταγωνιστής του Angular and React και ένας από τους λόγους για τη δημοτικότητα του Vue είναι η ευρεία χρήση εξαρτημάτων, που καθιστούν την ανάπτυξη πολύ πιο εύκολο να κατανοηθεί.

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

1. Σετ υλικών Vue

κιτ υλικού vue

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

Υπάρχουν 60 χειροποίητα συστατικά ως μέρος του κιτ, δύο προσαρμοσμένες προσθήκες και τρεις σελίδες παραδείγματος.

2. Vuetify

Αρχική σελίδα Vuetify

Το Vuetify είναι ένα πλαίσιο πάνω από το Vue, το οποίο σας επιτρέπει δημιουργήστε καθαρά, σημασιολογικά, επαναχρησιμοποιήσιμα στοιχεία διεπαφής χρήστη. Λειτουργεί με την απόδοση πλευράς διακομιστή της Vue (SSR).

Αυτό που κάνει το Vuetify μια ενδιαφέρουσα επιλογή μεταξύ των καλύτερων βιβλιοθηκών Vue UI είναι η διαθεσιμότητα έτοιμων ικριωμάτων για κώδικα – με τη μορφή προκατασκευασμένων προτύπων vue-cli. Αυτό σας βοηθά να ξεκινήσετε γρήγορα. Το Vuetify διαθέτει επίσης μια καλή κοινότητα και τακτικές ενημερώσεις.

3. Μπούφυ

Μπούφυ

Μπούφυ είναι μια ελαφριά βιβλιοθήκη στοιχείων UI που βασίζεται σε Vue και Μπουλμά, ένα πλαίσιο CSS. Αυτό το πλαίσιο, αν και συνδυάζεται με το Bulma, είναι μικρότερο από 100 KB.

Εάν είστε άνετοι με το SASS, θα νιώσετε σαν στο σπίτι σας Οι ομοιότητες του Buefy με το SASS. Τούτου λεχθέντος, ενώ η Buefy παρέχει μια έτοιμη λίστα με στοιχεία για χρήση για μια εφαρμογή για αρχάριους, μπορεί να το θεωρείτε ανεπαρκές εάν εργάζεστε σε ένα μεγάλο έργο.

4. Υλικό Vue

Υλικό Vue

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

Με πάνω από 1,7 εκατομμύρια λήψεις, προσφέρει μια ελαφριά βιβλιοθήκη για τη δημιουργία εφαρμογών που χωρούν σε κάθε οθόνη. Η βιβλιοθήκη υλικών Vue είναι συμβατή με σύγχρονα προγράμματα περιήγησης ιστού και το API της είναι φιλικό για αρχάριους, καθιστώντας το ιδανικό για τη λίστα μας 2020.

5. Fish-UI

UI ψαριού

Το Fish UI είναι ένα ελαφρύ κιτ εργαλείων βιβλιοθήκης συστατικών Vue UI, με υποστήριξη για webpack και ES2015.

Τη στιγμή της γραφής, αυτό το έργο είχε μόνο πέντε συνεισφέροντες. Ωστόσο, υπήρξε κάποια δραστηριότητα τον τελευταίο μήνα, κάτι που υποδηλώνει ότι εξακολουθεί να είναι ενεργό. Μπορείτε να κατευθυνθείτε προς την τεκμηρίωση του έργου για να το δοκιμάσετε!

6. Κβάζαρ

Κβάζαρ

Το Quasar είναι ένα πλαίσιο front end που βασίζεται στο Vue. Θα πρέπει να το λάβετε υπόψη εάν σκοπεύετε να εργαστείτε σε εφαρμογές που ανταποκρίνονται στον ιστό και σε κινητές συσκευές. Είναι ένα πλήρες πλαίσιο που υποστηρίζει λειτουργίες όπως ελαχιστοποίηση και προσωρινή αποθήκευση – εκτός από στοιχεία για το πλαίσιο σας. Από τον Μάιο του 2020, έχει τελειώσει 14,6 χιλιάδες αστέρια στο GitHub.

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

7. Vux

Vux

Το Vux είναι ένα πλαίσιο που βασίζεται στο WeUI του WeChat και στο webpack, πάνω από το Vue. Ωστόσο, η τεκμηρίωση είναι κυρίως στα κινέζικα, με ελάχιστη αγγλική μετάφραση. Η Vux δίνει έμφαση στην ταχεία ανάπτυξη κινητών στοιχείων για την εφαρμογή σας.

Εδώ είναι μια ζωντανή επίδειξη του Vux, το οποίο απαριθμεί όλα τα στοιχεία και την απόδοση τους στο πρόγραμμα περιήγησης.

8. Στοιχείο

Στοιχείο

Το Element είναι μια βιβλιοθήκη στοιχείων UI για τον Ιστό, η οποία έχει επίσης εκδόσεις για Αντιδρώ και Γωνιώδης, εκτός από το Vue. Αυτή η βιβλιοθήκη στοιχείων επικεντρώνεται ειδικά σε εφαρμογές επιφάνειας εργασίας, καθώς τα στοιχεία της δεν ανταποκρίνονται.

Το στοιχείο, επίσης, έχει σημαντική τεκμηρίωση στα κινέζικα, αν και παρέχονται ισπανικές και αγγλικές μεταφράσεις. Οι μη ιθαγενείς Κινέζοι ομιλητές πρέπει να περάσουν από το τεκμηρίωση διεθνοποίησης πριν χρησιμοποιήσουν το Element στα έργα τους.

9. Keen-UI

Έντονη τεκμηρίωση διεπαφής χρήστη

Το Keen-UI, σε αντίθεση με τις περισσότερες άλλες βιβλιοθήκες στοιχείων Vue UI που εμφανίζονται σε αυτό το άρθρο, εστιάζει στην αλληλεπίδραση μέσω JavaScript και όχι σε οπτικά στοιχεία. Το Keen-UI είναι εμπνευσμένο από Σχεδιασμός υλικών της Google, και έρχεται με ένα εύχρηστο API.

Το Keen UI δεν επαναλαμβάνει την ανάγκη χρήσης σε ολόκληρη την εφαρμογή σας και διαθέτει μερικά χρήσιμα στοιχεία που μπορούν να τοποθετηθούν στρατηγικά όπου χρειάζεται. Ως εκ τούτου, το Keen UI είναι μια καλή επιλογή κατά την προσθήκη επαναληπτικών χαρακτηριστικών σε μια υπάρχουσα εφαρμογή.

10. AT-UI

AT-UI

Το AT-UI είναι μια ακόμη βιβλιοθήκη στοιχείων Vue UI με έμφαση σε εφαρμογές επιφάνειας εργασίας.

Το AT-UI παρέχει επίπεδα στοιχεία UI για τις εφαρμογές σας στο Web. Υπάρχουν 14 συνεισφέροντες και δεν υπάρχει μεγάλη υποστήριξη, αν και υπάρχει ένα πρότυπο εκκίνησης στο GitHub μπορείτε να χρησιμοποιήσετε.

11. Μέντα-UI

Μέντα-UI

Το Mint UI είναι μια ελαφριά βιβλιοθήκη στοιχείων Vue UI που βασίζεται στον μεταγλωττιστή Babel JavaScript. Το μικρό μέγεθος αυτού του πακέτου το καθιστά κατάλληλο για χρήση σε εφαρμογές για κινητά. Το Mint UI παρέχει ένα θέμα που μοιάζει με iOS για τα στοιχεία της εφαρμογής σας. Εδώ είναι μια επίδειξη των στοιχείων του Mint UI.

Το Mint UI έχει πάνω από 15k αστέρια στο GitHub. Η ανάπτυξη του πλαισίου συνεχίζεται σε πλήρη εξέλιξη, με νέες δεσμεύσεις στον κύριο κλάδο στα μέσα Ιανουαρίου. Ωστόσο, μια γρήγορη ματιά στο πρόγραμμα παρακολούθησης ζητημάτων στο GitHub θα σας πει ότι το Mint UI εξυπηρετεί κυρίως τους Κινέζους προγραμματιστές.

12. VuePress

VuePress

Το VuePress είναι μια στατική γεννήτρια τοποθεσίας που βασίζεται στο Vue. Αυτό το πλαίσιο χρησιμοποιεί το webpack για τη δημιουργία προκαταρκτικών στατικών σελίδων HTML (τι γίνεται με τους στατικούς ιστότοπους του WordPress;), γεγονός που καθιστά την επεξεργασία πολύ πιο γρήγορη.

Η χρήση του VuePress ανοίγει πολλές δυνατότητες για το έργο σας – όπως αυτοματοποίηση της διαδικασίας τεκμηρίωσης. Είναι επίσης εύκολο να ενσωματωθεί στην υπάρχουσα εφαρμογή σας. Ωστόσο, ένα σημαντικό μειονέκτημα είναι ότι η υποστήριξη SEO είναι ακόμα νέα, και το έγγραφο δεν επικεντρώνεται ακόμη σε αυτό το θέμα.

13. Eagle.js

Eagle.js

Το Eagle.js είναι ένα πλαίσιο στο Vue που επιτρέπει στους προγραμματιστές να δημιουργούν μια παρουσίαση σε μια εφαρμογή ιστού. Υπάρχουν πολλά θέματα, κινούμενα σχέδια, widget και στυλ για να διαλέξετε και να προσαρμόσετε στο Eagle.js.

Παρόλο που το Eagle.js παρέχει έναν καλό αριθμό παραδειγμάτων στον ιστότοπο επίδειξης, τεκμηρίωση παραμένει ελάχιστο. Η προφανής εναλλακτική λύση για το Eagle.js είναι Reveal.js, ένα αυτόνομο πλαίσιο JavaScript για διαδικτυακές παρουσιάσεις. Ωστόσο, το Eagle.js ξεπερνά το μεγαλύτερο ελάττωμα με το Reveal.js – την ακαμψία της δομής παρουσίασης.

14. Bootstrap-Vue

Bootstrap-Vue

Το Bootstrap-Vue φέρνει τη δύναμη του Bootstrap, μιας ευρέως χρησιμοποιούμενης βιβλιοθήκης CSS, στο Vue. Σας παρέχει άμεσα διαθέσιμα στοιχεία διεπαφής χρήστη και σύστημα πλέγματος, καθώς και όλα είναι πρώτα για κινητά και ανταποκρίνονται. Επιπλέον, τα στοιχεία αυτής της βιβλιοθήκης είναι συμβατά με τις οδηγίες WAI-ARIA για προσβασιμότητα στον Ιστό. Ακολουθώντας τη φιλοσοφία του Bootstrap για γρήγορη δημιουργία στοιχείων UI, το Bootstrap-Vue επιτρέπει σε έναν προγραμματιστή να ξεκινήσει γρήγορα ένα έργο.

ο η τεκμηρίωση είναι εκτεταμένη και η υποστήριξη της κοινότητας είναι ισχυρή, γεγονός που το καθιστά μια ασφαλή επιλογή για κάποιον να ξεκινήσει ένα έργο.

15. Διεπαφή χρήστη iView

iView-UI

Το iView UI είναι μια βιβλιοθήκη στο Vue που παρέχει στοιχεία και widget UI, με έμφαση στον τακτοποιημένο σχεδιασμό. Το iView έχει το δικό του εργαλείο διεπαφής γραμμής εντολών (CLI), iView-cli, το οποίο παρέχει ένα οπτικό εργαλείο για ικριώματα συστατικών και μια έκδοση εκτός σύνδεσης της τεκμηρίωσης. Συντηρείται ενεργά, με τακτικές ενημερώσεις επίλυση σφαλμάτων και προσθήκη χαρακτηριστικών.

Εάν χρησιμοποιείτε το iView στο έργο σας, εδώ είναι ένα κιτ εκκίνησης, που θα σας βοηθήσει να ξεκινήσετε με τη βασική χρήση της βιβλιοθήκης.

Ποια βιβλιοθήκη συστατικών στοιχείων Vue UI θα επιλέξετε?

Έχουμε αναφέρει εδώ 15 βιβλιοθήκες συστατικών στοιχείων Vue UI που εκτελούν διάφορες λειτουργίες, αλλά ποια είναι η καλύτερη; Λοιπόν, η απάντηση, ως συνήθως, είναι "εξαρτάται." Εάν θέλετε μια ολοκληρωμένη λύση, μπορείτε να προχωρήσετε και να επιλέξετε Κβάζαρ. Από την άλλη πλευρά, εάν ψάχνετε μια λύση plug-and-play για τα υπάρχοντα έργα σας, ίσως θελήσετε να προχωρήσετε Vuetify ή Keen-UI.

Ποιες βιβλιοθήκες συστατικών στοιχείων Vue UI χρησιμοποιείτε στα έργα σας; Ενημερώστε μας στα σχόλιά σας παρακάτω.

Μπορεί επίσης να σας ενδιαφέρει αυτά τα άρθρα:

  • Καλύτερα πρότυπα γωνιακού πίνακα ελέγχου διαχειριστή

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

* Αυτή η ανάρτηση περιέχει συνδέσμους συνεργατών, πράγμα που σημαίνει ότι εάν κάνετε κλικ σε έναν από τους συνδέσμους προϊόντων και στη συνέχεια αγοράσετε το προϊόν, θα λάβουμε μια μικρή χρέωση. Μην ανησυχείτε, ωστόσο, θα πληρώσετε το κανονικό ποσό, οπότε δεν υπάρχει κόστος από την πλευρά σας.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector