模板数据

template.tpl文件定义了页面结构，模板数据文件则是定义了每个页面展现的内容

自定义输出路径

tyre 配置文件 中的 output 只是定义了文件输出的目录，输出的文件名称 则是根据模板数据文件来的。

例如tyre的配置文件如下：

# tyre.config.json
{
    "output": "./src/views", 
    ...
}

如果我们的模板数据文件叫：Data.json 那么最终生成的文件路径为：./src/views/Data.vue

想自定文件路径、名称的话，就需要在Data.json中定义output来配置文件的路径和名称

# Data.json
{
    "output": "test/Index.vue",
    ....
}

通过以上的配置，那么那么最终生成的文件路径则为：./src/views/test/Index.vue

自定义路由格式

若tyre的配置文件中配置了路由文件的路径，那么生成vue组件时，会自动在路由文件中引入此组件并注册成路由。需要说明的是，目前这些都是基于vue-router 2的方式来定义的。

同样可以在模板数据文件Data.json中自定义路由的内容

# Data.json自定义路由
{
    "router": {
        "path": "/data",
        "name": "data",
        "component": "Data"
    }
}

通过以上配置，最终路由文件中会加入以下几行

# router/index.js
...
import Data from 'views/test/Index.vue'
...
    routes:[
        {
            "path": "/data",
            "name": "data",
            "component": Data
        },
        ...
    ]

配置组件信息

组件的配置一些关键字需要说明下，这里定义一组配置用于示例说明:

# Data.json
{
    "name" : "MyInput",
    "value" : "val",
    "default" : "tyre",
    "submit" : true,
    "rules" :  {"required": true, "message": "请输入", "trigger": "blur"},
    "slot": "form",
    "placeholder": "请输入"
}

name

组件的名称，解析过后就是标签的名称。若组件是项目中一个自定义组，将会自动插入import语句，同时注册成组件。

# 示例模板内容
<template>
    <%# name %>   
</template>

-----------------------------分隔线------------------------------

#解析成: 
<template>
    <MyInput>
</template>
<script>
    import MyInput from './components/MyInput.vue'
    export default {
       components: {
           MyInput
       },
       ...
    }
</script>

value

会解析成组件所绑定的字段，同时会将字段插入到data对象中

# 示例模板内容
<template>
    <%# name|value %>   
</template>

-----------------------------分隔线------------------------------

#解析成: 
<template>
    <MyInput v-model="val">
</template>
<script>
       ...
       data () {
           return {
               val: ''
           }
       }
</script>

default

作为绑定字段的默认值

# 示例模板内容
<template>
    <%# name|value|default %>   
</template>

-----------------------------分隔线------------------------------

#解析成: 
<template>
    <MyInput v-model="val">
</template>
<script>
       ...
       data () {
           return {
               val: 'tyre'
           }
       }
</script>

submit

标识组件绑定的字段是否作为表单内容提交。tyre会插入一个formData对象，存入表单提交的字段。

# 示例模板内容
<template>
    <%# name|value|submit %>   
</template>

-----------------------------分隔线------------------------------

#解析成: 
<template>
    <MyInput v-model="formData.val">
</template>
<script>
       ...
       data () {
           return {
               formData: {
                   val: ''
               }
           }
       }
</script>

rules

此字段是定义组件的验证规则，这个是参考了饿了么组件表单验证

# 示例模板内容
<template>
    <%# name|value|rules %>   
</template>

-----------------------------分隔线------------------------------

#解析成: 
<template>
    <MyInput v-model="val">
</template>
<script>
       ...
       data () {
           return {
               val: '',
               rules: {
                   val : {"required": true, "message": "请输入", "trigger": "blur"}
               }
           }
       }
</script>

除去以上几个字段，定义的其他字段将原样绑定到组件上

示例:

# 示例模板内容
<template>
    <%# name|value|slot|placeholder %>   
</template>

-----------------------------分隔线------------------------------

#解析成: 
<template>
    <MyInput v-model="val" slot="form" placeholder="请输入">
</template>
<script>
       ...
       data () {
           return {
               val: ''
           }
       }
</script>