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:
Responsives Layout
Optionale Startseite
Eine einfache Header-Suchkomponente
Anpassbare Navigationsleiste und Seitenleiste
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!