代码模板生成工具 - 快速创建项目结构

模板生成工具使用说明(需要浏览器支持 showDirectoryPicker)

使用步骤

点击"打开模版目录"按钮选择包含模板的文件夹
确保所选文件夹包含以下内容：
- root 文件夹（存放模板文件和子目录）
- template.config.js 文件（模板配置）如下
- ```
export default {
  // 模板参数配置
};
```
在编辑器中修改模板参数配置
点击"生成模版至"按钮选择输出目录
系统会根据配置生成对应的文件和目录结构

文件名/目录名生成格式

1. 基础格式：[@ varName @]

语法格式： [@ varName @]

说明：

直接使用变量值作为文件名/目录名
如果变量不存在，生成空字符串
如果变量是数组，返回数组的索引

示例：

# 文件名模板
[@ componentName @].vue

# 数据配置
{
  "componentName": "MyComponent"
}

# 生成结果
MyComponent.vue

2. 高级格式：[@ varName as tm.name @]

语法格式： [@ varName as tm.name @]

说明：

当 varName 是数组时，使用数组元素的 tm.name 属性作为文件名/目录名
支持嵌套属性访问，如 [@ items as item.nested.name @]
如果属性不存在，生成空字符串

示例：

# 文件名模板
[@ items as item.name @].txt

# [@ items as item.name @].txt 模板内容
头部
-[@ item.content @]
底部

# 数据配置
{
  "items": [
    { "name": "file1", "content": "内容1" },
    { "name": "file2", "content": "内容2" }
  ]
}

# 生成结果
- file1.txt
  - 头部
  - 内容1
  - 底部
- file2.txt
  - 头部
  - 内容2
  - 底部

嵌套属性示例：

# 文件名模板
[@ users as user.profile.username @].json

# 数据配置
{
  "users": [
    {
      "profile": {
        "username": "zhangsan"
      }
    },
    {
      "profile": {
        "username": "lisi"
      }
    }
  ]
}

# 生成结果
- zhangsan.json
- lisi.json

功能概述

模板生成工具支持以下语法特性：

变量替换：[@ varName @] 格式，支持嵌套属性访问
循环控制：[@for item in array@]...[@/for@] 格式，支持内置循环变量
- 不支持嵌套
条件判断：[@if condition@]...[@else@]...[@/if@] 格式，支持多种比较运算符
- 不支持 else if
文件名/目录名生成：支持两种特殊格式用于动态生成文件名和目录名

模板语法详细说明

1. 变量替换

语法格式： [@ varName @]

说明： 用于替换模板中的变量，支持点符号访问嵌套属性。

示例：

# 模板内容
Hello, [@ user.name @]! You are [@ user.age @] years old.

# 数据配置
{
  "user": {
    "name": "张三",
    "age": 25
  }
}

# 生成结果
Hello, 张三! You are 25 years old.

2. 循环控制

语法格式： [@for item in array@]循环内容[@/for@]

说明： 用于遍历数组，支持以下内置循环变量：

_index：当前循环索引（从 0 开始）
_first：是否为第一个元素（布尔值）
_last：是否为最后一个元素（布尔值）

示例：

# 模板内容
[@for item in items@]- [@ _index @]. [@ item.name @] (优先级: [@ item.priority @])
[@/for@]

# 数据配置
{
  "items": [
    { "name": "任务1", "priority": "高" },
    { "name": "任务2", "priority": "中" },
    { "name": "任务3", "priority": "低" }
  ]
}

# 生成结果
- 0. 任务1 (优先级: 高)
- 1. 任务2 (优先级: 中)
- 2. 任务3 (优先级: 低)

循环中使用内置变量示例：

# 模板内容
[@for item in items@][@if _first@]=== 开始 ===[@/if@]
- [@ item @]
[@if _last@]=== 结束 ===[@/if@][@/for@]

# 数据配置
{
  "items": ["A", "B", "C"]
}

# 生成结果
=== 开始 ===
- A

- B

- C
=== 结束 ===

3. 条件判断

语法格式：

基本 if：[@if condition@]内容[@/if@]
if-else：[@if condition@]if内容[@else@]else内容[@/if@]

支持的比较运算符：

==：等于
!=：不等于
>：大于
<：小于
>=：大于等于
<=：小于等于

示例 1：基本条件判断

# 模板内容
状态：[@if active@]激活[@else@]禁用[@/if@]

# 数据配置1（激活状态）
{
  "active": true
}
# 生成结果1
状态：激活

# 数据配置2（禁用状态）
{
  "active": false
}
# 生成结果2
状态：禁用

示例 2：比较运算

# 模板内容
成绩：[@ score @]
评级：[@if score >= 90@]优秀[@elseif score >= 80@]良好[@elseif score >= 60@]及格[@else@]不及格[@/if@]

# 数据配置
{
  "score": 85
}

# 生成结果
成绩：85
评级：良好

示例 3：循环与条件结合使用

# 模板内容
[@for user in users@][@if user.active@]- [@ user.name @] (激活)
[@else@]- [@ user.name @] (禁用)
[@/if@][@/for@]

# 数据配置
{
  "users": [
    { "name": "张三", "active": true },
    { "name": "李四", "active": false },
    { "name": "王五", "active": true }
  ]
}

# 生成结果
- 张三 (激活)
- 李四 (禁用)
- 王五 (激活)

生成组件文件示例

模板内容（组件模板）：

<template>
  <div class="[@ componentName @]">
    <h1>[@ title @]</h1>
    <p>这是一个[@ componentName @]组件</p>

    [@if showList@]
    <ul>
      [@for item in items@]
      <li>[@ item @]</li>
      [@/for@]
    </ul>
    [@/if@]
  </div>
</template>

<script setup>
const props = defineProps([[@for prop in props@]'[@ prop @]'[@if _last @][@else@], [@/if@][@/for@]]);
</script>

<style scoped>
.[@ componentName @] {
  background-color: [# bgColor @];
  padding: 20px;
}
</style>

数据配置：

{
  "componentName": "MyComponent",
  "title": "我的组件",
  "showList": true,
  "items": ["Item 1", "Item 2", "Item 3"],
  "props": ["msg", "count"],
  "bgColor": "#f0f0f0"
}

注意事项

模板语法区分空格，确保语法格式正确
循环中不支持嵌套循环
条件判断中支持中文变量名
变量名支持中文和英文
生成前请确保数据配置完整，避免出现未定义变量

故障排除

问题： 生成的文件内容为空 原因： 模板中使用了未定义的变量或条件判断结果为 false 解决： 检查数据配置，确保所有变量都已定义
问题： 变量未被正确替换 原因： 变量名拼写错误或语法格式不正确 解决： 检查变量名拼写和语法格式，确保使用[@ varName @]格式
问题： 循环内容未生成 原因： 数组变量未定义或为空数组 解决： 检查数组变量是否已正确定义且包含数据