TAGASI
Nuxt 3 on populaarse hübriidraamistiku Vue järgmine põlvkond, mis võimaldab kasutada Vue-d serveripoolsete renderdatud rakenduste loomiseks. Beetaversioon käivitati 12. oktoobril 2021, tuues Nuxt Vue 3, uue sissejuhatava mootori, kergema kimbu ja adhook Vite.
Nuxt 3 on ümber arhitekteeritud ja ümber kirjutatud, et toetada ESMi ja TypeScript-d algupäraselt. Praegu on see ebastabiilne, mistõttu ei ole see veel tootmisvalmis. Esimene kandidaat ([email protected]) on kavas välja anda 7. aprillil 2022.
Avage terminal või avage Visual Studio integreeritud terminal Kood ja kasutage uue starteri loomiseks järgmist käsku projekt:
npx nuxi init nuxt3-appAvage nuxt3-app kaust:
cd nuxt3-appPaigaldage sõltuvused:
lõnga paigaldamineKäivitage arendusserver:
lõnga devEhitage rakendus:
lõnga ehitamineKäivitage ehitatud rakendus:
lõnga algusVue 3 tuli mitu uut funktsiooni, mis muudavad rakenduste koostamise ja hooldamise palju kiiremaks ja lihtsamaks. Kõige olulisemad muudatused on tehtud Global Vue API-s ja Events API-s. Vue 3tutvustab ka uusi funktsioone, nagu provide / inject, kompositsiooni API (kirjeldatud allpool), fragmendid ja Teleport.
Kompositsiooni API on sisseehitatud Vue 3 funktsioon, mis pakub APIde kogumit, mis võimaldab kasutada imporditud funktsioone, selle asemel et deklareerida valikuid. Seega on Composition API peamised eelised parem loogika taaskasutamine, paindlikum koodikorraldus ja suurepärane TypeScript-integratsioon. Kõiki uue API osi saab kasutada väljaspool Vue komponendid.
Nuxt 3 pakub uut kataloogi - komposiitmaterjalid/ - mis võimaldab automaatselt importida Vue komposiitmaterjali intro taotluse.
Näide koostatav:
// See on saadaval kui useFoo() (camelCase failinimi ilma laiendita)
eksport vaikimisi funktsioon () {
return useState('foo', () => 'bar')// See on saadaval kui useFoo() (failinime camelCase ilma laiendita).
export default function () {
return useState('foo', () => 'bar')
}
}Näide kompositsioonilise kasutamise kohta Vue komponent:
<div>{{ foo }}</div>
</>Nagu ülalpool näha, on kompositsiooniline eksporditud useFoo, nagu on deklareeritud const-nimega. Kui ekspordinime ei ole, on kompositsiooniline kättesaadav kui failinime pascelCase. Samuti võimaldab see hõlpsasti integreerida automaatselt imporditud kompositsioonilisi koos populaarse Vue Store kompositsioonilise nimega Pina.
Nitro on täismahus server, mis kasutab Rollup ja Node.js arendustöötajad, et teenida koodi ja konteksti isoleerimist. See sisaldab ka serveri API-d ja serveri vahendusprogrammi. Tootmises ehitab mootor rakenduse ja serveri ühte kataloogi - `.output`. Asi on selles, et väljund on kergekaaluline: minifitseeritud ja ilma igasuguse sõlme moodulid. Nitro võimaldab teil kasutada väljundit Node.js, Serverless, Workers, Edge-side renderdamine või puhtalt staatiline.
Nuxt 3 pakub võimalust juurutada Azure'i või Netlify'i ilma seadistamiseta, koos Firebase'i või Cloudflare'i juurutamisega minimaalse seadistamisega.
Vite on järgmise põlvkonna frontend-vahend, mis on sisseehitatud funktsiooniks Nuxt 3. See tööriist pakub veebiprojektide kiiremat arendamist. Arendamiseks on server Vite'il rikkalikud funktsioonide täiendused võrreldes originaalsete ES-moodulitega ja väga kiire Hot Module Replacement (HMR).
Ehitusprotsessis komplekteerib Vite koodi eelkonfigureeritud Rollupiga, et optimeerida staatilisi varasid tootmiseks.
Nuxt 3 tutvustab veidi muudetud failistruktuuri. Suurimad muudatused tehti failis `app.vue` - kataloog `pages/` on valikuline ja kui seda ei ole, ei sisalda rakendus vue-routerit, mis on kasulik laadimislehe või rakenduse loomisel, mis ei vaja marsruutimist.
Näide app.vue failist:
Tere maailm!Marsruudi, lehekülgede ja kujunduse lisamiseks peate kasutama sisseehitatud komponente, nimelt `NuxtPage` ja `NuxtLayout`. Näide:
<div>
<p> </p>
<p> </p>
<p> </p>
</div>`app.vue` on põhikomponendiks Nuxt rakendus, nii et kõik, mis sinna lisatakse, on globaalne ja lisatakse igale lehele.
Muutus Nuxt kataloogistruktuur hõlmab kataloogi `store/` asendamist kataloogiga `composables/`, kuna Vue 3võtab kasutusele komposiitmaterjalid, mis asendavad kauplused.
Nuxt 3 tutvustab Nuxt Bridge'i - edasiühilduvuskihti, mis uuendab Nuxt 2 rakendusi Nuxt 3 funktsioonidega, võimaldades end tükkhaaval uuendada. See annab juurdepääsu sellistele funktsioonidele nagu: Nitro mootor, kompositsiooni API ja uus CLI, lihtsalt paigaldades ja aktiveerides silla.
Nuxt Bridge on tagasiulatuvalt ühilduv, nii et vanad pistikprogrammid ja moodulid toimivad endiselt, samas kui migreerimine on lihtne ja võimalik ilma kogu rakendust ümber kirjutamata.
Nuxt Bridge'i lubamiseks peate veenduma, et dev-server ei tööta, seejärel eemaldage kõik pakettide lukustusfailid ja installige `nuxt-edge`:
- "nuxt": "^2.15.0"
"nuxt-edge": "latest"Pärast seda paigaldage uuesti kõik sõltuvused:
lõnga paigaldamineTeie migratsioon Nuxt Bridge'i abil on tehtud!
Teine võimalus on paigaldada Nuxt Bridge kui arendussõltuvus:
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edgeSeejärel peate uuendama skripte failis `package.json`, et võtta arvesse muudatusi, mida Nitro server toob ehitamisprotsessi.
Estonian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Korean 
Spanish 
Dutch 
Greek