Comment générer un site Web statique avec VuePress

Cette fois, je vais vous montrer comment utiliser VuePress pour générer un site Web statique. Quelles sont les précautions pour utiliser VuePress pour générer un site Web statique. Voici un cas pratique, jetons un oeil.

Qu'est-ce que VuePress

VuePress se compose de deux parties : un générateurde site Web statique léger basé sur Vue, et un outil de rédaction de documentation technique. thème par défaut optimisé. Il a été créé pour répondre aux besoins de la documentation du sous-projet de Vue.

VuePress fournit du HTML préchargé pour chaque page générée par celui-ci, qui a non seulement une excellente vitesse de chargement, mais est également très convivial pour le référencement. Une fois la page chargée, Vue reprend tout le contenu statique, le transformant en une application SPA complète. D'autres pages seront également chargées à la demande lorsque l'utilisateur utilise la navigation pour entrer.

Comment fonctionne VuePress

Une application VuePress est en fait basée sur Vue, VueRouter et webpack. Si vous avez déjà utilisé Vue, alors lorsque vous utilisez VuePress lors du développement ou. En personnalisant votre propre thème, vous constaterez que l'expérience est presque la même ~ vous pouvez même utiliser Vue DevTools pour déboguer votre thème personnalisé !

Pendant le processus de construction, VuePress restituera le HTML pertinent en créant une version rendue côté serveur et en accédant à chaque itinéraire. Cette approche s'inspire de la commande nuxt generate de Nuxt et d'autres projets tels que Gatsby.

Chaque fichier markdown est compilé en HTML puis traité comme modèle pour un composant Vue. De cette façon, vous pouvez utiliser Vue directement dans les fichiers markdown, ce qui est très utile lorsque vous devez intégrer du contenu dynamique.

Fonctionnalités VuePress

• L'extension de démarque intégrée est optimisée pour les documents techniques

• Peut être utilisé en markdown Le fichier utilise directement le thème animé personnalisable de vue

• vue

• prend en charge PWA - Progressif Application Web (application Web de style progressif)

• Google Analytics intégré

• Une VuePress par défaut comprend :

1. Mise en page responsive

2. Page d'accueil facultative

3. Un en-tête simpleRechercheComposants

4. Barre de navigation et barre latérale personnalisables

5. Lien GitHub généré automatiquement et lien d'édition de page

VuePress bénéficie de l'environnement de développement Vue + webpack, utilise les composants Vue dans markdown et développe des thèmes personnalisés via Vue. VuePress fournit du HTML préchargé pour chaque page générée par celui-ci, qui a non seulement une excellente vitesse de chargement, mais est également très convivial pour le référencement. Une fois la page chargée, Vue reprend tout le contenu statique, le transformant en une application SPA complète. D'autres pages seront également chargées à la demande lorsque l'utilisateur utilise la navigation pour entrer.

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment EL obtient la valeur du paramètre de contexte (avec code)

JS crée des listes gauche et droite Effet mutuellement mobile

Explication détaillée de l'utilisation des composants dynamiques personnalisés Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!