如何在组件开发中使用jade

安装方式

light plugin -a jade

详细说明

Jade 是一个高性能的模板引擎（现已更名为pug），拥有变量申明与引用，流程控制，mixin等特性。

在light工程中使用lighting-plugin-jade不支持render函数传参，只是提供一种高效编写模版的途径。

使用jade需要将.html视图文件修改为同名的.jade文件，编译过程中会生成相应的.html文件并织入页面。

jade对于缩进要求严格，如果页面渲染为空白，应该检查你的缩进格式。
拥有一致的缩进格式，既能保持dom结构清晰，也能减少由于缩进导致的编译失败，建议将Tab输出的空格作为缩进标准。

示例

src/html/view/light.jade

#light(style="display:none;")
	h1 HelloLight
	input(type="text",v-model="name")
	p(v-text="name")
	button(v-on:click="sayHello") 点击
	ul
		li(v-for="person in persons") {{person.name}}

project.json

{
  "project":"demo",
  "version":"0.0.1",
  "desc":"Just For Fun",
  "type":"light-1.0",
  "plugins":["jade"]  
}

打包编译时可以使用指令： light release -e(plugins项配置有less的情况下) 或者 light release -e jade

编译结果：

dist/html/view/light.html


//编译生成后的视图文件
<div id="light" style="display:none;">
    <h1>HelloLight</h1>
    <input type="text" v-model="name" />
    <p v-text="name"></p>
    <button v-on:click="sayHello">点击</button>
    <ul>
        <li v-for="person in persons">{{person.name}}</li>
    </ul>
</div>