Heim Web-Frontend js-Tutorial So erstellen Sie eine statische Website mit VuePress

So erstellen Sie eine statische Website mit VuePress

Apr 28, 2018 am 11:53 AM
vuepress 生成 statisch

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
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie generiert man mit Python k zufällige Daten zwischen zwei Daten? Wie generiert man mit Python k zufällige Daten zwischen zwei Daten? Sep 09, 2023 pm 08:17 PM

Die Generierung von Zufallsdaten ist im Bereich der Datenwissenschaft sehr wichtig. Beim Erstellen neuronaler Netzwerkvorhersagen, Börsendaten usw. wird normalerweise das Datum als einer der Parameter verwendet. Für die statistische Analyse müssen wir möglicherweise Zufallszahlen zwischen zwei Daten generieren. In diesem Artikel wird gezeigt, wie man mit den Modulen „random“ und „datetime“ k zufällige Daten zwischen zwei bestimmten Daten generiert. Datetime ist Pythons integrierte Bibliothek für die Zeitverarbeitung. Andererseits hilft das Zufallsmodul bei der Generierung von Zufallszahlen. Wir können also Zufalls- und Datum/Uhrzeit-Module kombinieren, um ein zufälliges Datum zwischen zwei Daten zu generieren. Syntax random.randint (start, end, k) random bezieht sich hier auf die Python-Zufallsbibliothek. Die Randint-Methode verwendet drei wichtige

So generieren Sie aktualisierbaren Bildverifizierungscode mit PHP So generieren Sie aktualisierbaren Bildverifizierungscode mit PHP Sep 13, 2023 am 11:54 AM

So generieren Sie mit PHP aktualisierbare Bildverifizierungscodes: Um böswillige Angriffe und automatische Maschinenoperationen zu verhindern, verwenden viele Websites Verifizierungscodes zur Benutzerverifizierung. Eine gängige Art von Verifizierungscode ist der Bildverifizierungscode, der ein Bild mit zufälligen Zeichen generiert und den Benutzer auffordert, die richtigen Zeichen einzugeben, bevor er fortfahren kann. In diesem Artikel wird erläutert, wie Sie mit PHP aktualisierbare Bildüberprüfungscodes generieren und spezifische Codebeispiele bereitstellen. Schritt 1: Erstellen Sie ein Bestätigungscode-Bild. Zuerst müssen wir ein Bild erstellen

Machen Sie sich keine Sorgen mehr darüber, dass Ihr Chef Sie vor Feierabend zu einer kleinen Besprechung aufhält. Der KI-Assistent hilft Ihnen dabei, automatisch Besprechungsprotokolle zu erstellen. Machen Sie sich keine Sorgen mehr darüber, dass Ihr Chef Sie vor Feierabend zu einer kleinen Besprechung aufhält. Der KI-Assistent hilft Ihnen dabei, automatisch Besprechungsprotokolle zu erstellen. Sep 04, 2023 pm 11:21 PM

iFlytek hat die Funktion für Besprechungsprotokolle aktualisiert, mit der gesprochene Äußerungen direkt in schriftliche Entwürfe umgewandelt werden können, und KI kann Besprechungsprotokolle basierend auf Aufzeichnungen zusammenfassen. KI kann Ihnen beim Verfassen von Besprechungsprotokollen helfen. Am 31. August wurde die iFlytek-Webversion um eine Echtzeit-Aufzeichnungsfunktion auf der PC-Seite erweitert, die künstliche Intelligenz nutzen kann, um Besprechungsprotokolle intelligent zu erstellen. Die Einführung dieser Funktion wird die Effizienz der Benutzer bei der Organisation von Inhalten und der Nachverfolgung wichtiger Arbeitselemente nach Besprechungen erheblich verbessern. Für Menschen, die häufig an Besprechungen teilnehmen, ist diese Funktion zweifellos ein sehr praktisches Tool, das viel Zeit und Energie sparen kann. Das Anwendungsszenario dieser Funktion besteht hauptsächlich darin, Aufzeichnungen auf dem PC in Text umzuwandeln und Besprechungsprotokolle automatisch zu erstellen Benutzern die beste Qualität, Produkte mit exzellenten Dienstleistungen und modernster Technologie, um die Büroeffizienz schnell zu verbessern

So führen Sie die grundlegende Generierung natürlicher Sprache mit PHP durch So führen Sie die grundlegende Generierung natürlicher Sprache mit PHP durch Jun 22, 2023 am 11:05 AM

Die Erzeugung natürlicher Sprache ist eine Technologie der künstlichen Intelligenz, die Daten in Text in natürlicher Sprache umwandelt. Im heutigen Big-Data-Zeitalter müssen immer mehr Unternehmen Daten visualisieren oder den Benutzern präsentieren, und die Generierung natürlicher Sprache ist eine sehr effektive Methode. PHP ist eine sehr beliebte serverseitige Skriptsprache, die zur Entwicklung von Webanwendungen verwendet werden kann. In diesem Artikel wird kurz vorgestellt, wie PHP für die grundlegende Generierung natürlicher Sprache verwendet wird. Einführung in die Bibliothek zur Generierung natürlicher Sprache Die mit PHP gelieferte Funktionsbibliothek enthält nicht die für die Generierung natürlicher Sprache erforderlichen Funktionen

Generieren Sie ein Waffeldiagramm mit pyWaffle in Python Generieren Sie ein Waffeldiagramm mit pyWaffle in Python Aug 17, 2023 am 11:49 AM

Die Datenvisualisierung ist für ein effizientes Informationsverständnis und eine effiziente Präsentation unerlässlich. Unter den vielen verfügbaren Diagrammtypen sind Waffeldiagramme eine neuartige Möglichkeit, Daten in einer gitterartigen Struktur mit quadratischen Kacheln anzuzeigen. Das leistungsstarke Python-Modul PyWaffle erleichtert die Entwicklung von Waffeldiagrammen, ähnlich wie viele Berechnungs- und Datenanalysemethoden. In diesem Artikel schauen wir uns an, wie man mit dem hochentwickelten Python-Modul PyWaffle ein Waffeldiagramm erstellt. Lassen Sie uns PyWafle installieren und sehen, wie Sie es zur Visualisierung kategorialer Daten verwenden können. Führen Sie den folgenden Befehl in Ihrem cmd aus, um die Bibliothek zu installieren, und importieren Sie sie dann in Ihren Code. Die chinesische Übersetzung von pipinstallpywaffleExample1 lautet: Beispiel 1 In diesem Beispiel haben wir

Wie erstelle ich mit PHP einen zeitlich begrenzten QR-Code? Wie erstelle ich mit PHP einen zeitlich begrenzten QR-Code? Aug 26, 2023 pm 04:34 PM

Wie erstelle ich mit PHP einen zeitlich begrenzten QR-Code? Mit der Popularität mobiler Zahlungen und elektronischer Tickets sind QR-Codes zu einer gängigen Technologie geworden. In vielen Fällen müssen wir möglicherweise einen zeitlich begrenzten QR-Code generieren, der auch nach einer bestimmten Zeitspanne ungültig wird. In diesem Artikel wird erläutert, wie Sie mit PHP einen zeitlich begrenzten QR-Code generieren und Codebeispiele als Referenz bereitstellen. Installation der PHPQRCode-Bibliothek Um PHP zum Generieren von QR-Codes zu verwenden, müssen wir zuerst die PHPQRCode-Bibliothek installieren. Diese Bibliothek

Was tun, wenn das Wortverzeichnis falsch generiert wird? Was tun, wenn das Wortverzeichnis falsch generiert wird? Feb 20, 2024 am 08:08 AM

Was tun, wenn das Word-Inhaltsverzeichnis falsch generiert wird? Mit der Entwicklung der Technologie sind elektronische Dokumente zu einem unverzichtbaren Bestandteil unserer täglichen Arbeit und unseres Studiums geworden. Bei der Bearbeitung elektronischer Dokumente, insbesondere langer Artikel oder Aufsätze, ist die Erstellung eines Inhaltsverzeichnisses ein sehr wichtiger Schritt. Das Inhaltsverzeichnis kann es den Lesern erleichtern, den Inhalt und die Struktur des Artikels zu finden und die Leseeffizienz zu verbessern. Manchmal stoßen wir jedoch beim Generieren des Katalogs auf einige Probleme, wie z. B. Fehler bei der Kataloggenerierung, ungeordnete Reihenfolge usw. Wenn also das Wortverzeichnis falsch generiert wird, wie sollen wir es lösen? Kopf

Eingehende Analyse der Rolle und Verwendung des statischen Schlüsselworts in der C-Sprache Eingehende Analyse der Rolle und Verwendung des statischen Schlüsselworts in der C-Sprache Feb 20, 2024 pm 04:30 PM

Eingehende Analyse der Rolle und Verwendung des Schlüsselworts „static“ in der Sprache C. In der Sprache C ist „static“ ein sehr wichtiges Schlüsselwort, das bei der Definition von Funktionen, Variablen und Datentypen verwendet werden kann. Die Verwendung des Schlüsselworts static kann die Linkattribute, den Umfang und den Lebenszyklus des Objekts ändern. Lassen Sie uns die Rolle und Verwendung des Schlüsselworts static in der C-Sprache im Detail analysieren. Statische Variablen und Funktionen: Variablen, die mit dem Schlüsselwort static innerhalb einer Funktion definiert werden, werden als statische Variablen bezeichnet, die einen globalen Lebenszyklus haben

See all articles