Πώς να δομήσετε ένα έργο Vue.js

Η τέλεια δομή του φακέλου Vue.js και η αρχιτεκτονική εξαρτημάτων με έξυπνα και χαβτικά στοιχεία

Το Vue.js είναι κάτι περισσότερο από μια διαφημιστική διαφημιστική εκστρατεία, είναι ένα εξαιρετικό πλαίσιο των μέσων ενημέρωσης. Είναι πολύ εύκολο να ξεκινήσετε με αυτό και να δημιουργήσετε μια εφαρμογή ιστού. Το Vue.js περιγράφεται συχνά ως ένα πλαίσιο για μικρές εφαρμογές και ακόμα μερικές φορές ως εναλλακτική λύση για το jQuery λόγω του μικρού μεγέθους του! Προσωπικά πιστεύω ότι μπορεί να ταιριάζει και σε μεγαλύτερα έργα και σε αυτή την περίπτωση, είναι σημαντικό να το δομήσουμε καλά, όσον αφορά την αρχιτεκτονική συστατικών στοιχείων.

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

Χρειάστηκα να βρω τις απαντήσεις σε μερικές ερωτήσεις που είχα. Αυτό θα βρείτε σε αυτή την ανάρτηση:

  • Πώς διαρθρώνετε τα αρχεία και τους φακέλους μέσα στο έργο Vue.js;
  • Πώς γράφετε τα στοιχεία Smart και Dumb και πού τα βάζετε; Είναι μια ιδέα που προέρχεται από το React.
  • Τι είναι το στυλ και οι βέλτιστες πρακτικές κωδικοποίησης Vue.js;

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

Δομή φακέλου Vue.js

Εδώ είναι το περιεχόμενο του φακέλου src. Σας συνιστώ να ξεκινήσετε το έργο με το Vue CLI. Εγώ προσωπικά χρησιμοποίησα το προεπιλεγμένο πρότυπο Webpack.

.
├── app.css
├── App.vue
├── assets
│ └─── ...
├── componente
│ └─── ...
├─ main.js
├── Mixes
│ └─── ...
├α δρομολογητή
│ └── index.js
├── αποθήκευση
│ ├─── index.js
│ ├──
│ │ └─── ...
│ └── mutation-types.js
Μεταφράσεις ├──
│ └── index.js
├── utils
│ └─── ...
└───────────┘
    └── ...

Μερικές λεπτομέρειες για κάθε έναν από αυτούς τους φακέλους:

  • περιουσιακά στοιχεία - Όταν τοποθετείτε τα στοιχεία που εισάγονται στα στοιχεία σας
  • - όλα τα στοιχεία των έργων που δεν είναι οι κύριες προβολές
  • Mixins - Τα mixins είναι τα μέρη του javascript κώδικα που επαναχρησιμοποιούνται σε διαφορετικά στοιχεία. Σε ένα mixin μπορείτε να βάλετε τις μεθόδους οποιουδήποτε στοιχείου από το Vue.js θα συγχωνευτούν με εκείνες του στοιχείου που το χρησιμοποιεί.
  • router - Όλες οι διαδρομές των έργων σας (στην περίπτωσή μου τις έχω στο index.js). Βασικά στο Vue.js όλα είναι ένα συστατικό στοιχείο. Αλλά δεν είναι όλα μια σελίδα. Μια σελίδα έχει μια διαδρομή όπως "/ dashboard", "/ settings" ή "/ search". Εάν ένα στοιχείο έχει μια διαδρομή, δρομολογείται.
  • (προαιρετικά) - Οι σταθερές Vuex σε mutation-type.js, οι ενότητες Vuex στις ενότητες υποφακέλων (οι οποίες στη συνέχεια φορτώνονται στο index.js).
  • μεταφράσεις (προαιρετικά) - Locales αρχεία, χρησιμοποιώ το Vue-i18n, και λειτουργεί πολύ καλά.
  • utils (προαιρετικά) - Λειτουργίες που χρησιμοποιώ σε ορισμένα στοιχεία, όπως δοκιμές αξίας regex, σταθερές ή φίλτρα.
  • προβολές -Για να κάνετε το έργο πιο γρήγορα για να διαβάσετε Διαχωρίζω τα στοιχεία που δρομολογούνται και τα βάζω σε αυτό το φάκελο. Τα συστατικά που δρομολογούνται για μένα είναι κάτι παραπάνω από ένα στοιχείο, καθώς αντιπροσωπεύουν σελίδες και έχουν διαδρομές, τις βάζω σε "προβολές" και στη συνέχεια, όταν ελέγχετε μια σελίδα που πηγαίνετε σε αυτό το φάκελο.

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

Μερικοί πόροι εμπνεύστηκα

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Έξυπνα ή χαζή εξαρτήματα με Vue.js

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

Αν είστε εξοικειωμένοι με το μοτίβο MVC, μπορείτε να συγκρίνετε τα στοιχεία σκουπίσματος με τα στοιχεία View και smart στο Controller!

Στο React τα έξυπνα και χαζή εξαρτήματα συνήθως τοποθετούνται σε διαφορετικούς φακέλους, ενώ στο Vue.js τα βάζετε όλα στον ίδιο φάκελο: τα στοιχεία. Για να διαφοροποιήσετε το Vue.js θα χρησιμοποιήσετε μια σύμβαση ονομασίας. Ας υποθέσουμε ότι έχετε ένα στοιχείο χαμένης κάρτας, τότε θα πρέπει να χρησιμοποιήσετε ένα από αυτά τα ονόματα:

  • BaseCard
  • AppCard
  • VCard

Αν έχετε ένα έξυπνο στοιχείο που χρησιμοποιεί το BaseCard και προσθέτει μερικές μεθόδους σε αυτό, μπορείτε, για παράδειγμα, να το ονομάσετε, ανάλογα με το έργο σας:

  • ΠροφίλCard
  • ItemCard
  • NewsCard

Εάν το έξυπνο στοιχείο σας δεν είναι μόνο μια "πιο έξυπνη" βάση δεδομένων με μεθόδους, απλώς χρησιμοποιήστε οποιοδήποτε όνομα που ταιριάζει στο εξάρτημα σας και χωρίς να ξεκινάτε με βάση (ή App ή V), για παράδειγμα:

  • Πίνακας ελέγχου
  • Αποτελέσματα αναζήτησης
  • Προφίλ χρήστη

Αυτή η ονομασία σύμβαση προέρχεται από την επίσημη styleguide Vue.js που περιέχει επίσης συμβάσεις ονομασίας!

Συμβάσεις ονοματολογίας

Εδώ είναι μερικές συμβάσεις που προέρχονται από το επίσημο styleguide του Vue.js που πρέπει να δομήσετε καλά το έργο σας:

  • Τα ονόματα των συστατικών θα πρέπει να είναι πάντοτε πολλαπλών λέξεων, εκτός από τα συστατικά της ρίζας "App". Για παράδειγμα, χρησιμοποιήστε "UserCard" ή "ProfileCard" αντί για "Κάρτα".
  • Κάθε συνιστώσα πρέπει να βρίσκεται στο δικό της αρχείο.
  • Τα ονόματα αρχείων των αρχείων ενός αρχείου θα πρέπει να είναι πάντα PascalCase ή πάντα kebab περίπτωση. Χρησιμοποιήστε το "UserCard.vue" ή "user-card.vue".
  • Τα στοιχεία που χρησιμοποιούνται μόνο μία φορά ανά σελίδα πρέπει να ξεκινούν με το πρόθεμα "The", για να υποδηλώνουν ότι μπορεί να υπάρχει μόνο ένα. Για παράδειγμα, για μια γραμμή πλοήγησης ή μια υποσημείωση θα πρέπει να χρησιμοποιήσετε το "TheNavbar.vue" ή το "TheFooter.vue".
  • Τα εξαρτήματα παιδιών θα πρέπει να περιλαμβάνουν το πρόθεμα τους ως πρόθεμα. Για παράδειγμα, αν θέλετε ένα στοιχείο "Φωτογραφία" που χρησιμοποιείται στο "UserCard" θα το ονομάσετε "UserCardPhoto". Είναι για καλύτερη αναγνωσιμότητα, αφού τα αρχεία σε ένα φάκελο είναι συνήθως ταξινομημένα αλφαβητικά.
  • Χρησιμοποιήστε πάντα το πλήρες όνομα αντί για συντομογραφία στο όνομα των στοιχείων σας. Για παράδειγμα, μην χρησιμοποιείτε "UDSettings", χρησιμοποιήστε αντί "UserDashboardSettings".

Vue.js επίσημο styleguide

Είτε είστε προηγμένος ή αρχάριος με το Vue.js, πρέπει να διαβάσετε αυτό το styleguide Vue.js, περιέχει πολλές συμβουλές και επίσης συμβάσεις ονομασίας. Περιέχει πολλά παραδείγματα πράγματα που πρέπει να κάνετε και να μην κάνετε.

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

Θέλετε να δείτε περισσότερα άρθρα σαν αυτό; Υποστηρίξτε με τον Patreon