ATGRIEZTIES ATPAKAĻ
Nuxt 3 ir populārās hibrīdās Vue struktūras nākamās paaudzes versija, kas ļauj izmantot Vue servera puses renderētu lietojumprogrammu veidošanai. Beta versija tika palaista 2021. gada 12. oktobrī, ieviešot Nuxt Vue 3, jaunu ievada dzinēju, vieglāku paketi un adhook Vite.
Nuxt 3 ir pārstrukturēts un pārstrādāts, lai atbalstītu ESM un TypeScript dabiski. Pašlaik tā ir nestabila, tāpēc vēl nav gatava ražošanai. Pirmo kandidātu ([email protected]) plānots izdot 2022. gada 7. aprīlī.
Atveriet termināli vai atveriet integrēto termināli no Visual Studio Kods un izveidojiet jaunu starteri, izmantojot šādu komandu projekts:
npx nuxi init nuxt3-appAtveriet mapi nuxt3-app:
cd nuxt3-appInstalējiet atkarības:
yarn instalēšanaPalaist izstrādes serveri:
pavediens devIzveidojiet lietojumprogrammu:
pavedienu veidošanaPalaist izveidoto lietojumprogrammu:
pavediena sākumsVue 3 tika ieviestas vairākas jaunas funkcijas, kas ievērojami paātrina un atvieglo lietojumprogrammu izveidi un uzturēšanu. Svarīgākās izmaiņas ir veiktas Global Vue API un notikumu API. Vue 3ieviestas arī jaunas funkcijas, piemēram, provide / inject, kompozīcijas API (aprakstīts tālāk), fragmenti un teleports.
Kompozīcijas API ir iebūvēta Vue 3 funkcija, kas nodrošina API kopumu, kas ļauj izmantot importētās funkcijas, nevis deklarēt opcijas. Tātad galvenās Composition API priekšrocības ir labāka loģikas atkārtota izmantošana, elastīgāka koda organizācija un lieliska TypeScript integrācija. Visas jaunā API daļas var izmantot ārpus programmas Vue sastāvdaļas.
Nuxt 3 nodrošina jaunu direktoriju - kompozītmateriāli/ - kas ļauj automātiski importēt Vue kompozītmateriālu ievadprogrammu.
Kompozitīvs piemērs:
// Tas būs pieejams kā useFoo() (faila nosaukuma camelCase bez paplašinājuma)
eksportēt noklusējuma funkciju () {
return useState('foo', () => 'bar')// Tas būs pieejams kā useFoo() (faila nosaukuma camelCase bez paplašinājuma)
eksportēt noklusējuma funkciju () {
return useState('foo', () => 'bar')
}
}Kompozīta izmantošanas piemērs Vue sastāvdaļa:
<div>{{ foo }}}</div>
</>Kā redzams iepriekš, kompozītmateriāls tiek eksportēts kā useFoo, kā tas ir deklarēts const nosaukumā. Ja nav eksportēta nosaukuma, komponējamais būs pieejams kā faila nosaukuma pascelCase. Tas arī ļauj viegli integrēt automātiski importētos saliktos elementus ar populāro Vue veikala salikto elementu ar nosaukumu Pina.
Nitro ir pilns serveris, kas izmanto Rollup un Node.js darbinieki izstrādes laikā, lai nodrošinātu koda un konteksta izolāciju. Tā ietver arī servera API un servera starpprogrammatūru. Ražošanas režīmā dzinējs izveido lietojumprogrammu un serveri vienā direktorijā - `.output`. Lieta tāda, ka produkcija ir viegla: minificēta un bez jebkādiem mezgls moduļi. Nitro ļauj izvades rezultātus izvietot Node.js, Serverless, Workers, Edge-side renderēšanas vai tikai statiskā veidā.
Nuxt 3 nodrošina iespēju izvietot Azure vai Netlify bez nepieciešamās konfigurācijas, kā arī Firebase vai Cloudflare izvietošana ar minimālu konfigurāciju.
Vite ir nākamās paaudzes frontend rīks, kas ir iebūvēta funkcija, lai Nuxt 3. Šis rīks nodrošina ātrāku izstrādi tīmekļa vietne projekti. Izstrādes vajadzībām serverim Vite ir bagātīgi funkciju uzlabojumi salīdzinājumā ar ES moduļiem un ļoti ātra moduļu nomaiņa (Hot Module Replacement - HMR).
Veidošanas procesā Vite apvieno kodu ar iepriekš konfigurētu Rollup, lai optimizētu statiskos līdzekļus ražošanai.
Nuxt 3 ir nedaudz mainīta faila struktūra. Lielākās izmaiņas tika veiktas `app.vue` - `pages/` direktorija nav obligāta, un, ja tās nav, lietojumprogrammā netiks iekļauts vue maršrutētājs, kas ir noderīgi, ja tiek veidota ielādēšanas lapa vai lietojumprogramma, kurai nav nepieciešama maršrutēšana.
Piemērs app.vue fails:
Sveika, Pasaule!Lai iekļautu maršrutēšanu, lapas un izkārtojumu, ir jāizmanto iebūvētās komponentes, proti, `NuxtPage` un `NuxtLayout`. Piemērs:
<div>
<p> </p>
<p> </p>
<p> </p>
</div>`app.vue` ir galvenā komponente Nuxt lietojumprogramma, tāpēc viss tur pievienotais būs globāls un tiks iekļauts katrā lapā.
Izmaiņas Nuxt direktoriju struktūra ietver `store/` direktoriju aizstāšanu ar `composables/` direktoriju, jo Vue 3ievieš kompozītmateriālus, kas aizstāj veikalus.
Nuxt 3 ievieš Nuxt Bridge - tālākās savietojamības slāni, kas atjaunina Nuxt 2 lietojumprogrammas ar Nuxt 3 funkcijām, ļaujot tām atjaunināties pa daļām. Tas nodrošina piekļuvi tādām funkcijām kā: Nitro dzinējs, kompozīcijas API un jaunā CLI, vienkārši instalējot un aktivizējot tiltu.
Nuxt Bridge ir savietojams ar iepriekšējo versiju, tāpēc vecie spraudņi un moduļi joprojām darbosies, bet migrācija ir vienkārša un iespējama bez visas lietojumprogrammas pārrakstīšanas.
Lai iespējotu Nuxt Bridge, ir jāpārliecinās, ka nedarbojas Dev serveris, pēc tam jānoņem visi paketes bloķēšanas faili un jāinstalē `nuxt-edge`:
- "nuxt": "^2.15.0"
"nuxt-edge": "latest"Pēc tam atkārtoti instalējiet visas atkarības:
dzijas instalēšanaJūsu migrācija, izmantojot Nuxt Bridge, ir pabeigta!
Cits veids ir instalēt Nuxt Bridge kā izstrādes atkarība:
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edgeTad jums ir jāatjaunina `package.json` skripti, lai ņemtu vērā izmaiņas, ko Nitro serveris ievieš veidošanas procesā.
Latvian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Spanish 
Dutch 
Estonian 
Greek 
Portuguese 
Czech 
Lithuanian 
Icelandic