window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versjon: 2, } ;(function () { var w = vindu if (w.LeadBooster) { console.warn('LeadBooster finnes allerede') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Nuxt 3 - et populært hybrid Vue-rammeverk - The Codest
The Codest
  • Om oss
  • Tjenester
    • Programvareutvikling
      • Frontend-utvikling
      • Backend-utvikling
    • Staff Augmentation
      • Frontend-utviklere
      • Backend-utviklere
      • Dataingeniører
      • Ingeniører i skyen
      • QA-ingeniører
      • Annet
    • Det rådgivende
      • Revisjon og rådgivning
  • Industrier
    • Fintech og bankvirksomhet
    • E-commerce
    • Adtech
    • Helseteknologi
    • Produksjon
    • Logistikk
    • Bilindustrien
    • IOT
  • Verdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leveransesjef
  • Vårt team
  • Casestudier
  • Vet hvordan
    • Blogg
    • Møter
    • Webinarer
    • Ressurser
Karriere Ta kontakt med oss
  • Om oss
  • Tjenester
    • Programvareutvikling
      • Frontend-utvikling
      • Backend-utvikling
    • Staff Augmentation
      • Frontend-utviklere
      • Backend-utviklere
      • Dataingeniører
      • Ingeniører i skyen
      • QA-ingeniører
      • Annet
    • Det rådgivende
      • Revisjon og rådgivning
  • Verdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leveransesjef
  • Vårt team
  • Casestudier
  • Vet hvordan
    • Blogg
    • Møter
    • Webinarer
    • Ressurser
Karriere Ta kontakt med oss
Pil tilbake GÅ TILBAKE
2022-05-25
Programvareutvikling

Nuxt 3 - et populært hybrid Vue-rammeverk

The Codest

Filip Tobiasz

Vue.js-utvikler

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.

Nuxt-tabellen

kilde

Starte et nytt prosjekt

Å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-app

Installer avhengighetene:

yarn-installasjon

Kjør utviklingsserveren:

yarn dev

Bygg applikasjonen:

garnbygging

Kjør den innebygde applikasjonen:

garnstart

Hva er nytt?

Vue 3 støtte

Vue 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.

Sammensetning API

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.

Eksempel på API-struktur

kilde

Nitromotor

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

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.

Ny filstruktur

eksempel på filstruktur

kilde

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>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</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.

Migrering fra Vue 2 til Vue 3 ved hjelp av Nuxt Bridge

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:

garninstallasjon

Migreringen 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-edge

Deretter må du oppdatere skriptene i `package.json` for å ta hensyn til endringer som Nitro-serveren gjør i byggeprosessen.

samarbeidsbanner

Relaterte artikler

Programvareutvikling

Forbedring av Vue.js-appen. Noen praktiske tips

Vue er et raskt voksende progressivt rammeverk for å bygge brukergrensesnitt. Det ble det JavaScript-rammeverket med flest stjerner på GitHub og det mest stjernespekkede prosjektet i 2016...

The Codest
Dominik Grzedzielski Senior Software Engineer
E-commerce

Dilemmaer knyttet til cybersikkerhet: Datalekkasjer

Førjulsrushet er i full gang. På jakt etter gaver til sine kjære er folk stadig mer villige til å "storme" nettbutikkene

The Codest
Jakub Jakubowicz CTO og medgrunnlegger

Abonner på vår kunnskapsbase og hold deg oppdatert på ekspertisen fra IT-sektoren.

    Om oss

    The Codest - Internasjonalt programvareutviklingsselskap med teknologisentre i Polen.

    Storbritannia - Hovedkvarter

    • Kontor 303B, 182-184 High Street North E6 2JA
      London, England

    Polen - Lokale teknologisentre

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Kraków
    • Brain Embassy, Konstruktorska
      11, 02-673 Warszawa, Polen

      The Codest

    • Hjem
    • Om oss
    • Tjenester
    • Casestudier
    • Vet hvordan
    • Karriere
    • Ordbok

      Tjenester

    • Det rådgivende
    • Programvareutvikling
    • Backend-utvikling
    • Frontend-utvikling
    • Staff Augmentation
    • Backend-utviklere
    • Ingeniører i skyen
    • Dataingeniører
    • Annet
    • QA-ingeniører

      Ressurser

    • Fakta og myter om samarbeid med en ekstern programvareutviklingspartner
    • Fra USA til Europa: Hvorfor velger amerikanske oppstartsbedrifter å flytte til Europa?
    • Sammenligning av Tech Offshore Development Hubs: Tech Offshore Europa (Polen), ASEAN (Filippinene), Eurasia (Tyrkia)
    • Hva er de største utfordringene for CTO-er og CIO-er?
    • The Codest
    • The Codest
    • The Codest
    • Retningslinjer for personver
    • Vilkår for bruk av nettstedet

    Opphavsrett © 2025 av The Codest. Alle rettigheter forbeholdt.

    nb_NONorwegian
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek nb_NONorwegian