VuePress generiert eine Website

Dieses Mal bringe ich Ihnen VuePress zum Generieren einer Website. Was sind die Vorsichtsmaßnahmen für VuePress zum Generieren einer Website? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Was ist VuePress

VuePress besteht aus zwei Teilen: einem leichten statischen Website-Generator auf Basis von Vue und einem Standarddesign, das für das Schreiben technischer Dokumentation optimiert ist. 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 Vue direkt in der Datei verwenden

• Vue-gesteuertes anpassbares Theme

• unterstützt PWA – Progressive Web App (progressive Webanwendung)

• Integriertes Google Analytics

• Ein Standard-VuePress umfasst:

1. Responsives Layout

2. Optionale Startseite

3. Eine einfache Header-Suchkomponente

4. Anpassbare Navigationsleiste und Seitenleiste

5. Automatisch generierter GitHub-Link und Seitenbearbeitungslink

VuePress genießt die Vue + Webpack-Entwicklungsumgebung, verwendet Vue-Komponenten im Markdown und entwickelt benutzerdefinierte Designs durch 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:

Praktische Fallanalyse der Progressbar-Komponente

Was sind die Schleifendurchlaufanweisungen in Vue?

Das obige ist der detaillierte Inhalt vonVuePress generiert eine Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!