So verwenden Sie die Node-Front-End-Entwicklungsvorlagen-Engine Jade

Dieses Mal zeige ich Ihnen, wie Sie die Node-Front-End-Entwicklungs-Template-Engine verwendenJade, was sind die Vorsichtsmaßnahmen für die Verwendung der Node-Front-End-Entwicklungs-Template-Engine Jade, das Folgende Sind praktische Fälle, lasst uns zusammenkommen. Schaut mal rein.

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 ein String 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 环境。

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

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

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

anzeigen. Beispiel:

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

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:

So verwenden Sie das Jade-Tag der Node-Front-End-Template-Engine

So entwickeln Sie Vue Drag und Komponenten fallen lassen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Node-Front-End-Entwicklungsvorlagen-Engine Jade. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!