Ισχύς ένα blog χρησιμοποιώντας το API WordPress

Sep 12, 2025
πως να
Custom site powered by WordPress API

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

Αυτό σημαίνει ότι είναι δυνατό να διατηρηθούν όλα τα πλεονεκτήματα του λαμπρού πίνακα ελέγχου Wordpress, η οποία γίνεται εξαιρετικά ευέλικτη από τη δημοφιλή Plugins wordpress Όπως τα προηγμένα προσαρμοσμένα πεδία και έχετε ένα εντελώς προσαρμοσμένο μετωπικό μέτωπο που αλληλεπιδρά μόνο με το WordPress όταν χρειάζεται.

Σε αυτό Wordpress tutorial Θα εξερευνήσουμε τον τρόπο εφαρμογής του API του WordPress Rest σε μια απλή εφαρμογή blog, η οποία χρησιμοποιεί αυτήν τη στιγμή ένα τοπικό αρχείο JSON ως πηγή δεδομένων και είναι κατασκευασμένη ως εφαρμογή μιας σελίδας (SPA) χρησιμοποιώντας το δημοφιλές πλαίσιο JavaScript Vue.js . Αυτό θα περιλαμβάνει την εφαρμογή του Vuex, την οποία θα χρησιμοποιήσουμε για την αποθήκευση των δεδομένων που ζητάμε από ένα wordpress χρησιμοποιώντας ένα συνδυασμό των μεθόδων δράσης και μετάλλαξης.

Μόλις ολοκληρωθεί, θα έπρεπε να έχετε δημιουργήσει ένα άπαχο, απλό σπα, το οποίο έχει όλη την αντιδραστικότητα του vue.js, ενώ εμφανίζει αναρτήσεις που ανακτώνται και διαχειρίζονται από το WordPress.

Για πιο φοβερό API για να εξερευνήσετε, ρίξτε μια ματιά στους οδηγούς μας στο καλύτερο Javascript apis , Html apis και Apis google .

01. Ρυθμίστε το χώρο εργασίας και τις εξαρτήσεις

Πρώτα πράγματα πρώτα, θα πρέπει Κατεβάστε τα αρχεία του έργου και να τα ανοίξετε στον προτιμώμενο επεξεργαστή σας.

Στην κονσόλα, CD σε Ιστοσελίδα-πρότυπο και εκτελέστε την παρακάτω εντολή για να εγκαταστήσετε τις εξαρτήσεις κόμβων του έργου (αν δεν έχετε εγκατεστημένο κόμβο, Κάνετε αυτό πρώτα ). Θα δουλέψουμε καθαρά στο src Κατάλογος από εδώ έξω.

npm install

02. Εγκαταστήστε το vuex

Στη συνέχεια, χρησιμοποιώντας την παρακάτω εντολή, θα εγκαταστήσουμε Vuex , το οποίο είναι ένα πρότυπο κατάστασης διαχείρισης και βιβλιοθήκη για εφαρμογές vue.js. Αυτό θα λειτουργήσει ως κεντρικό κατάστημα πληροφοριών για όλα τα στοιχεία του vue που εξαρτώνται από τα δεδομένα που λαμβάνουμε από το API WordPress. Για τους προγραμματιστές εξοικειωμένοι με την αντίδραση, ο Vuex εμπνέεται έντονα από τη ροή.

npm install vuex --save

03. Έναρξη διακομιστή ανάπτυξης

Στην κονσόλα, εκτελέστε την παρακάτω εντολή για να ξεκινήσετε τον διακομιστή ανάπτυξης. Αυτό θα συγκεντρώσει το έργο vue.js όπως αυτή τη στιγμή βρίσκεται και το αναθέτει σε μια διεύθυνση URL, ώστε να μπορείτε να έχετε πρόσβαση σε αυτό. Αυτό είναι συνήθως localhost: 8080 .

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

npm run dev

04. Δημιουργία αποθήκευσης VUEX

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

 Εισαγωγή VUE από το «VUE»
Εισαγωγή εφαρμογής από το './App'
Εισαγωγή δρομολογητή από το './ROUTER'
Εισαγωγή αποθήκευσης από το './store'
Vue.config.productionTip = false
/ * απενεργοποιήστε το ESlint No-New * /
Νέο vue ({
  EL: '# #APP',
  δρομολογητής,
  κατάστημα,
  Πρότυπο: '& lt; app / & gt;',
  Εξαρτήματα: {app}
}) 

05. Δημιουργήστε σκαλωσιές αποθήκευσης και εγκαταστήστε τον Αξιό

Για να μας βοηθήσετε να απλοποιήσουμε τα αιτήματα AJAX, το κατάστημά μας θα κάνει το API WordPress, θα εγκαταστήσουμε τον Αξιό, το οποίο είναι ένας πελάτης HTTP που βασίζεται σε υπόσχεση. Για να το κάνετε αυτό, ανοίξτε ένα ξεχωριστό παράθυρο κονσόλας, μεταβείτε στο Ιστοσελίδα-πρότυπο Κατάλογος και εκτέλεση NPM εγκατάσταση axios - Αποθήκευση .

Στη συνέχεια, ας αρχίσουμε να ικρίωσε το κατάστημα με την αύξηση ενός νέου άδειου αντικειμένου αποθήκευσης Vuex. Αυτή τη στιγμή, δεν κάνει τίποτα, αλλά τουλάχιστον το Vue θα πρέπει να το γνωρίζει.

 Εισαγωγή Αξιού από το «Αξιού»
Εισαγωγή VUE από το 'VUE'
Εισαγωγή vuex από το 'Vuex'
Vue.use (vuex)
const store = new vuex.store ({
  κατάσταση: {},
  Ενέργειες: {},
  μεταλλάξεις: {}
})
Εξαγωγή προεπιλεγμένου καταστήματος 

06. Δημιουργία κράτους μηνυμάτων

Στο Vuex, το κράτος αντικείμενο κρατά πληροφορίες εφαρμογών, η οποία σε αυτή την περίπτωση θα είναι τα δεδομένα WordPress Post θα πάμε με το API. Μέσα σε αυτό το αντικείμενο, δημιουργήστε μια νέα ιδιοκτησία που ονομάζεται δημοσιεύσεις και την εκχωρήστε μια τιμή μηδέν.

 Κράτος: {
  Δημοσιεύσεις: Null
} 

07. Δημιουργία δράσης GetPosts

Στο Vuex, οι δράσεις είναι ο κύριος τρόπος με τον οποίο χειρίζονται τα ασύγχρονα αιτήματα. Αυτές είναι συνήθως μέθοδοι που ορίζονται στο κατάστημα, οι οποίες στη συνέχεια μπορούν να αποσταλούν όπως απαιτείται από την εφαρμογή.

Σε άδειο Ενέργειες Αντικείμενο, ας ορίσουμε ένα από το οποίο εάν η κατάσταση των δημοσιεύσεών μας εξακολουθεί να είναι μηδενική, ο Αξιός χρησιμοποιείται για να εκτελέσει ένα αίτημα Ajax στο API WordPress και να επιστρέψει μια λίστα μηνυμάτων. Μόλις λάβουμε μια θετική απάντηση, θα επιλύσουμε τότε την υπόσχεση και θα διαπράττουμε τις θέσεις χρησιμοποιώντας το αποθήκες μετάλλαξη.

 GetPosts: λειτουργία (πλαίσιο) {
  Επιστρέψτε τη νέα υπόσχεση ((αποφασιστικότητα, απορρίψτε) = & gt; {
  αν (context.state.posts) {
  αποφασίζω()
  }
  αλλιώς {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / POSTS ')
  .Then ((απάντηση) = & gt; {
  Control.commit ('Storeposts',
  απάντηση.Data)
  αποφασίζω()
  }). Catch ((σφάλμα) = & GT; {
  απόρριψη (σφάλμα).
  });
  }
  })
} 

08. Δημιουργία μεταλλάκισης αποθηκευμένων

Μια άλλη ιδέα που εισάγεται από το Vuex είναι μεταλλάξεις, οι οποίες είναι επίσης συνήθως μέθοδοι που ορίζονται στο κατάστημα. Οι μεταλλάξεις είναι ο μόνος τρόπος αλλαγής της κατάστασης σε ένα κατάστημα Vuex, το οποίο επιτρέπει την εύκολη παρακολούθηση της κατάστασης κατά την αποσφαλμάτωση.

Σε άδειο μεταλλάξεις αντικείμενο, ας ορίσουμε το αποθήκες Μέθοδος που αναφέραμε στο προηγούμενο βήμα και την καθιστούσαμε να παρακάμψει τη θέση ιδιοκτησίας στο κράτος αντικείμενο με οποιαδήποτε δεδομένα, η μετάλλαξη λαμβάνει ως ωφέλιμο φορτίο.

 Storeposts (κατάσταση, απάντηση) {
   State.Posts = απάντηση} 

09. Τραβήξτε τη δράση GetPosts στο φορτίο

Δημιουργήσαμε τις μεθόδους δράσης και μετάλλαξης που αρπάζουν τις δημοσιεύσεις από το API WordPress και τους διαπράττονται στο κράτος Vuex, αλλά τώρα πρέπει να ενεργοποιήσουμε πραγματικά αυτή τη διαδικασία κάπου. Στο ανώτατο επίπεδο VUE.JS App.vue , προσθέστε το απόσπασμα παρακάτω.

δημιουργήθηκε () είναι ένα γάντζο κύκνου ζωής που ενεργοποιεί τον κώδικα μόλις δημιουργηθεί το στοιχείο Vue στο φορτίο, ενώ η χρήση του παγκόσμιου $ κατάστημα Η μεταβλητή μας επιτρέπει να έχουμε πρόσβαση στα περιεχόμενα του καταστήματος Vuex και να αποστέλλουμε το getposts δράση από το βήμα 7.

 Δημιουργήθηκε () {
   αυτό. $ store.Dispatch ('getposts')} 

10. Ενημέρωση διαδρομών χαρακτηριστικών

The Vue DevTools extension gives you the power to debug your Vue.js app

Η επέκταση του Vue Devtools σας δίνει τη δύναμη να διορθώσετε την εφαρμογή σας vue.js

Εάν εργάζεστε στο Chrome ή στο Firefox και έχετε το Vue.js devtools επέκταση (Εάν όχι, συνιστώ να κάνετε όπως είναι πολύ χρήσιμο), θα πρέπει τώρα να μπορείτε να δείτε τις φορτωμένες θέσεις WordPress In Κατάσταση βάσης σύμφωνα με το Vuex αυτί.

Επιστροφή στην εφαρμογή, στο /components/posts/posts.vue , το πρότυπο HTML πρέπει να επισημάνει αυτά τα δεδομένα, οπότε ας τσιμπήσουμε μερικές από τις διαδρομές χαρακτηριστικών.

 Διακόπτης 'post.title' στο 'post.title.rendered'
 Διακόπτης 'post.preview' σε 'post.acf.preview'
 Διακόπτης 'Post.Previewimage' στο 'post.acf.header_image_small' 

11. Ενημέρωση V-για βρόχο

Στο στοιχείο Δημοσίευση στοιχείων, υπάρχει μια οδηγία VUE.js κατά τη χρήση που ονομάζεται v-για . Αυτός ο βρόχος μέσω όλων των δημοσιεύσεων και για το καθένα εκτυπώνει μια περίπτωση του Post Component, εμφανίζοντάς τα σε μια λίστα.

Πρέπει να ενημερώσουμε τη διαδρομή που διαβιβάστηκε στην παρούσα οδηγία, καθώς εξακολουθεί να χρησιμοποιεί τα τοπικά daty daty test. Ενημερώστε το V-για οδηγία στο απόσπασμα παρακάτω, προκειμένου να επισημάνετε τις αποθηκευμένες θέσεις μας στο κατάστημα Vuex.

 V-for = "post σε αυτό. $ Store.state.posts" 

12. Κάνετε κάποια νοικοκυριό

Μια λίστα με τις θέσεις WordPress θα πρέπει τώρα να εμφανίζεται. Καθώς δεν χρησιμοποιούμε πλέον τα τοπικά δεδομένα μετά, ας διαγράψουμε SRC / Δεδομένα . Στη συνέχεια, στο στοιχείο Posts, αφαιρέστε το Δημοσιεύσεις: postdata.data Ακίνητα στο τοπικό κατάστημα στοιχείων στοιχείων και στη συνέχεια η εισαγωγή μετάdatata.

13. Fix Post Author

Μπορεί να παρατηρήσετε ότι για κάθε θέση ο συγγραφέας εμφανίζεται ως αριθμός. Αυτό συμβαίνει επειδή το API WordPress επιστρέφει ένα αναγνωριστικό συγγραφέα, αντί για ένα όνομα. Πρέπει να χρησιμοποιήσουμε αυτό το αναγνωριστικό για να αναρωτηθούμε το WordPress για τις πληροφορίες πλήρους συγγραφέα. Ας ξεκινήσουμε δημιουργώντας ένα μέρος για να αποθηκεύσετε αυτό στο κατάστημα Vuex, παράλληλα με τις πληροφορίες μας, στο Κατάστημα / Index.js .

 Κράτος: {
  Συγγραφείς: Null,
  Δημοσιεύσεις: Null} 

14. Δημιουργία δράσης getauthors

Όπως και με τις θέσεις, θα δημιουργήσουμε μια ενέργεια στο /Store/index.js Για να ενεργοποιήσετε ένα αίτημα AJAX για να αναρωτηθείτε το API WordPress. Μόλις ληφθεί επιτυχημένη απάντηση, η υπόσχεση θα επιλύσει και θα ενεργοποιήσει το αποθήκες μετάλλαξη, την οποία θα δημιουργήσουμε στη συνέχεια.

 Getauthors: λειτουργία (πλαίσιο) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / χρήστες)
  .then (λειτουργία (απάντηση) {
  control.commit ('storeauthors',
  απάντηση.Data)
  })
} 

15. Δημιουργία μετάλλαξης αποθεμάτων

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

 StoreAphors (κατάσταση, απάντηση) {
  State.Aesshors = απάντηση} 

16. Trigger getauthors στο φορτίο

Πρέπει να πάρουμε τις πληροφορίες του συγγραφέα από το WordPress μόλις αρχίσει η εφαρμογή να φορτώνει. Ας τροποποιήσουμε το συστατικό του ανώτατου επιπέδου App.vue και πάλι και αποστέλλονται το getauthors δράση στο ίδιο δημιουργήθηκε () Γάντζο κύκνου ζωής ως το getposts δράση.

 Δημιουργήθηκε () {
  Αυτό. $ stores.Dispatch ('getauthors')
   αυτό. $ store.Dispatch ('getposts')} 

17. Δημιουργία μεθόδου getusername

Τώρα είμαστε ερωτώμενοι Wordpress για πληροφορίες συγγραφέα στο φορτίο, το μόνο που πρέπει να κάνουμε είναι να ορίσετε μια μέθοδο στη συνιστώσα των δημοσιεύσεών μας που μας επιτρέπει να περάσουμε ένα αναγνωριστικό συγγραφέα και να πάρετε ένα όνομα σε αντάλλαγμα. Αντιγράψτε το απόσπασμα παρακάτω στις μεθόδους των συνιστωσών θέσεων, κάτω από τα υπάρχοντα getinglingpost μέθοδος.

 GetUsername: Λειτουργία (UserID) {
  VAR USERNAME = 'Άγνωστο'.
  αυτό. $ store.State.
  Συγγραφείς.Filter (λειτουργία (χρήστης) {
  αν (χρήστης.id === userid) {
  username = user.name
  }
  });
  Επιστρέψτε το όνομα χρήστη.
} 

18. Καλέστε τη μέθοδο getusername

Τώρα πρέπει απλά να καλέσουμε getusername . Ακόμα στο στοιχείο Posts, στο πρότυπο, αντικαταστήστε την αναφορά του χαρακτηριστικού του συντάκτη post.Author Έτσι αντικατοπτρίζει το απόσπασμα παρακάτω. Το όνομα του συγγραφέα θα πρέπει τώρα να εμφανίζεται σωστά για κάθε θέση.

: Συγγραφέας = "getusername (post.author)" 

19. Φόρτωση Blog

Καθώς φορτώνουμε τα δεδομένα που χρησιμοποιούν ασύγχρονα δεδομένα, υπάρχει μια στιγμή πριν από την ολοκλήρωση της αίτησης όπου η εφαρμογή είναι κενή. Για να αντιμετωπίσετε αυτό, θα εφαρμόσουμε μια κατάσταση φόρτωσης που είναι ενεργή μέχρι να συμπληρωθεί πλήρως το blog. Στο στοιχείο Posts, επικολλήστε το απόσπασμα κάτω από το άνοιγμα & lt; script & gt; Ετικέτα για την εισαγωγή των εικόνων που θα χρησιμοποιήσουμε.

 Εισαγωγή εικονιδίου από '@ / components / icons'
Εισαγωγή φόρτωσης από './../../..
Περιουσιακά στοιχεία / img / loading.svg '

20. Προσθήκη εικονιδίου στη λίστα εξαρτημάτων

Στη συνέχεια, ακόμα μέσα στα μηνύματα, προσθέστε μια αναφορά στο εικονίδιο στα αντικείμενα εξαρτημάτων. Αυτό καθιστά τη συνιστώσα των μηνυμάτων που γνωρίζουν το πρόσφατα εισαγόμενο στοιχείο εικονιδίων.

 Στοιχεία: {
   εικόνισμα,
   post} 

21. Δημιουργήστε στοιχεία φόρτωσης

Τώρα πρέπει απλώς να προσθέσουμε τα στοιχεία φόρτωσης στο πρότυπο θέσεων, ώστε να εμφανίζεται στη σελίδα. Πρώτον, τυλίξτε το δεύτερο div στο απόσπασμα γύρω από τα δύο divs με το v-αν Οδηγίες για να βεβαιωθείτε ότι δεν εμφανίζονται μηνύματα μέχρι να ολοκληρωθεί η φόρτωση.

Στη συνέχεια, προσθέστε το πρώτο div από το απόσπασμα πάνω από αυτό. Αυτό περιέχει το εικονίδιο φόρτωσης και ένα v-αν Η οδηγία, η οποία σημαίνει ότι θα είναι ορατή μόνο μέχρι το σημείο όπου η εφαρμογή είναι πλήρως φορτωμένη. Μόλις γίνει, η φόρτωση πρέπει τώρα να εφαρμοστεί.

 & lt; div v-If = "αυτό, $ store.state.posts"
class = "u-leign-center" & gt;
   & lt; class icon = "c-load-loading"
   χρήση = "φόρτωση" & gt; / its & gt;
& lt; / div & gt;
& lt; div v-if = "αυτό. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Ενημέρωση μονάδων χαρακτηριστικών μονής μετά

Το μόνο που μένει να κάνει είναι να βεβαιωθείτε ότι οι μονές θέσεις ρυθμίζονται σωστά ώστε να χρησιμοποιούν τα δεδομένα του WordPress στο κατάστημα Vuex. Το πρώτο βήμα είναι να ενημερώσετε τις διαδρομές χαρακτηριστικών στο πρότυπο συνιστωσών μηνυμάτων μέσα στο V-IF = "αυτό.Type === 'single'" div, η οποία χειρίζεται την εμφάνιση μονών μηνυμάτων.

 Διακόπτης 'singlepost.title' στο 'singlepost.title.rendered'
 Διακόπτης 'singlepost.author' στο 'getusername (singlepost.author)'
 Διακόπτης 'singlepost.fullimage' στο 'singlepost.acf.header_image'
 Διακόπτης 'singlepost.Content' στο 'ένα' singlepost. Περιεχόμενο.rendered '

23. Μέθοδος PertingINDPOST

Πρέπει επίσης να αναγνωρίζουμε τα εξαρτήματα θέσεων getinglingpost μέθοδος. Πρέπει να επιστρέψει μια υπόσχεση που αποστέλλει το getposts δράση. Στην παρακολούθηση έπειτα Λειτουργία, θα αναζητήσουμε τις δημοσιεύσεις του Store Vuex για μια καταχώρηση με ένα γυμνοσάλιαγκας που ταιριάζει με το ένα που πέρασε στη διεύθυνση URL. Αν βρεθεί, θα αντιγράψουμε τα δεδομένα στην τοπική κατάσταση του συστατικού μας και να επιλύσουμε την υπόσχεση. Εάν δεν βρεθεί, η υπόσχεση θα απορριφθεί.

 Λειτουργία: Λειτουργία () {
   Επιστρέψτε τη νέα υπόσχεση
   ((Επιλύρωση, απορρίψτε) = & GT; {
  αυτό. $ stores.Dispatch ('getposts')
  .Then (() = & gt; {
  var alentpost = false;
  αυτό. $ store.state.posts.
  Φίλτρο ((POST) = & GT; {
  Αν (post.slug ===
  αυτό. $ dire.params.slug) {
  αυτό.singerpost = post;
  Βιδώνετε = TRUE; }
  });
  Βιδώνετε; Επίλυση (): Απόρριψη ();
  })
  })
} 

24. Δημιουργήθηκαν δημοσιεύσεις Refactor ()

Στη συνέχεια, πρέπει να αναγνωρίσουμε το δημιουργήθηκε () Γάντζος κύκνου κύκνου στο στοιχείο θέσεων. Αν χρειαστεί να προβάλλετε μια μόνο θέση, το άγκιστρο θα πρέπει να καλέσει το getinglingpost Μέθοδος από το προηγούμενο βήμα και εάν η υπόσχεσή της απορριφθεί, στείλτε το χρήστη στη σελίδα που δεν βρέθηκε στη σελίδα 404 '. Αυτό αντιπροσωπεύει τα σενάρια όπου οι χρήστες εισάγουν ανύπαρκτη θέση στη διεύθυνση URL.

 Δημιουργήθηκε () {
  αν (αυτό.Type === 'single') {
  αυτό το. Στη συνέχεια (NULL, () = & GT; {
  Αυτό. $ router.push ({Όνομα: 'PAGENOTFOUND'})
  });
  }
} 

25. Προσθέστε την οδηγία V-αν

Το τελευταίο βήμα είναι να προσθέσετε το απόσπασμα παρακάτω στο στοιχείο Post Component στο πλαίσιο του V-IF = "αυτό.Type === 'single'" div στο πρότυπο. Αυτή η οδηγία σημαίνει ότι η ανάρτηση θα εμφανίζεται μόνο όταν τα τοπικά δεδομένα μετά τη διάθεση του getinglingpost η μέθοδος κατοικείται. Αυτό είναι να σταματήσει η vue από την πρόωρη απόδοση του συστατικού και έτσι να προκαλέσει σφάλματα.

 V-IF = "Μονόβιο" 

26. Δημιουργήστε την εφαρμογή

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

 NPM Run Build 

Αυτό το άρθρο εμφανίστηκε σε εξέταση 268 του σχεδιαστή ιστοσελίδων, το Creative Web Design Magazine - προσφέροντας εκπαιδευτικά υπολογιστές, τάσεις αιχμής και δωρεάν πόρους. Εγγραφείτε στο Web Designer τώρα.

Διαβάστε περισσότερα:

  • 32 καλύτερα δωρεάν θέματα WordPress
  • 10 κορυφαίοι πόροι Wordpress
  • ο Καλύτερες ελεύθερες πλατφόρμες blogging

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σχεδιάσετε ένα λαιμό και τους ώμους

πως να Sep 12, 2025

Όταν μάθετε πώς να σχεδιάσετε ένα λαιμό και τους ώμους, μπορεί συχνά να είναι δύσκολο να δείξουμε τους όγ..


Δημιουργήστε μια φωνητική ελεγχόμενη UI

πως να Sep 12, 2025

Έχουμε δει πολλά νέα API που προστέθηκαν στο διαδίκτυο τα τελευταία χρόνια τα τελευταία χρόνια που έχουν �..


Δέντρα με ακτίνες V

πως να Sep 12, 2025

Προσθέτοντας λεπτομέρειες στη σκηνή σας είναι πάντα ο τρόπος να πάτε ό..


Πώς να ζωγραφίσει ευχάριστες μινιατούρες

πως να Sep 12, 2025

Η προέλευση της μινιατούρας ζωγραφικής εκτείνεται προς τα πίσω στη με�..


Βάλτε ένα πορτρέτο όπως το Van Gogh

πως να Sep 12, 2025

Ολλανδικός post-ιμπρεσιονιστής ζωγράφος Vincent Van Gogh (1853-1890) δημιούργησε πο�..


Τι νέο υπάρχει στο γωνιακό 4;

πως να Sep 12, 2025

Σελίδα 1 από 2: Βήματα 1-10 Βήματα 1-10 ..


Mock up ar graphics με μετά από αποτελέσματα

πως να Sep 12, 2025

Αφού τα αποτελέσματα έχουν κάποια ισχυρά εργαλεία που μπορούμε να χρησιμοποιήσουμε για να μιμηθούν την ..


Δημιουργήστε ένα περιβάλλον παιχνιδιού στο Unreal Engine 4

πως να Sep 12, 2025

Χρησιμοποιώντας το Unreal My Engine 4 το έργο της τελευταίας διακοπής ως παράδ..


Κατηγορίες