VuePress génère un site Web

Cette fois, je vais vous présenter VuePress pour générer un site Web. Quelles sont les précautions à prendre par VuePress pour générer un site Web ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Qu'est-ce que VuePress

VuePress se compose de deux parties : un générateur de site Web statique léger basé sur Vue et un thème par défaut optimisé pour la rédaction de documentation technique. 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 Utiliser vue directement dans le fichier

• thème personnalisable piloté par vue

• prend en charge PWA - Progressive Web App (application Web progressive)

• Google Analytics intégré

• Un VuePress par défaut comprend :

1. Mise en page réactive

2. Page d'accueil facultative

3. Un composant de recherche d'en-tête simple

4. Barre de navigation et barre latérale personnalisables

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

VuePress Profitez de l'environnement de développement Vue + webpack, utilisez les composants Vue dans le markdown et développez 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 :

Analyse de cas pratique du composant Progressbar

Quelles sont les instructions de parcours de boucle dans 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!