GRĮŽTI ATGAL
"Nuxt 3" yra naujos kartos populiari hibridinė Vue sistema, kuri leidžia naudoti Vue kuriant serverio pusės atvaizduojamas programas. Beta versija buvo pristatyta 2021 m. spalio 12 d., į "Nuxt Vue 3" įtraukiant naują įvadinį variklį, lengvesnį paketą ir "adhook Vite".
"Nuxt 3 buvo pertvarkyta ir parašyta iš naujo, kad palaikytų ESM ir TypeScript gimtąja kalba. Šiuo metu ji yra nestabili, todėl dar nėra tinkama gamybai. Planuojama, kad pirmasis kandidatas ([email protected]) bus išleistas 2022 m. balandžio 7 d.
Atidarykite terminalą arba atidarykite integruotą terminalą iš "Visual Studio Kodas ir naudokite šią komandą, kad sukurtumėte naują starterį projektas:
npx nuxi init nuxt3-appAtidarykite "nuxt3-app" aplanką:
cd nuxt3-appĮdiekite priklausomybes:
yarn diegimasPaleiskite kūrimo serverį:
yarn devSukurkite programą:
jarnų kūrimasPaleiskite sukurtą programą:
verpalų pradžiaVue 3 įdiegta keletas naujų funkcijų, kurios leidžia kur kas greičiau ir paprasčiau kurti ir prižiūrėti programas. Svarbiausi pakeitimai atlikti "Global Vue API ir įvykių API. Vue 3taip pat įdiegtos naujos funkcijos, tokios kaip "provide / inject", kompozicijos API (aprašyta toliau), "Fragments" ir "Teleport".
Sudarymo API yra integruota Vue 3 funkcija, kuri suteikia API rinkinį, leidžiantį naudoti importuotas funkcijas, o ne deklaruoti parinktis. Taigi, pagrindiniai Composition API privalumai yra geresnis logikos pakartotinis naudojimas, lankstesnis kodo organizavimas ir puiki TypeScript integracija. Visos naujosios API dalys gali būti naudojamos už Vue sudedamosios dalys.
"Nuxt 3 pateikia naują katalogą - kompozicinės medžiagos/ - kuri leidžia automatiškai importuoti Vue kompozitus į programą.
Sudėtinis pavyzdys:
// Jis bus prieinamas kaip useFoo() (failo pavadinimo camelCase be plėtinio)
Export default funkcija () {
return useState('foo', () => 'bar')/// Ją bus galima naudoti kaip useFoo() (failo pavadinimo camelCase be plėtinio)
export default function () {
return useState('foo', () => 'bar')
}
}Sudėtinio elemento naudojimo pavyzdys Vue komponentas:
<div>{{ foo }}</div>
</>Kaip matote aukščiau, sudėtinis elementas eksportuojamas kaip useFoo, kaip ir deklaruota const pavadinime. Jei nėra eksportuojamo vardo, sudėtinė bus pasiekiama kaip failo vardo pascelCase. Tai taip pat leidžia lengvai integruoti automatiškai importuojamas sudėtines dalis su populiaria Vue parduotuvės sudėtinėmis dalimis, vadinamomis Pina.
"Nitro" yra pilno paketo serveris, kuris naudoja "Rollup" ir Node.js darbuotojai, dirbantys su kūrimu, kad užtikrintų kodo ir konteksto izoliaciją. Ji taip pat apima serverio API ir serverio tarpinę programinę įrangą. Gamyboje variklis sukuria programą ir serverį viename kataloge - `.output`. Esmė ta, kad išvestis yra lengva: minifikuota ir be jokių mazgas moduliai. "Nitro" leidžia diegti išvestį Node.js, "Serverless", "Workers", "Edge-side rendering" arba tik kaip statinę.
"Nuxt 3 suteikia galimybę diegti Azure arba "Netlify" be jokios konfigūracijos, taip pat "Firebase" arba "Cloudflare" diegimas su minimalia konfigūracija.
"Vite" yra naujos kartos priekinės dalies įrankis, kuris yra integruotas į "Nuxt 3. Šis įrankis leidžia greičiau kurti žiniatinklio svetainė projektai. Kūrimui skirtas serveris "Vite" turi daug funkcijų patobulinimų, palyginti su vietiniais ES moduliais, ir labai greitą "karšto modulio pakeitimo" (HMR) funkciją.
Kūrimo proceso metu "Vite" pateikia kodą su iš anksto sukonfigūruotu "Rollup", kad būtų optimizuoti statiniai ištekliai gamybai.
"Nuxt 3 šiek tiek pakeista failų struktūra. Didžiausi pakeitimai padaryti `app.vue` - `pages/` katalogas yra neprivalomas, ir jei jo nėra, į programą nebus įtrauktas vue maršrutizatorius, o tai naudinga kuriant įkeliamą puslapį arba programą, kuriai nereikia maršrutizavimo.
App.vue failo pavyzdys:
Sveikas, pasauli!Norint įtraukti maršrutizavimą, puslapius ir išdėstymą, reikia naudoti integruotus komponentus, t. y. `NuxtPage` ir `NuxtLayout`. Pavyzdys:
<div>
<p> </p>
<p> </p>
<p> </p>
</div>`app.vue` yra pagrindinis komponentas "Nuxt" programa, todėl viskas, kas ten bus pridėta, bus visuotina ir įtraukta į kiekvieną puslapį.
Pasikeitimai Nuxt katalogų struktūrą reikia pakeisti `store/` į `composables/` katalogą, nes Vue 3pristatomos sudėtinės prekės, kurios pakeičia parduotuves.
"Nuxt 3" pristatomas "Nuxt Bridge" - išankstinio suderinamumo sluoksnis, kuris atnaujina "Nuxt 2" programas "Nuxt 3" funkcijomis ir leidžia jas atnaujinti dalimis. Jis suteikia prieigą prie tokių funkcijų kaip: "Nitro" varikliu, kompozicijos API ir nauja CLI, tiesiog įdiegiant ir aktyvuojant tiltą.
"Nuxt Bridge" yra atgalinio suderinamumo, todėl senieji papildiniai ir moduliai vis dar veiks, o migruoti lengva ir įmanoma neperrašant visos programos.
Norėdami įjungti "Nuxt Bridge", turite įsitikinti, kad dev serveris neveikia, tada pašalinti visus paketų užrakto failus ir įdiegti `nuxt-edge`:
- "nuxt": "^2.15.0"
"nuxt-edge": "latest"Po to iš naujo įdiekite visas priklausomybes:
verpalų diegimasJūsų migracija naudojant "Nuxt Bridge" baigta!
Kitas būdas - įdiegti Nuxt "Bridge" kaip kūrimo priklausomybė:
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edgeTada turite atnaujinti `package.json` scenarijus, kad būtų atsižvelgta į "Nitro" serverio pakeitimus kūrimo procese.
Lithuanian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Spanish 
Dutch 
Estonian 
Greek 
Portuguese 
Czech 
Latvian 
Icelandic