So verwenden Sie den Website-Builder VuePress

Dieses Mal zeige ich Ihnen, wie Sie den Website-Builder VuePress verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Website-Builders VuePress gelten. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Was ist VuePress?

VuePress besteht aus zwei Teilen: einem leichten statischen Website-Generator auf Basis von Vue und einem Tool zum Schreiben technischer Dokumentation optimiertes Standardthema. Es wurde erstellt, um den Anforderungen der eigenen Teilprojektdokumentation von Vue gerecht zu werden.

VuePress stellt für jede von ihm generierte Seite vorinstalliertes HTML bereit, das nicht nur eine hervorragende Ladegeschwindigkeit aufweist, sondern auch sehr SEO-freundlich ist. Sobald die Seite geladen ist, übernimmt Vue alle statischen Inhalte und verwandelt sie in eine vollständige SPA-Anwendung. Andere Seiten werden bei Bedarf ebenfalls geladen, wenn der Benutzer die Navigation verwendet.

Unter Bezugnahme auf die offizielle Dokumentation können wir sehen, dass das Projekt über die folgenden Funktionen verfügt:

• Eingebauter Markdown (Grundfunktion)

• Unterstützt PWA

• In Google Analytics integriert

• Verfügt über eine Reihe von Standardthemen (der Stil stimmt mit (offizieller Dokumentation) überein )[https://vuepress.vuejs.org] )

• Automatisch generierter GitHub-Link und Seitenbearbeitungslink

Loslegen schnell

Installation

Projekt initialisieren

npm init -y

Vuepress installieren, Sie können es auch global installieren

npm install -D vuepress

Artikelordner erstellen

mkdir docs

Konfigurationspaket.json

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

Schreiben

Erstellen Sie eine neue Markdown-Datei direkt im Ordner „Docs“, um den Artikel zu bearbeiten und zu schreiben.

Vorschau

npm run docs:dev

Öffnen Sie http://localhost :8080/

Build

npm run docs:build

Die generierte Datei befindet sich standardmäßig im Ordner .vuepress/dist

Benutzerdefinierte Konfiguration

Sie können die Konfigurationsdatei in .vuepress/config.js schreiben

Top-Navigation hinzufügen

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

Seitenleiste hinzufügen

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

Es auch unterstützt die Gruppierung zum Hinzufügen einer Seitenleiste, z. B.:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was sind die Schleifendurchlaufanweisungen in Vue?

Wie man den Fortschritt durch manuelles Ziehen steuert bar mit jQuery-Funktion

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Website-Builder VuePress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!