Maison >interface Web >js tutoriel >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
prend en charge PWA - Progressif Application Web (application Web de style progressif)
Google Analytics intégré
Une VuePress par défaut comprend :
Page d'accueil facultative
Un en-tête simpleRechercheComposants
Barre de navigation et barre latérale personnalisables
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!