Fermer

janvier 28, 2019

Construire des documentations avec Vue à l'aide de Vuepress


Dans ce didacticiel, découvrez comment construire votre documentation avec VuePress, qui offre une option souple, configurable et facile à déployer pour la création de sites statiques.

En tant que développeur, une documentation fiable est indispensable. Présenter un guide clair des différents aspects d’une application permet de rendre l’information accessible non seulement aux consommateurs de votre application, mais aussi à vous-même, le cas échéant. Par conséquent, avoir accès à un système facilitant le processus de création d'une documentation robuste et fiable est un avantage, et c'est ici que VuePress entre en jeu.

VuePress est un générateur de site statique composé de deux parties: un site statique minimaliste. générateur avec un puissant système de thèmes et une API de plugin, ainsi qu’un thème par défaut pour générer de la documentation en un rien de temps. VuePress est alimenté par Vue, Vue Router et Webpack. Il génère des applications d'une page offrant des performances exceptionnelles, disposant d'un code HTML prédéfini et d'un système de référencement convivial.

Dans cet article, nous allons expliquer comment créer des documentations avec Vue à l'aide de VuePress. Avant de commencer, assurez-vous que Node and NPM est installé sur votre PC. Pour vous assurer de les avoir installés, exécutez la commande suivante sur un terminal:

     node -v  &&   npm  -v

Note: VuePress nécessite la version Node.js> = 8.

Si ces commandes n'existent pas, visitez le site Web officiel du Node pour le télécharger et l'installer sur votre PC. 19659003] Une fois que vous êtes certain que Node et NPM sont disponibles sur votre PC, exécutez la commande suivante pour installer VuePress de manière globale:

      npm  i -g vuepress @ next
        OU
    fil global add vuepress @ suivant

Pour utiliser les dernières fonctionnalités de VuePress, telles que les plug-ins et les thèmes, nous devons installer la version 1.0 alpha.

Nous allons écrire markdown, que VuePress compile en HTML à l'aide d'une bibliothèque appelée markdown-it. Pour commencer, créez un dossier appelé vue-docs et entrez le dossier:

     $  mkdir  vue-docs  &&   cd   $ _ [19659016] Création de fichiers de projet 

VuePress analyse et analyse les dossiers et les fichiers en fonction de leur structure. VuePress a une convention de dénomination de dossier stricte qui doit être suivie pour que VuePress puisse analyser et compiler avec succès les dossiers et les fichiers.

La structure de dossiers VuePress ressemble généralement à ceci:

     vue-docs /
      docs /
        .vuepress /
          modes/
          config.js
        LISEZMOI.md
        guider/
          LISEZMOI.md

Dans le répertoire .vuepress vous pouvez personnaliser davantage le thème VuePress par défaut, créer une configuration globale et créer des composants personnalisés. Le dossier .vuepress / styles contient des fichiers de style globaux. Ici, nous pouvons remplacer les couleurs de vuepress par défaut.

Le fichier config.js est le fichier d’entrée servant à la configuration et le README.md est le fichier d’index et sera acheminé vers le / chemin. Le dossier guide sera dirigé vers / guide / et tous les fichiers qu'il contient porteront le préfixe / guide / .

Inside the -docs exécutez npm init -y pour créer un fichier package.json et échafauder un nouveau projet. Ensuite, installez vuepress localement en exécutant la commande suivante:

      npm  i vuepress @ next

Avec VuePress installé, nous sommes prêts à partir car VuePress fournit un thème de documentation par défaut. Mais pour personnaliser l’application, nous devrons la configurer davantage car le thème par défaut n’a pas assez de contenu.

Dans le répertoire de Vue-docs créez un dossier nommé . ] docs et de cd dans le dossier. Ce dossier contient toutes les configurations et le contenu du projet.

      mkdir  docs  &&   cd   $ _ 

Créez un dossier .vuepress dans le répertoire docs placez cd dans le dossier et créez un fichier nommé config.js . :

      mkdir  .vuepress  &&   cd   $ _   &&   touch  config.js

Le fichier config.js contient la configuration générale de l'application. Dans le fichier, nous pouvons décrire l'application, lui donner un titre et configurer l'interface de l'application, en fournissant des liens de navigation et en choisissant le mode d'affichage de la barre de navigation. Pour en savoir plus sur les options de configuration cliquez ici .

Ouvrez le fichier config.js et copiez-y le code ci-dessous.

 module .  exportations  =   {
  titre : 'Vue Docs'
  description : 'Documentation de bâtiment avec Vue utilisant VuePress'
  themeConfig : {
    nav : [
{ du texte : 'Pour commencer' lien : '/ Getting-started /' }
{ texte : 'API'




Source link