Hvorfor konvertere ASTRO til VUE?
Astro og Vue er separate renderingsmodeller - Astro forhåndsrendrer til HTML mens .vue-komponenter baserer seg på Vues kjøretidsreaktivitet. Astro støtter til og med Vue direkte, så folk bygger vanligvis inn Vue i stedet for å konvertere bort fra Astro.
Hvordan konvertere ASTRO til VUE
Bruk Vue inne i Astro FREE
Kjør npx astro add vue for å legge til @astrojs/vue, importer og render deretter .vue-komponenter inne i dine .astro-filer, og hydrer dem med client:*-direktiver.
Manuell omskriving til en .vue SFC FREE
Flytt .astro-markupen inn i en <template>-blokk og kodeblokk-logikken inn i <script setup>, og konverter props, slots og uttrykk til Vue-ekvivalenter.
Om disse formatene
En .astro-fil er en komponentmal for Astro-rammeverket. Den inneholder HTML-lignende markering pluss en valgfri JavaScript- eller TypeScript-skriptseksjon, og Astro kompilerer den til ren…
Åpne .ASTRO-detaljer →En .vue-fil er enten en E-on Vue 3D-landskapsscene (terreng, himmel, vegetasjon, belysning) eller en Vue.js-webkomponent. Åpne en 3D-scene med Vue fra Bentley Systems, som nå er gratis å…
Åpne .VUE-detaljer →Kvalitet og hva du bør passe på
- Astros dokumentasjon bemerker at du kan bruke Vue-komponenter inne i Astro, men ikke Astro-komponenter inne i en Vue-kodebase.
- Vue bruker direktiver som
v-if,v-forog:prop-binding som ikke har noen direkte Astro-motpart, så enhver omskriving er manuelt arbeid. - Astros server-kodeblokk og
client:*-hydreringsmodell kan ikke oversettes direkte til Vues kjøretidsreaktivitet.
Ofte stilte spørsmål
Finnes det en .astro til .vue-konverter?
Kan jeg kjøre Vue-komponenter i et Astro-prosjekt?
@astrojs/vue-integrasjonen som legges til med npx astro add vue.Hvordan oversettes slots til Vue?
<slot> blir Vues <slot> i en <template>, men navngitte slots og props trenger manuell kartlegging.