Comment utiliser le créateur de site Web VuePress

Cette fois, je vais vous montrer comment utiliser le constructeur de site Web VuePress, et quelles sont les précautions à prendre pour utiliser le constructeur de site Web VuePress. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 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.

En nous référant à la documentation officielle, nous pouvons voir que le projet possède les fonctionnalités suivantes :

• Marquage intégré (fonction de base)

• Prend en charge PWA

• Intégré à Google Analytics

• Possède un ensemble de thèmes par défaut (le style est cohérent avec (documentation officielle )[https://vuepress.vuejs.org] )

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

Commencer rapidement

Installation

Initialisez le projet

npm init -y

Installez vuepress, vous pouvez également l'installer globalement

npm install -D vuepress

Créer un dossier d'articles

mkdir docs

Configurer package.json

{
 "scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}

Écrire

Créez un nouveau fichier markdown directement dans le dossier docs Editez et rédigez l'article

Aperçu

npm run docs:dev

Ouvrir http:/ /localhost:8080/

Build

npm run docs:build

Le fichier généré sera dans le dossier .vuepress/dist par défaut

Configuration personnalisée

Le fichier de configuration peut être écrit dans .vuepress/config.js

Ajouter une navigation supérieure

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

Ajouter une barre latérale

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

Prend également en charge le regroupement pour ajouter une barre latérale, par exemple :

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

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 php. Site chinois !

Lecture recommandée :

Quelles sont les instructions de parcours de boucle dans vue

Comment créer une barre de progression de contrôle manuel du glisser avec la fonction jQuery

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!