PALAA TAAKSE
Nuxt 3 on suositun Vue-hybridikehyksen seuraava sukupolvi, jonka avulla voimme käyttää Vue:tä palvelinpuolen renderöityjen sovellusten rakentamiseen. Beta-versio julkaistiin 12. lokakuuta 2021, ja se tuo Nuxt Vue 3:een uuden intro-moottorin, kevyemmän paketin ja adhook Viten.
Nuxt 3 on uudelleenarkkitehtuuroitu ja kirjoitettu uudelleen tukemaan ESM:ää ja TypeScript:tä natiivisti. Se on tällä hetkellä epävakaa, joten se ei ole vielä tuotantokelpoinen. Ensimmäinen ehdokas ([email protected]) on tarkoitus julkaista 7. huhtikuuta 2022.
Avaa terminaali tai avaa integroitu terminaali Visual Studiosta. Koodi ja luo uusi aloittaja seuraavalla komennolla projekti:
npx nuxi init nuxt3-appAvaa nuxt3-app-kansio:
cd nuxt3-sovellusAsenna riippuvuudet:
yarn installKäynnistä kehityspalvelin:
yarn devRakenna sovellus:
lankaa rakentaaSuorita rakennettu sovellus:
lankojen aloitusVue 3 tuli useita uusia ominaisuuksia, jotka tekevät sovellusten rakentamisesta ja ylläpidosta paljon nopeampaa ja helpompaa. Tärkeimmät muutokset koskevat Global Vue API:ta ja Events API:ta. Vue 3esittelee myös uusia ominaisuuksia, kuten provide / inject, koostumus API (kuvattu alla), Fragments ja Teleport.
Composition API on sisäänrakennettu Vue 3 -ominaisuus, joka tarjoaa joukon API-rajapintoja, jotka mahdollistavat tuotujen funktioiden käytön vaihtoehtojen ilmoittamisen sijasta. Composition API:n tärkeimmät edut ovat siis logiikan parempi uudelleenkäyttö, joustavampi koodin organisointi ja erinomainen TypeScript-integraatio. Uuden API:n kaikkia osia voidaan käyttää myös muiden kuin Vue komponentit.
Nuxt 3 tarjoaa uuden hakemiston - composables/ - jonka avulla voidaan automaattisesti tuoda Vue composables intro sovellus.
Esimerkki sommiteltavissa:
// Se on käytettävissä useFoo() -toimintona (tiedostonimen camelCase-kirjain ilman laajennusta).
export default function () {
return useState('foo', () => 'bar')// Se on käytettävissä nimellä useFoo() (tiedostonimen camelCase-kirjain ilman laajennusta).
export default function () {
return useState('foo', () => 'bar')
}
}Esimerkki sommiteltavan käyttämisestä Vue komponentti:
<div>{{ foo }}</div>
</>Kuten yllä näkyy, composable viedään nimellä useFoo, aivan kuten const-nimessä on ilmoitettu. Jos vientinimeä ei ole, composable on käytettävissä tiedostonimen pascelCase-alkuisena. Sen avulla voit myös helposti integroida automaattisesti tuodut composableja suositun Vue Store composable nimellä Pina.
Nitro on full-stack-palvelin, joka käyttää Rollupia ja Node.js kehitystyöntekijät palvelemaan koodin ja kontekstin eristämistä. Se sisältää myös palvelimen API:n ja palvelimen väliohjelmiston. Tuotannossa moottori rakentaa sovelluksen ja palvelimen yhteen hakemistoon - `.output`. Asia on niin, että tuotos on kevyt: minified ja ilman mitään solmu moduulit. Nitron avulla voit ottaa tuotoksen käyttöön Node.js:ssä, Serverless- ja Workers-palvelimissa, Edge-puolen renderöinnissä tai puhtaasti staattisena.
Nuxt 3 tarjoaa mahdollisuuden ottaa käyttöön Azuressa tai Netlifyssä ilman määrityksiä sekä Firebase- tai Cloudflare-käyttöönoton minimaalisella määrityksellä.
Vite on seuraavan sukupolven frontend-työkalu, joka on sisäänrakennettuna ominaisuutena osoitteessa Nuxt 3. Tämä työkalu nopeuttaa web-projektien kehittämistä. Vite-palvelimessa on runsaasti lisäominaisuuksia natiiveihin ES-moduuleihin verrattuna ja erittäin nopea Hot Module Replacement (HMR).
Rakennusprosessin aikana Vite niputtaa koodin valmiiksi konfiguroidun Rollupin kanssa optimoidakseen staattiset resurssit tuotantoa varten.
Nuxt 3 ottaa käyttöön hieman muuttuneen tiedostorakenteen. Suurimmat muutokset tehtiin `app.vue` - `pages/`-hakemisto on valinnainen ja jos sitä ei ole, sovellus ei sisällä vue-reititintä, mikä on hyödyllistä luotaessa lataussivua tai sovellusta, joka ei tarvitse reititystä.
Esimerkki app.vue-tiedostosta:
Hei maailma!Jos haluat sisällyttää reitityksen, sivut ja ulkoasun, sinun on käytettävä sisäänrakennettuja komponentteja, nimittäin `NuxtPage` ja `NuxtLayout`. Esimerkki:
<div>
<p> </p>
<p> </p>
<p> </p>
</div>`app.vue` on pääkomponentti, joka on osa Nuxt-sovellus, joten kaikki sinne lisätty on globaalia ja sisältyy jokaiseen sivuun.
Muutos Nuxt hakemistorakenne edellyttää, että hakemisto `store/` korvataan hakemistolla `composables/`, koska Vue 3otetaan käyttöön composables, joka korvaa myymälät.
Nuxt 3 esittelee Nuxt Bridgen - eteenpäin yhteensopivuuskerroksen, joka päivittää Nuxt 2 -sovellukset Nuxt 3:n ominaisuuksilla, jolloin se voi päivittää itsensä pala palalta. Se tarjoaa pääsyn seuraavanlaisiin ominaisuuksiin: Nitro-moottori, sommittelu-API ja uusi CLI yksinkertaisesti asentamalla ja aktivoimalla silta.
Nuxt Bridge on taaksepäin yhteensopiva, joten vanhat lisäosat ja moduulit toimivat edelleen, ja siirtyminen on helppoa ja mahdollista ilman koko sovelluksen uudelleenkirjoittamista.
Jotta voit ottaa Nuxt Bridgen käyttöön, sinun on varmistettava, että dev-palvelin ei ole käynnissä, poistettava kaikki pakettien lukitustiedostot ja asennettava `nuxt-edge`:
- "nuxt": "^2.15.0"
"nuxt-edge": "latest"Asenna sen jälkeen kaikki riippuvuudet uudelleen:
langan asennusSiirtyminen Nuxt Bridgen avulla on valmis!
Toinen tapa on asentaa Nuxt Bridge kehitysriippuvuutena:
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edgeSitten sinun on päivitettävä skriptejä `package.json`-tiedostossa, jotta voit ottaa huomioon muutokset, joita Nitro-palvelin tuo rakennusprosessiin.
Finnish 
English 
German 
Swedish 
Danish 
Norwegian 
French 
Polish 
Arabic 
Italian 
Japanese 
Korean 
Spanish 
Dutch