| title | description | type | stub | framework | i18nReady |
|---|---|---|---|---|---|
Migrando desde VuePress |
Consejos para migrar un proyecto existente de VuePress a Astro |
migration |
true |
VuePress |
true |
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
VuePress es un generador de sitios estáticos de código abierto construido sobre Vue.
VuePress y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:
-
Tanto VuePress como Astro son generadores de sitios estáticos de Javascript modernos con estructuras de archivos de proyectos similares. Ambos usan una carpeta especial
src/pages/para el enrutamiento basado en archivos. Crear y administrar páginas para tu sitio debería resultarte familiar. -
Astro y VuePress están diseñados para sitios web orientados al contenido, con un excelente soporte incorporado para archivos Markdown. Escribir en Markdown te resultará familiar, y podrás mantener tu contenido existente.
-
Astro tiene una integración oficial para usar componentes Vue y admite la instalación de paquetes NPM, incluyendo varios para Vue. Podrás escribir componentes de interfaz de usuario de Vue y es posible que puedas mantener algunos o todos tus componentes y dependencias de Vue existentes.
Cuando reconstruyas tu sitio VuePress en Astro, notarás algunas diferencias importantes.
-
VuePress es una aplicación de página única (SPA) basada en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas usando componentes
.astro, pero también pueden admitir React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit y plantillas HTML sin procesar. -
Plantillas de diseño: los sitios de VuePress se crean usando archivos Markdown (
.md) para el contenido de la página y plantillas HTML (.html) para el diseño. Astro está basado en componentes y usa componentes Astro, que incluyen plantillas HTML para páginas, diseños y elementos de interfaz de usuario individuales. Astro también puede crear páginas a partir de archivos.mdy.mdx, usando un componente de diseño Astro para envolver el contenido Markdown en una plantilla de página. -
VuePress fue diseñado para crear sitios centrados en Markdown, con mucho contenido y tiene algunas funciones web específicas para la documentación que tendrías que crear tú mismo en Astro. En cambio, Astro ofrece algunas funciones específicas para la documentación a través de un tema oficial de documentación. ¡Este sitio web fue la inspiración para esa plantilla! También puedes encontrar más temas de documentación de la comunidad con funciones incorporadas en nuestro catálogo de temas.
Para migrar un sitio de documentación de VuePress a Astro, comienza con nuestra plantilla oficial de inicio para documentación Starlight o explora más temas de documentación de la comunidad en nuestro catálogo de temas.
Puedes pasar el argumento --template al comando create astro para iniciar un nuevo proyecto Astro con una de nuestras plantillas oficiales. O, puedes iniciar un nuevo proyecto desde cualquier repositorio Astro existente en GitHub.
Lleva tus archivos de contenido Markdown existentes para crear páginas Markdown. Aún puedes aprovechar el enrutamiento basado en archivos moviendo estos documentos de docs en VuePress a src/pages/ en Astro. Crea carpetas con nombres que correspondan a tu proyecto VuePress existente y deberías poder mantener tus URL existentes.
VuePress o cualquier tema instalado, probablemente se encargó de gran parte del diseño y los metadatos de tu sitio. Es posible que desees leer sobre la construcción de diseños de Astro como envoltorios de páginas Markdown para ver cómo administrar las plantillas tú mismo en Astro, incluida la etiqueta <head> de tu página.
Puedes encontrar una plantilla de inicio de Astro y otras plantillas en astro.new. Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un clic para abrir un proyecto de trabajo en los entornos de desarrollo en línea StackBlitz, CodeSandbox y Gitpod.
- ¡Añade el tuyo!