# generate-html-cli

**Repository Path**: hecun/generate-html-cli

## Basic Information

- **Project Name**: generate-html-cli
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-15
- **Last Updated**: 2025-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# generate-html-cli

一个轻量的代码生成工具，用于从模板和 schema 自动生成表单页面或列表页面。设计目标：

- Node 12 兼容（使用 CommonJS）
- 可扩展：在 `pages/` 目录中添加更多 `.hbs` 模板（推荐在每个页面目录中使用 `template.hbs`）
- 提供 CLI：`generate-html`，并支持列出模板、指定输入、输出目录
- 高质量注释，易于二次开发

快速上手

安装依赖：

```bash
npm install
```

生成示例：

```bash
npm run generate-example
```

或直接：

```bash
node ./bin/generate.js -i pages/element/dialog/schema.json -o pages/element/dialog/out -t element/dialog
```

添加新模板

在 `pages/` 下添加一个新的 `.hbs` 文件即可（推荐使用 `template.hbs`），当文件为 `template.hbs` 时，模板名称将使用其父目录（例如 `element/dialog`）。可通过 `gen --list-templates` 查看。

新增模板示例：

- `html/*`：原生 HTML 模板（位于 `pages/html/`），例如 `html/form`、`html/list`。
- `element/*`：Vue 2 + Element UI（位于 `pages/element/`），例如 `element`（使用 `template.hbs` 时）或 `element/form-vue2-element`（使用文件名作为模板名）。
- `antd/*`：Vue 2 + ant-design-vue（位于 `pages/antd/`），例如 `antd`（使用 `template.hbs` 时）或 `antd/form-vue2-antd`（使用文件名作为模板名）。

示例：生成 Vue 文件：

```bash
node ./bin/generate.js -i pages/element/schema.json -o pages/element/out -t element
```

注意事项：

- 可以使用 `--list-templates` 查看所有模板，或使用 `--list-templates` 查看 Vue2 相关模板。使用 `--list-templates-json` 可以以 JSON 格式输出，便于在自动化脚本中解析。
- 默认使用 `html/form` 模板（当未通过 `-t/--template` 指定时）。

- 示例目录已按 UI 类型组织：`pages/html/`, `pages/element/`, `pages/antd/`。
  每个目录包含 `template.hbs`（或其它 `.hbs` 文件）、`schema.json`（示例 schema）与 `out/`（生成输出）。
- 也可以在 `schema` 中指定 `outputFile` 字段来自定义生成文件名（例如 `my-component.vue`）。

贡献

欢迎补充更多模板、增强命令行选项、加入更丰富的 helper。