So erstellen Sie eine statische Website mit VuePress

Dieses Mal zeige ich Ihnen, wie Sie mit VuePress eine statische Website erstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von VuePress, um eine statische Website zu erstellen?

Was ist VuePress

VuePress besteht aus zwei Teilen: einem leichten statischen Website-Generator basierend auf 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.

Wie VuePress funktioniert

Eine VuePress-Anwendung basiert tatsächlich auf Vue, VueRouter und Webpack, wenn Sie VuePress verwenden Wenn Sie Ihr eigenes Theme anpassen, werden Sie feststellen, dass das Erlebnis fast das gleiche ist – Sie können sogar Vue DevTools verwenden, um Ihr individuelles Theme zu debuggen!

Während des Erstellungsprozesses rendert VuePress den relevanten HTML-Code, indem es eine serverseitig gerenderte Version erstellt und auf jede Route zugreift. Dieser Ansatz ist vom nuxt-Generate-Befehl von Nuxt und anderen Projekten wie Gatsby inspiriert.

Jede Markdown-Datei wird in HTML kompiliert und dann als Vorlage für eine Vue-Komponente verarbeitet. Auf diese Weise können Sie Vue direkt in Markdown-Dateien verwenden, was sehr nützlich ist, wenn Sie dynamische Inhalte einbetten müssen.

VuePress-Funktionen

• Die integrierte Markdown-Erweiterung ist für technische Dokumente optimiert

• Can im Markdown verwendet werden Die Datei verwendet direkt das anpassbare animierte Design des vue

• vue-Treibers

• unterstützt PWA – Progressiv Web-App (Webanwendung im progressiven Stil)

• Integriertes Google Analytics

• Ein Standard-VuePress umfasst:

1. Responsives Layout

2. Optionale Startseite

3. Ein einfacher HeaderSuchenKomponenten

4. Anpassbare Navigationsleiste und Seitenleiste

5. Automatisch generierter GitHub-Link und Seitenbearbeitungslink

VuePress nutzt die Vue + Webpack-Entwicklungsumgebung, verwendet Vue-Komponenten im Markdown und entwickelt benutzerdefinierte Themen über Vue. 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.

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

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:

Wie EL den Kontextparameterwert erhält (mit Code)

JS erstellt Links- und Rechtslisten gegenseitiger mobiler Effekt

Detaillierte Erläuterung der Verwendung von benutzerdefinierten dynamischen Vue-Komponenten

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine statische Website mit VuePress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!