Comment utiliser le moteur de modèles de développement frontal de nœuds Jade

Cette fois, je vais vous montrer comment utiliser le développement frontal de nœudsmoteur de modèlesJade, quelles sont les précautions pour l'utilisation du moteur de modèles de développement frontal de nœuds Jade, les suivantes sont des cas pratiques, rassemblons-nous. Jetez un oeil.

Avec le développement du Web, les applications frontales sont devenues de plus en plus complexes, et le javascript(Node.js) basé sur le back-end a également commencé à émerger. Avec le temps, de plus grandes attentes sont placées sur javascript. Dans le même temps, l'idée de​​javascript MVC est également devenue populaire. Afin de séparer l'interface utilisateur des données métiers (contenu), le concept de « moteur de modèles » est né.

Pour faire simple, le moteur de modèle est une chaîne avec plusieurs variables à déterminer dans , et les données y sont insérées dynamiquement via la fonction du moteur de modèle.

Aujourd'hui, nous allons parler des instructions d'utilisation et de grammaire de Jade. Site officiel de Jade : jade-lang.com/

Outil de ligne de commande Jade

L'utilisation de Jade nécessite l'environnement Node et est installé via l'outil de ligne de commande Jade du package npm, après une installation réussie, vous pouvez créer un nouveau fichier avec le suffixe de fichier *.jade. Nous pouvons utiliser la syntaxe de jade à notre guise. Après l'écriture, il nous suffit de la compiler via l'outil de ligne de commande pour la compiler dans le fichier statique HTML que nous utilisons habituellement.

Méthode d'installation

1. Déterminez d'abord si l'environnement Node et l'outil npm sont installés :

Exécutez comme suit dans la commande. outil de ligne Code :

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

2. Installez l'outil de ligne de commande Jade globalement via npm

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

3. Créez un fichier *.Jade et démarrez la tâche.

4. Compilez le fichier jade dans un fichier html à l'aide de l'outil de ligne de commande Jade

Comment utiliser l'outil de ligne de commande Jade

Nous pouvons visualiser les paramètres de l'outil de ligne de commande Jade via 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

Exemple :

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

Je crois que vous maîtrisez la méthode après avoir lu C'est le cas dans cet article, et il y a des choses plus excitantes. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la balise Jade du moteur de modèles front-end de nœud

Comment développer Vue Drag et déposez les composants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!