GO BACK
Το Nuxt 3 είναι η επόμενη γενιά του δημοφιλούς υβριδικού πλαισίου Vue, το οποίο μας επιτρέπει να χρησιμοποιούμε το Vue για την κατασκευή εφαρμογών με απόδοση από την πλευρά του διακομιστή. Η έκδοση Beta κυκλοφόρησε στις 12 Οκτωβρίου 2021, φέρνοντας στο Nuxt Vue 3, μια νέα μηχανή εισαγωγής, ένα ελαφρύτερο πακέτο και το adhook Vite.
Nuxt 3 έχει επανασχεδιαστεί και ξαναγραφτεί ώστε να υποστηρίζει εγγενώς ESM και TypeScript. Προς το παρόν είναι ασταθές, γεγονός που το καθιστά ακόμα μη έτοιμο για παραγωγή. Ο πρώτος υποψήφιος ([email protected]) προγραμματίζεται να κυκλοφορήσει στις 7 Απριλίου 2022.
Ανοίξτε ένα τερματικό ή ένα ενσωματωμένο τερματικό από το Visual Studio Κωδικός και χρησιμοποιήστε την ακόλουθη εντολή για να δημιουργήσετε έναν νέο εκκινητή έργο:
npx nuxi init nuxt3-appΑνοίξτε το φάκελο nuxt3-app:
cd nuxt3-appΕγκαταστήστε τις εξαρτήσεις:
yarn installΕκτελέστε τον διακομιστή ανάπτυξης:
yarn devΚατασκευάστε την εφαρμογή:
κατασκευή νήματοςΕκτελέστε την ενσωματωμένη εφαρμογή:
έναρξη νήματοςVue 3 ήρθε με πολλά νέα χαρακτηριστικά που κάνουν την κατασκευή και τη συντήρηση εφαρμογών πολύ πιο γρήγορη και εύκολη. Οι σημαντικότερες αλλαγές έγιναν στο API Global Vue και στο API Events. Vue 3εισάγει επίσης νέα χαρακτηριστικά όπως το provide / inject, το API σύνθεσης (περιγράφεται παρακάτω), τα Fragments και το Teleport.
Το API σύνθεσης είναι ένα ενσωματωμένο χαρακτηριστικό Vue 3, το οποίο παρέχει ένα σύνολο API, το οποίο επιτρέπει τη χρήση εισαγόμενων συναρτήσεων αντί της δήλωσης επιλογών. Έτσι, τα κύρια πλεονεκτήματα του Composition API είναι η καλύτερη επαναχρησιμοποίηση της λογικής, η πιο ευέλικτη οργάνωση του κώδικα και η μεγάλη ενσωμάτωση TypeScript. Όλα τα μέρη του νέου API μπορούν να χρησιμοποιηθούν εκτός του Vue εξαρτήματα.
Nuxt 3 παρέχει ένα νέο κατάλογο - composables/ - που επιτρέπει την αυτόματη εισαγωγή συνθετικών Vue intro application.
Παράδειγμα συνθέσιμο:
// Θα είναι διαθέσιμο ως useFoo() (camelCase του ονόματος αρχείου χωρίς επέκταση)
export default function () {
return useState('foo', () => 'bar')// Θα είναι διαθέσιμη ως useFoo() (camelCase του ονόματος αρχείου χωρίς επέκταση)
export default function () {
return useState('foo', () => 'bar')
}
}Παράδειγμα χρήσης ενός σύνθετου σε ένα Vue συστατικό:
<div>{{ foo }}</div>
</>Όπως μπορείτε να δείτε παραπάνω, ένα composable εξάγεται ως useFoo, όπως ακριβώς δηλώνεται στο όνομα const. Αν δεν υπάρχει όνομα εξαγωγής, το composable θα είναι προσβάσιμο ως pascelCase του ονόματος του αρχείου. Σας επιτρέπει επίσης να ενσωματώσετε εύκολα τα αυτόματα εισαγόμενα composables με ένα δημοφιλές composable του Vue Store που ονομάζεται Pina.
Το Nitro είναι ένας διακομιστής πλήρους στοίβας που χρησιμοποιεί Rollup και Node.js εργάτες κατά την ανάπτυξη για να εξυπηρετούν την απομόνωση κώδικα και περιβάλλοντος. Περιλαμβάνει επίσης ένα API διακομιστή και ένα ενδιάμεσο λογισμικό διακομιστή. Στην παραγωγή, η μηχανή κατασκευάζει την εφαρμογή και τον διακομιστή σε έναν κατάλογο - `.output`. Το θέμα είναι ότι η έξοδος είναι ελαφριά: ελαχιστοποιημένη και χωρίς καμία κόμβος ενότητες. Το Nitro σας επιτρέπει να αναπτύξετε την έξοδο σε Node.js, Serverless, Workers, Edge-side rendering ή ως αμιγώς στατική.
Nuxt 3 παρέχει τη δυνατότητα ανάπτυξης σε Azure ή Netlify χωρίς να απαιτείται καμία διαμόρφωση, καθώς και ανάπτυξη σε Firebase ή Cloudflare με ελάχιστη διαμόρφωση.
Το Vite είναι ένα frontend tooling επόμενης γενιάς, το οποίο αποτελεί ενσωματωμένο χαρακτηριστικό για Nuxt 3. Αυτό το εργαλείο παρέχει ταχύτερη εμπειρία ανάπτυξης για έργα ιστού. Για την ανάπτυξη, ο διακομιστής Vite διαθέτει πλούσιες βελτιώσεις χαρακτηριστικών σε σχέση με τις εγγενείς ενότητες ES και μια πολύ γρήγορη αντικατάσταση ενότητας Hot Module Replacement (HMR).
Κατά τη διαδικασία δημιουργίας, το Vite συνδυάζει τον κώδικα με προκαθορισμένο Rollup για τη βελτιστοποίηση των στατικών στοιχείων ενεργητικού για την παραγωγή.
Nuxt 3 εισάγει μια ελαφρώς αλλαγμένη δομή αρχείων. Οι μεγαλύτερες αλλαγές έγιναν στο `app.vue` - ο κατάλογος `pages/` είναι προαιρετικός και αν δεν υπάρχει, η εφαρμογή δεν θα περιλαμβάνει έναν vue-router, κάτι που είναι χρήσιμο όταν δημιουργείτε μια σελίδα φόρτωσης ή μια εφαρμογή που δεν χρειάζεται δρομολόγηση.
Παράδειγμα αρχείου app.vue:
Γεια σας κόσμε!Για να συμπεριλάβετε τη δρομολόγηση, τις σελίδες και τη διάταξη, πρέπει να χρησιμοποιήσετε ενσωματωμένα στοιχεία, δηλαδή τα `NuxtPage` και `NuxtLayout`. Παράδειγμα:
<div>
<p> </p>
<p> </p>
<p> </p>
</div>Το `app.vue` είναι το κύριο συστατικό του Εφαρμογή Nuxt, οπότε ό,τι προστίθεται εκεί θα είναι παγκόσμιο και θα περιλαμβάνεται σε κάθε σελίδα.
Η αλλαγή στην Nuxt δομή καταλόγου περιλαμβάνει την αντικατάσταση του καταλόγου `store/` με τον κατάλογο `composables/`, δεδομένου ότι Vue 3εισάγει τα σύνθετα που αντικαθιστούν τα καταστήματα.
Το Nuxt 3 εισάγει το Nuxt Bridge - ένα επίπεδο συμβατότητας προς τα εμπρός, το οποίο αναβαθμίζει τις εφαρμογές Nuxt 2 με τα χαρακτηριστικά του Nuxt 3, επιτρέποντας την αναβάθμισή του κομμάτι-κομμάτι. Παρέχει πρόσβαση σε χαρακτηριστικά όπως: Nitro engine, composition API και νέο CLI, με απλή εγκατάσταση και ενεργοποίηση της γέφυρας.
Το Nuxt Bridge είναι συμβατό προς τα πίσω, έτσι ώστε τα παλαιότερα plugins και modules να εξακολουθούν να λειτουργούν, ενώ η μετάβαση είναι εύκολη και δυνατή χωρίς να χρειαστεί να ξαναγράψετε ολόκληρη την εφαρμογή.
Για να ενεργοποιήσετε το Nuxt Bridge, πρέπει να βεβαιωθείτε ότι ο διακομιστής dev δεν εκτελείται, στη συνέχεια να αφαιρέσετε όλα τα αρχεία κλειδώματος πακέτων και να εγκαταστήσετε το `nuxt-edge`:
- "nuxt": "^2.15.0"
"nuxt-edge": "latest"Μετά από αυτό, επανεγκαταστήστε όλες τις εξαρτήσεις:
εγκατάσταση νήματοςΗ μετάβασή σας με τη χρήση του Nuxt Bridge έχει ολοκληρωθεί!
Ένας άλλος τρόπος είναι να εγκαταστήσετε Nuxt Γέφυρα ως εξάρτηση ανάπτυξης:
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edgeΣτη συνέχεια, πρέπει να ενημερώσετε τα σενάρια στο αρχείο `package.json` για να λάβετε υπόψη τις αλλαγές που φέρνει ο διακομιστής Nitro στη διαδικασία κατασκευής.
Greek 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Korean 
Spanish 
Dutch 
Estonian