GÅ TILBAKE
Nuxt 3 er neste generasjon av det populære hybride Vue-rammeverket, som lar oss bruke Vue til å bygge gjengitte applikasjoner på serversiden. Betaversjonen ble lansert 12. oktober 2021, og bringer inn Nuxt Vue 3, en ny introduksjonsmotor, en lettere pakke og adhook Vite.
Nuxt 3 har blitt omarbeidet og omskrevet for å støtte ESM og TypeScript. Den er for øyeblikket ustabil, noe som gjør at den ennå ikke er produksjonsklar. Den første kandidaten ([email protected]) er planlagt utgitt 7. april 2022.
Åpne en terminal eller åpne en integrert terminal fra Visual Studio Kode og bruk følgende kommando for å opprette en ny startpakke prosjekt:
npx nuxi init nuxt3-appÅpne nuxt3-app-mappen:
cd nuxt3-appInstaller avhengighetene:
yarn-installasjonKjør utviklingsserveren:
yarn devBygg applikasjonen:
garnbyggingKjør den innebygde applikasjonen:
garnstartVue 3 kom med flere nye funksjoner som gjør det mye raskere og enklere å bygge og vedlikeholde applikasjoner. De viktigste endringene er gjort i Global Vue API og Events API. Vue 3introduserer også nye funksjoner som provide/inject, Composition API (beskrevet nedenfor), Fragments og Teleport.
Composition API er en innebygd funksjon i Vue 3, som tilbyr et sett med API-er som gjør det mulig å bruke importerte funksjoner i stedet for å deklarere alternativer. De viktigste fordelene med Composition API er bedre gjenbruk av logikk, mer fleksibel kodeorganisering og god integrasjon med TypeScript. Alle deler av det nye API-et kan brukes utenfor Vue komponenter.
Nuxt 3 gir en ny katalog - composables/ - som gjør det mulig å automatisk importere Vue composables intro-applikasjon.
Eksempel på komponerbar:
// Den vil være tilgjengelig som useFoo() (camelCase av filnavn uten utvidelse)
export default function () {
return useState('foo', () => 'bar')// Den vil være tilgjengelig som useFoo() (camelCase av filnavn uten filtype)
export default function () {
return useState('foo', () => 'bar')
}
}Eksempel på bruk av en composable i en Vue komponent:
<div>{{ foo }}</div>
</>Som du kan se ovenfor, eksporteres en composable som useFoo, akkurat slik den er deklarert i const-navnet. Hvis det ikke finnes noe eksportnavn, vil den komponerbare være tilgjengelig som pascelCase i filnavnet. Det gjør det også enkelt å integrere automatisk importerte composables med en populær Vue Store composable kalt Pina.
Nitro er en fullstack-server som bruker Rollup og Node.js arbeidere under utvikling for å isolere kode og kontekst. Den inkluderer også et server-API og server-mellommaskinvare. I produksjon bygger motoren applikasjonen og serveren i én katalog - `.output`. Saken er at output er lett: minifisert og uten noen node moduler. Nitro lar deg distribuere utdataene på Node.js, Serverless, Workers, Edge-side-rendering eller som rent statisk.
Nuxt 3 gir mulighet til å distribuere på Azure eller Netlify uten konfigurasjon, sammen med en Firebase- eller Cloudflare-distribusjon med minimal konfigurasjon.
Vite er neste generasjons frontend-verktøy, som er en innebygd funksjon for Nuxt 3. Dette verktøyet gir en raskere utviklingsopplevelse for webprosjekter. Serveren Vite har mange flere funksjoner enn de opprinnelige ES-modulene og en svært rask Hot Module Replacement (HMR).
I byggeprosessen pakker Vite kode med forhåndskonfigurert Rollup for å optimalisere statiske ressurser for produksjon.
Nuxt 3 introduserer en litt endret filstruktur. De største endringene ble gjort i `app.vue` - `pages/`-katalogen er valgfri, og hvis den ikke er til stede, vil ikke applikasjonen inneholde en vue-ruter, noe som er nyttig når du oppretter en lasteside eller en applikasjon som ikke trenger ruting.
Eksempel på app.vue-fil:
Hallo verden!For å inkludere ruting, sider og layout må du bruke de innebygde komponentene `NuxtPage` og `NuxtLayout`. Et eksempel:
<div>
<p> </p>
<p> </p>
<p> </p>
</div>`app.vue` er hovedkomponenten i Nuxt-applikasjonslik at alt som legges til der, blir globalt og inkludert på alle sider.
Endringen i Nuxt katalogstruktur innebærer å erstatte `store/` med katalogen `composables/`, siden Vue 3introduserer composables som erstatter butikker.
Nuxt 3 introduserer Nuxt Bridge - et lag med fremoverkompatibilitet som oppgraderer Nuxt 2-programmer med Nuxt 3-funksjoner, slik at de kan oppgradere seg selv bit for bit. Det gir tilgang til funksjoner som f.eks: Nitro-motor, API for komposisjon og ny CLI, ved ganske enkelt å installere og aktivere broen.
Nuxt Bridge er bakoverkompatibel, slik at eldre plugins og moduler fortsatt vil fungere, samtidig som det er enkelt og mulig å migrere uten å skrive om hele applikasjonen.
For å aktivere Nuxt Bridge må du sørge for at utviklingsserveren ikke kjører, deretter fjerne alle pakkelåsefiler og installere `nuxt-edge`:
- "nuxt": "^2.15.0"
"nuxt-edge": "latest"Etter det må du installere alle avhengigheter på nytt:
garninstallasjonMigreringen ved hjelp av Nuxt Bridge er ferdig!
En annen måte er å installere Nuxt Bridge som en utviklingsavhengighet:
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edgeDeretter må du oppdatere skriptene i `package.json` for å ta hensyn til endringer som Nitro-serveren gjør i byggeprosessen.
Norwegian 
English 
German 
Swedish 
Danish 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Korean 
Spanish 
Dutch 
Estonian 
Greek