Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

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

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

Πίνακας περιεχομένων

1 εγκατάσταση έργου

1.1 Επιλέξτε τον κατάλογο και ξεκινήστε το τερματικό

1.2 Εγκαταστήστε την εντολή create-react-app

1.3 Δημιουργία έργου

1.4 Προβολή αρχείων καταλόγου

1.5 Ξεκινήστε το έργο

2 βιβλιοθήκες τρίτων που σίγουρα θα χρησιμοποιηθούν

2.1 js-tool-big-box

2.1.1 Κατηγορία ώρας και ημερομηνίας

2.1.2 Κατηγορία διαδικτυακού καταστήματος

2.1.3 Τάξη εκδήλωσης

2.1.4 Αριθμητική κατηγορία

2.1.5 Κατηγορία χορδών

2.1.6 Τακτική κλάση επαλήθευσης

2.1.7 κατηγορία ajax

2.1.8 Κατηγορία δεδομένων δεδομένων

2.1.9 κατηγορία προγράμματος περιήγησης προγράμματος περιήγησης

Προεπεξεργαστής 2.2 less ή sass

Βιβλιοθήκη αιτημάτων 2.3 axios

2.4 Βιβλιοθήκη διεπαφής χρήστη

---

1 εγκατάσταση έργου

1.1 Επιλέξτε τον κατάλογο και ξεκινήστε το τερματικό

Μπορείτε να βρείτε έναν φάκελο στον υπολογιστή σας ως τον κατάλογο για την εξάσκηση αυτού του έργου React, μετά πληκτρολογήστε "cmd" στη διεύθυνση URL του φακέλου, το τερματικό θα εμφανιστεί και μπορείτε επίσης να καθορίσετε τον κατάλογο προορισμού:

 

Εδώ εισάγετε "cmd" και πατήστε Enter για να εμφανιστεί το αναδυόμενο παράθυρο τερματικού.

1.2 Εγκαταστήστε την εντολή create-react-app

Εκτελέστε την ακόλουθη εντολή, -g σημαίνει να την εγκαταστήσετε καθολικά

npm εγκατάσταση -g create-react-app

1.3 Δημιουργία έργου

Για παράδειγμα, θέλουμε να δημιουργήσουμε ένα αρχείο με όνομα js-tool-big-box-react έργο, τότε μπορείτε να εκτελέσετε την ακόλουθη εντολή:

δημιουργία-αντίδραση-εφαρμογή js-tool-big-box-react

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

1.4 Προβολή αρχείων καταλόγου

• Ο δημόσιος κατάλογος αποθηκεύει οικεία αρχεία html και ορισμένα στατικά απαιτούμενα αρχεία.
• Ο κατάλογος src είναι ένας σημαντικός κατάλογος για την ανάπτυξη έργου.
• Πιο κάτω, το index.js είναι το αρχείο καταχώρισης.
• Μπορείτε να δοκιμάσετε να κάνετε κάποιες αλλαγές στο App.js και, στη συνέχεια, να ελέγξετε το εφέ της ιστοσελίδας

1.5 Ξεκινήστε το έργο

Στην παραπάνω εικόνα, χρησιμοποιούμε τον επεξεργαστή VSCode για να ανοίξουμε το έργο React Αυτή τη στιγμή, εισαγάγετε την εντολή στην κονσόλα:

npm έναρξη

Στη συνέχεια, το έργο θα μας βοηθήσει ενεργά να ενεργοποιήσουμε το πρόγραμμα περιήγησης,http://localhost:3000/Η διεύθυνση και, στη συνέχεια, μπορείτε να δείτε το περιστρεφόμενο εικονίδιο React και το έργο εγκαθίσταται.

 

2 βιβλιοθήκες τρίτων που σίγουρα θα χρησιμοποιηθούν

Μετά την ολοκλήρωση της εγκατάστασης του έργου, θα ξεκινήσει η ανάπτυξη του έργου. Όπως λέει και η παροιμία, αν ένας εργαζόμενος θέλει να κάνει καλά τη δουλειά του, πρέπει πρώτα να ακονίσει την ενέργειά του.Πριν από την ανάπτυξη του έργου, ας μιλήσουμε για μερικά πράγματα που σίγουρα θα χρησιμοποιηθούν στην ανάπτυξη έργου front-end.Βιβλιοθήκες τρίτων .Χρησιμοποιώντας αυτές τις βιβλιοθήκες τρίτων, μπορούν να μας βοηθήσουν να αναπτυχθούμεπιο αποτελεσματικό。

2.1 js-tool-big-box

Πρώτα ελάτε στη διεύθυνση εκμάθησης του js-tool-big-box, κάντε κλικ εδώ:Διεύθυνση εκμάθησης βιβλιοθήκης εργαλείων js-tool-big-box

Το js-tool-big-box είναι σχεδόν μια υποχρεωτική βιβλιοθήκη npm για έργα ανάπτυξης front-end Έχει πλούσιες λειτουργίες και είναι εύκολο στη χρήση, καθιστώντας την ανάπτυξη front-end εξαιρετικά αποτελεσματική. Οι τρέχουσες λειτουργίες του περιλαμβάνουν αλλά δεν περιορίζονται σε:

2.1.1 Κατηγορία ώρας και ημερομηνίας

1. Μετατροπή ώρας και ημερομηνίας.
2. Πιο ευέλικτη μορφή ώρας.
3. Πιο εξατομικευμένη απόκτηση χρόνου.
4. Η χρονική περίοδος από ένα συγκεκριμένο χρονικό σημείο έως τώρα (περισσότερες λεπτομερείς πληροφορίες επιστροφής)
5. Προσδιορίστε εάν είναι ένα συνηθισμένο έτος ή ένα δίσεκτο έτος.
6. Πόσες μέρες υπάρχουν σε ένα μήνα;
7. ζώδιο;
8. προβλεπόμενες αργίες του έτους·
9. Βρείτε τον χρόνο των βασικών πόλεων σε όλο τον κόσμο.

2.1.2 Κατηγορία διαδικτυακού καταστήματος

1. Λάβετε την τιμή της παραμέτρου στο url
2. Ορισμός cookies?
3. Λάβετε cookies.
4. Διαγραφή cookies.
5. Ορισμός τοπικής αποθήκευσης.
6. Αποκτήστε localStorage

2.1.3 Τάξη εκδήλωσης

1. Αντικραδασμική
2. Γκάζι

2.1.4 Αριθμητική κατηγορία

1. Χιλιάδες κόμματα χωρισμένα.
2. Προσδιορίστε εάν είναι μεγαλύτερο από 0.
3. Προσδιορίστε εάν ένας ακέραιος είναι μεγαλύτερος από 0.
4. Δημιουργήστε τυχαίους αριθμούς εντός του καθορισμένου εύρους.
5. Δημιουργήστε έναν τυχαίο αριθμό με έναν καθορισμένο αριθμό ψηφίων.
6. Μετατροπή αριθμών σε πεζά κινέζικα.
7. Μετατροπή αριθμών σε κεφαλαία κινέζικα.

2.1.5 Κατηγορία χορδών

1. Αντίστροφη χορδή?
2. Henggang και μικρή καμπούρα
3. Ο οριζόντιος λόφος στρέφεται προς τη μεγάλη καμπούρα.
4. Σύγκριση αριθμού έκδοσης.
5. Λάβετε το μήκος byte μιας συμβολοσειράς.
6. δημιουργία uuid?
7. Λάβετε το φύλο, την ηλικία και την ημερομηνία γέννησης με βάση τον αριθμό ταυτότητας.
8. Προσθέστε ειδικά σύμβολα στη μέση της συμβολοσειράς για απόκρυψη βασικών πληροφοριών.
9. Μετατροπή κεφαλαίων και πεζών γραμμάτων συμβολοσειράς.

2.1.6 Τακτική κλάση επαλήθευσης

1. Επαλήθευση μορφής email.
2. Επαλήθευση μορφής αριθμού κινητού τηλεφώνου.
3. Επαλήθευση μορφής URL.
4. Επαλήθευση μορφής αριθμού ταυτότητας.
5. Επαλήθευση μορφής διεύθυνσης IP.
6. Επικύρωση μορφής ταχυδρομικού κώδικα.

7. Προσδιορίστε εάν πρόκειται για χαρακτήρα Unicode.

8. Ανίχνευση τιμής ισχύος κωδικού πρόσβασης.

2.1.7 κατηγορία ajax

1. Αποστολή αιτήματος jsonp.
2. Κάντε λήψη της αμιγώς λειτουργικής έκδοσης του αρχείου.
3. Λήψη αρχείων, λήψη + λήψη της έκδοσης λειτουργίας.

2.1.8 Κατηγορία δεδομένων δεδομένων

1. Λάβετε έναν τυχαίο αριθμό τιμών από τον πίνακα.
2. Αντιγραφή κειμένου στο πρόχειρο.
3. Αποδιπλασιασμός πίνακα;
4. Λάβετε πιο λεπτομερείς τύπους δεδομένων.
5. Ταξινόμηση αριθμητικών πινάκων (μπροστινή και αντίστροφη σειρά).
6. Ταξινόμηση πίνακα αντικειμένων (μπροστινή και αντίστροφη σειρά)

2.1.9 κατηγορία προγράμματος περιήγησης προγράμματος περιήγησης

1. Προσδιορίστε εάν το τρέχον πρόγραμμα περιήγησης είναι κινητό.
2. Προσδιορίστε εάν το στοιχείο βρίσκεται εντός του ορατού εύρους.

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

4. Ενεργοποίηση και απενεργοποίηση πλήρους οθόνης σε πλήρη οθόνη.

5. Λάβετε το userAgent του προγράμματος περιήγησης και λεπτομερείς πληροφορίες.

Προεπεξεργαστής 2.2 less ή sass

Ο παραδοσιακός τρόπος γραφής CSS είναι σχετικά χαμηλής ποιότητας Η χρήση προεπεξεργαστών όπως το less ή το sass μπορεί να κάνει την ανάπτυξη CSS πιο αποτελεσματική και συνιστάται ιδιαίτερα.

Έγγραφα Μελέτης (Λιγότερο γρήγορη εκκίνηση |.)

Βιβλιοθήκη αιτημάτων 2.3 axios

Γενικά, τα έργα περιλαμβάνουν αλληλεπίδραση με τον διακομιστή και αυτή τη στιγμή μπορείτε να χρησιμοποιήσετε το axios για να στείλετε αιτήματα.

τεκμηρίωση εκμάθησης axios(Κινεζική τεκμηρίωση axios |.)

2.4 Βιβλιοθήκη διεπαφής χρήστη

Για το React, εάν πρόκειται για ανάπτυξη της πλευράς C, ελπίζουμε να είμαστε σε θέση να γράψουμε με το χέρι μερικές σχετικά ελαφριές βιβλιοθήκες διεπαφής χρήστη, αλλά αν πρόκειται για ανάπτυξη της πλευράς Β, προτείνουμε το Ant Design.

Έγγραφο εκμάθησης σχεδιασμού μυρμηγκιών(Ant Design - Μια γλώσσα σχεδιασμού διεπαφής χρήστη εταιρικής ποιότητας και βιβλιοθήκη στοιχείων React)