art-template-generator v0.0.1

art-template-generator

一个基于 art-template 的前端代码生成器工具，支持多种模板引擎，可以快速生成前端代码。

特性

• 支持多种模板引擎（art-template、ejs、handlebars）
• 支持模板语法验证
• 支持批量生成代码
• 支持自定义配置
• 提供命令行工具

安装

npm install art-template-generator

快速开始

命令行使用

art-gen -d '{"name":"example"}' -t template.art -o output.js

命令行参数说明：

• -d, --data: 模板数据（JSON格式）
• -t, --template: 模板文件路径
• -o, --output: 输出文件路径
• --engine: 模板引擎类型（art/ejs/handlebars，默认：art）
• --validate: 是否启用模板验证（默认：true）
• --encoding: 输出文件编码（默认：utf8）
• --concurrency: 批量生成并发数（默认：5）

代码中使用

import { generateCode, updateConfig } from 'art-template-generator';

// 更新配置（可选）
updateConfig({
  defaultEngine: 'art',
  validateTemplate: true,
  outputEncoding: 'utf8',
  batchConcurrency: 5
});

// 生成单个文件
await generateCode({
  data: { name: 'example' },
  templatePath: './template.art',
  outputPath: './output.js'
});

// 批量生成文件
await batchGenerateCode([
  {
    data: { name: 'example1' },
    templatePath: './template1.art',
    outputPath: './output1.js'
  },
  {
    data: { name: 'example2' },
    templatePath: './template2.art',
    outputPath: './output2.js'
  }
]);

API 参考

updateConfig(newConfig)

更新代码生成器配置。

参数：

• newConfig.engines: 自定义模板引擎
• newConfig.defaultEngine: 默认模板引擎
• newConfig.outputEncoding: 输出文件编码
• newConfig.validateTemplate: 是否验证模板
• newConfig.batchConcurrency: 批量生成并发数

generateCode(options)

生成单个文件。

参数：

• options.data: 模板数据
• options.templatePath: 模板文件路径
• options.outputPath: 输出文件路径
• options.engine: 模板引擎类型（可选，默认使用配置中的defaultEngine）

batchGenerateCode(tasks)

批量生成文件。

参数：

• tasks: 生成任务列表，每个任务的参数与generateCode相同

示例

模板文件示例（user-management.art）

<template>
  <div class="user-management">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
          <el-button type="primary" @click="handleAdd">新增用户</el-button>
        </div>
      </template>
      
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="name" label="用户名" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="role" label="角色" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

生成代码示例

import { generateCode } from 'art-template-generator';

const mockUsers = [
  {
    id: '1',
    name: '张三',
    email: 'zhangsan@example.com',
    role: 'admin'
  },
  {
    id: '2',
    name: '李四',
    email: 'lisi@example.com',
    role: 'user'
  }
];

generateCode({
  data: { users: mockUsers },
  templatePath: './user-management.art',
  outputPath: './views/user-management.vue'
});

最佳实践

1. 模板文件组织

   • 将模板文件统一放在一个目录下管理
   • 使用清晰的命名规范
   • 为不同类型的模板创建子目录

2. 数据准备

   • 确保数据结构符合模板需求
   • 使用TypeScript类型定义提高代码可维护性
   • 考虑数据的可扩展性

3. 错误处理

   • 添加适当的错误处理逻辑
   • 使用try-catch捕获可能的异常
   • 记录错误日志

4. 性能优化

   • 合理设置批量生成的并发数
   • 避免生成过大的文件
   • 使用异步操作处理I/O

常见问题

1. 模板语法错误

   • 检查模板文件的语法是否正确
   • 确保使用了正确的模板引擎
   • 查看错误信息中的具体位置

2. 文件路径问题

   • 使用绝对路径或相对于项目根目录的路径
   • 确保目录存在且有写入权限
   • 检查文件名是否合法

3. 数据格式问题

   • 确保数据格式符合JSON规范
   • 检查数据结构是否与模板匹配
   • 注意特殊字符的转义

贡献

欢迎提交问题和改进建议！

许可证

MIT