Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Schritte zur Verwendung der Node-Front-End-Entwicklungsvorlagen-Engine Jade

Detaillierte Erläuterung der Schritte zur Verwendung der Node-Front-End-Entwicklungsvorlagen-Engine Jade

May 22, 2018 am 10:32 AM
node 引擎 模板

Dieses Mal bringe ich Ihnen die Node-Front-End-EntwicklungVorlagen-Enginedetaillierte Erläuterung der Schritte zur Verwendung von Jade und der Vorsichtsmaßnahmen für die Verwendung der Node-Front-End-Entwicklungs-Template-Engine Jade , das Folgende sind praktische Fälle, einer Steh auf und schau es dir an.

Mit der Entwicklung des Webs sind Front-End-Anwendungen immer komplexer geworden, und auch Back-End-basiertes Javascript(Node.js) ist entstanden Mit der Zeit werden höhere Erwartungen an Javascript gestellt. Gleichzeitig wurde auch die Idee von Javascript MVC populär. Um die Benutzeroberfläche von Geschäftsdaten (Inhalten) zu trennen, wurde das Konzept der „Template Engine“ geboren.

Einfach ausgedrückt ist die Template-Engine eine Zeichenfolge mit mehreren Variablen, die in bestimmt werden müssen, und die Daten werden durch die Template-Engine-Funktion dynamisch hineingestopft.

Heute werden wir über die Verwendung und Grammatikanweisungen von Jade sprechen. Offizielle Jade-Website: jade-lang.com/

Jade-Befehlszeilentool

Die Verwendung von Jade erfordert die Node-Umgebung und wird über installiert Mit dem NPM-Paket Jade-Befehlszeilentool können Sie nach erfolgreicher Installation eine neue Datei mit dem Dateisuffix *.jade erstellen. Wir können die Syntax von Jade nach Herzenslust verwenden. Nach dem Schreiben müssen wir sie nur über das Befehlszeilentool kompilieren, um sie in die statische HTML-Datei zu kompilieren, die wir normalerweise verwenden.

Installationsmethode

1. Stellen Sie zunächst fest, ob die Node-Umgebung und das NPM-Tool installiert sind:

Führen Sie den Befehl wie folgt aus Zeilentool-Code:

node -v
=> v0.10.35
npm -v
=> 1.4.28
// 如果成功返回版本号信息即为已成功安装 Node 环境。
Nach dem Login kopieren

2. Installieren Sie das Jade-Befehlszeilentool global über npm

npm install jade -g
// mac用户可能需要管理员权限,使用如下命令
sudo npm install jade -g
Nach dem Login kopieren

3. Erstellen Sie eine *.Jade-Datei und starten Sie die Aufgabe.

4. Kompilieren Sie die Jade-Datei mit dem Jade-Befehlszeilentool in eine HTML-Datei

So verwenden Sie das Jade-Befehlszeilentool

Wir können die Parameter des Jade-Befehlszeilentools über jade --help

jade --help
Usage: jade [options] [dir|file ...]
 Options:
  -h, --help     output usage information / 输出使用信息
  -V, --version   output the version number / 输出版本号信息
  -O, --obj <str>  javascript options object / 传输到 jade 文件中的数据对象
  -o, --out <dir>  output the compiled html to <dir> / 输出编译后的 HTML 到 <dir> 
  -p, --path <path> filename used to resolve includes / 在处理 stdio 时,查找包含文件时的查找路径
  -P, --pretty    compile pretty html output / 格式化编译 html 文件
  -c, --client    compile function for client-side runtime.js / 编译浏览器端可用的 runtime.js
  -n, --name <str>  The name of the compiled template (requires --client) / 编译模板的名字
  -D, --no-debug   compile without debugging (smaller functions) / 关闭编译的调试选项(函数会更小)
  -w, --watch    watch files for changes and automatically re-render / 监听文件改变并自动刷新编译结果
  --name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
  --doctype <str>  Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文档类型(如果在模板中没有被指定)
 Examples:
  # 编译整个目录
  $ jade templates
  # 生成 {foo,bar}.html
  $ jade {foo,bar}.jade
  # 在标准IO下使用jade
  $ jade < my.jade > my.html
  # 在标准IO下使用jade
  $ echo 'h1 Jade!' | jade
  # foo, bar 目录渲染到 /tmp
  $ jade foo bar --out /tmp
Nach dem Login kopieren

anzeigen. Beispiel:

// 比如说我们需要编译index.jade文件,默认编译到同文件夹下的同名html 文件中
jade index.jade
// 如果我们要格式化输出 index.html 文件,只需要添加 -P 参数即可
jade -P index.jade
// 如果我们要实现监听和自动编译,需要使用 -w 参数
jade -P -w index.jade
Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Weitere spannende Informationen finden Sie unter PHP Chinesisch Weitere verwandte Artikel online!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Jade-Tags der Node-Front-End-Template-Engine

NodeJS-Servererstellung und Vorgangscodefreigabe neu starten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung der Node-Front-End-Entwicklungsvorlagen-Engine Jade. 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

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

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)

So verwenden Sie Express für den Datei-Upload im Knotenprojekt So verwenden Sie Express für den Datei-Upload im Knotenprojekt Mar 28, 2023 pm 07:28 PM

Wie gehe ich mit dem Datei-Upload um? Der folgende Artikel stellt Ihnen vor, wie Sie Express zum Hochladen von Dateien im Knotenprojekt verwenden. Ich hoffe, er ist hilfreich für Sie!

Eine ausführliche Analyse des Prozessmanagement-Tools „pm2' von Node Eine ausführliche Analyse des Prozessmanagement-Tools „pm2' von Node Apr 03, 2023 pm 06:02 PM

In diesem Artikel stellen wir Ihnen das Prozessmanagement-Tool „pm2“ von Node vor und sprechen darüber, warum PM2 benötigt wird und wie Sie PM2 installieren und verwenden. Ich hoffe, dass es für alle hilfreich ist!

PI -Knotenunterricht: Was ist ein PI -Knoten? Wie installiere und richte ich einen PI -Knoten ein? PI -Knotenunterricht: Was ist ein PI -Knoten? Wie installiere und richte ich einen PI -Knoten ein? Mar 05, 2025 pm 05:57 PM

Detaillierte Erläuterungs- und Installationshandbuch für Pinetwork -Knoten In diesem Artikel wird das Pinetwork -Ökosystem im Detail vorgestellt - PI -Knoten, eine Schlüsselrolle im Pinetwork -Ökosystem und vollständige Schritte für die Installation und Konfiguration. Nach dem Start des Pinetwork -Blockchain -Testnetzes sind PI -Knoten zu einem wichtigen Bestandteil vieler Pioniere geworden, die aktiv an den Tests teilnehmen und sich auf die bevorstehende Hauptnetzwerkveröffentlichung vorbereiten. Wenn Sie Pinetwork noch nicht kennen, wenden Sie sich bitte an was Picoin ist? Was ist der Preis für die Auflistung? PI -Nutzung, Bergbau und Sicherheitsanalyse. Was ist Pinetwork? Das Pinetwork -Projekt begann 2019 und besitzt seine exklusive Kryptowährung PI -Münze. Das Projekt zielt darauf ab, eine zu erstellen, an der jeder teilnehmen kann

PHP-E-Mail-Vorlagen: Passen Sie Ihren E-Mail-Inhalt an und personalisieren Sie ihn. PHP-E-Mail-Vorlagen: Passen Sie Ihren E-Mail-Inhalt an und personalisieren Sie ihn. Sep 19, 2023 pm 01:21 PM

PHP-E-Mail-Vorlagen: Passen Sie Ihre E-Mail-Inhalte an und personalisieren Sie sie. Angesichts der Beliebtheit und weiten Verbreitung von E-Mails können herkömmliche E-Mail-Vorlagen den Bedarf der Menschen an personalisierten und individuellen E-Mail-Inhalten nicht mehr erfüllen. Jetzt können wir mithilfe der Programmiersprache PHP benutzerdefinierte und personalisierte E-Mail-Vorlagen erstellen. Dieser Artikel zeigt Ihnen, wie Sie PHP verwenden, um dieses Ziel zu erreichen, und stellt einige spezifische Codebeispiele bereit. 1. Erstellen Sie eine E-Mail-Vorlage. Zuerst müssen wir eine grundlegende E-Mail-Vorlage erstellen. Diese Vorlage kann ein HTM sein

Tokenbasierte Authentifizierung mit Angular und Node Tokenbasierte Authentifizierung mit Angular und Node Sep 01, 2023 pm 02:01 PM

Die Authentifizierung ist einer der wichtigsten Teile jeder Webanwendung. In diesem Tutorial werden tokenbasierte Authentifizierungssysteme und ihre Unterschiede zu herkömmlichen Anmeldesystemen erläutert. Am Ende dieses Tutorials sehen Sie eine voll funktionsfähige Demo, die in Angular und Node.js geschrieben wurde. Traditionelle Authentifizierungssysteme Bevor wir zu tokenbasierten Authentifizierungssystemen übergehen, werfen wir einen Blick auf traditionelle Authentifizierungssysteme. Der Benutzer gibt seinen Benutzernamen und sein Passwort im Anmeldeformular ein und klickt auf „Anmelden“. Nachdem Sie die Anfrage gestellt haben, authentifizieren Sie den Benutzer im Backend, indem Sie die Datenbank abfragen. Wenn die Anfrage gültig ist, wird eine Sitzung mit den aus der Datenbank erhaltenen Benutzerinformationen erstellt und die Sitzungsinformationen werden im Antwortheader zurückgegeben, sodass die Sitzungs-ID im Browser gespeichert wird. Bietet Zugriff auf Anwendungen, die unterliegen

Was ist ein Single-Sign-On-System? Wie implementiert man es mit NodeJS? Was ist ein Single-Sign-On-System? Wie implementiert man es mit NodeJS? Feb 24, 2023 pm 07:33 PM

Was ist ein Single-Sign-On-System? Wie implementiert man es mit NodeJS? Im folgenden Artikel erfahren Sie, wie Sie mit Node ein Single-Sign-On-System implementieren. Ich hoffe, dass er Ihnen weiterhilft!

So fügen Sie eine PPT-Maske hinzu So fügen Sie eine PPT-Maske hinzu Mar 20, 2024 pm 12:28 PM

Was die PPT-Maskierung angeht, sind viele Leute sicher nicht damit vertraut, wenn sie PPT erstellen, sondern erfinden es einfach, was ihnen gefällt. Daher wissen viele Menschen nicht, was PPT-Maskierung bedeutet Ich weiß, was diese Maske bewirkt, und ich weiß nicht einmal, dass sie das Bild weniger eintönig machen kann. Freunde, die lernen möchten, kommen und fügen Sie einige PPT-Masken zu Ihren PPT-Bildern hinzu. Wie fügt man also eine PPT-Maske hinzu? Bitte lesen Sie unten. 1. Zuerst öffnen wir PPT, wählen ein leeres Bild aus, klicken dann mit der rechten Maustaste auf [Hintergrundformat festlegen] und wählen eine Volltonfarbe aus. 2. Klicken Sie auf [Einfügen], Wortkunst, geben Sie das Wort ein 3. Klicken Sie auf [Einfügen], klicken Sie auf [Form]

Auswirkungen der C++-Vorlagenspezialisierung auf das Überladen und Umschreiben von Funktionen Auswirkungen der C++-Vorlagenspezialisierung auf das Überladen und Umschreiben von Funktionen Apr 20, 2024 am 09:09 AM

Spezialisierungen von C++-Vorlagen wirken sich auf das Überladen und Umschreiben von Funktionen aus: Funktionsüberladung: Spezialisierte Versionen können unterschiedliche Implementierungen eines bestimmten Typs bereitstellen und sich somit auf die Funktionen auswirken, die der Compiler aufruft. Funktionsüberschreibung: Die spezialisierte Version in der abgeleiteten Klasse überschreibt die Vorlagenfunktion in der Basisklasse und beeinflusst das Verhalten des abgeleiteten Klassenobjekts beim Aufruf der Funktion.

See all articles