Heim >Web-Frontend >js-Tutorial >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!