Aller au contenu

Migration depuis VuePress

VuePress est un générateur de sites statiques open-source basé sur Vue.

Principales similitudes entre VuePress et Astro

Titre de la section Principales similitudes entre VuePress et Astro

VuePress et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

Principales différences entre VuePress et Astro

Titre de la section Principales différences entre VuePress et Astro

Lorsque vous reconstruisez votre site VuePress dans Astro, vous remarquerez quelques différences importantes.

  • VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l’aide de composants .astro, mais peuvent également prendre en charge React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit et le templating HTML brut.

  • Modèles de mise en page : Les sites VuePress sont créés à l’aide de fichiers Markdown (.md) pour le contenu des pages et de modèles HTML (.html) pour la mise en page. Astro est basé sur des composants et utilise des composants Astro, qui incluent des modèles HTML pour les pages, les mises en page et les éléments individuels de l’interface utilisateur. Astro peut également créer des pages à partir de fichiers .md et .mdx, en utilisant un composant de mise en page Astro pour envelopper le contenu Markdown dans un modèle de page.

  • VuePress a été conçu pour construire des sites à fort contenu, centrés sur le Markdown, et possède des fonctionnalités intégrées spécifiques à la documentation que vous devriez construire vous-même dans Astro. Au lieu de cela, Astro offre des fonctionnalités spécifiques à la documentation par le biais d’un modèle de démarrage officiel Starlight. Ce site web a été la source d’inspiration de ce modèle ! Vous pouvez également trouver d’autres thèmes de documentation communautaires avec des fonctionnalités intégrées dans notre vitrine de thèmes.

Pour convertir un site de documentation VuePress en Astro, commencez par notre modèle officiel de démarrage Starlight, ou explorez d’autres thèmes de documentation communautaires dans notre vitrine de thèmes.

Vous pouvez passer un argument --template à la commande create astro pour démarrer un nouveau projet Astro avec l’un de nos modèles officiels. Vous pouvez aussi démarrer un nouveau projet à partir de n’importe quel dépôt Astro existant sur GitHub.

Fenêtre de terminal
npm create astro@latest -- --template starlight

Apportez vos fichiers de contenu Markdown existants à créer des pages Markdown. Vous pouvez toujours profiter du routage basé sur les fichiers en déplaçant ces documents de docs dans VuePress vers src/pages/ dans Astro. Créez des dossiers avec des noms qui correspondent à votre projet VuePress existant, et vous devriez être en mesure de conserver vos URLs existantes.

VuePress, ou tout autre thème que vous avez installé, a probablement géré une grande partie de la mise en page et des métadonnées de votre site pour vous. Vous pouvez lire l’article sur la construction de Layouts Astro en tant qu’enveloppes de page Markdown pour voir comment gérer vous-même le templating dans Astro, y compris votre page <head>.

Vous pouvez trouver la documentation de démarrage d’Astro, ainsi que d’autres modèles, sur astro.new. Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne StackBlitz, CodeSandbox et Gitpod.

  • Ajoutez le vôtre !

Plus de guides sur les migrations

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté