学习前端模板引擎 jade (一)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:52:27
Original
1621 Leute haben es durchsucht

一.为什么要学习jade?

  1. 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版。
  2. 对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了。
  3. 废话不多说,直接切入正题。
二.开始装jade。
  1. jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去nodejs的官方网站下载nodejs的安装包直接安装就好了。
  2. 第二步我要安装npm包管理工具,在node环境下,不装grunt是无法开展工作的哟。
  3. 开始安装jade插件了,下面的就是安装命令。

三.开始使用jade来构建前端模版。
  1. 首先我们建立一个文件夹叫jade,然后在创建一个jade的文件叫jade.jade即可。

  2.我们在jade文件内写上jade规模的模版代码,其实很好看懂。

  

  3.上面代码估计大家都能看懂,就是创建一个常规的前端html的文件,但是规范是jade的规范,然后我们可以进入cmd命令行工具  cd到当前的文件夹,然后暴力编译当前的jade文件,会看到同目录会生成一个压缩过的html的文件。

  

  4.压缩的过的可以通过加-P来不压缩,如果每次更改模版都要打命令行一次很麻烦是不是,我们可以通过加上jade -P -w jade.jade  加上一个-w来开启监视模式,每次更改模版,html文件都会自动编译咯。

  

  5.我们现在来看看生成的html文件吧,是不是生成了正常的html dom树了呢?

  

  四.熟悉jade规范。

  

  1. 从图上可以看出来,子级元素必须要缩进。
  2. 标签和文本必须要留有空行。  

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage