Plop 中的模板：文件组织与变量传递

🎯 引言

学完这篇文章，你将知道 Plop 的模板文件应该怎么放、怎么命名，以及如何把用户在命令行里输入的内容传递到模板里。

关于 Handlebars 语法本身，本课程不会重复讲解。如果你还不熟悉 {{变量}}、{{#if}}、{{#each}} 等写法，请先学习前面的 Handlebars 课程。

🧱 Plop 模板放哪里

Plop 的模板文件通常统一放在 plop-templates/ 目录下，方便管理和维护。

简单项目可以这样放：

plop-templates/
├── component.hbs
├── page.hbs
├── api.hbs
└── util.hbs

如果某个生成器需要多个模板文件，可以建一个子目录：

plop-templates/
└── component/
    ├── index.vue
    ├── index.js
    └── style.scss

✨ 模板中可用的变量

用户在 prompts 里回答的内容，会自动变成模板里的变量。变量名就是问题对象里的 name 字段。

比如下面的 prompt：

{
    type: 'input',
    name: 'name',
    message: '请输入组件名称'
}

在模板中就可以这样用：

<div>{{name}}</div>

如果 prompt 是 confirm 类型，答案是 true 或 false，可以直接配合 {{#if}} 使用：

{{#if hasStyle}}
<style scoped>
.{{kebabCase name}} { }
</style>
{{/if}}

如果 prompt 是 checkbox 类型，答案是一个数组，可以配合 {{#each}} 遍历：

{{#each features}}
<li>{{this}}</li>
{{/each}}

🛠 Plop 内置的命名转换 helpers

Plop 提供了一组非常实用的内置 helper，可以把同一个输入转换成不同的命名风格。这是在 Handlebars 课程里没有、但 Plop 独有的能力。

示例：

<template>
    <div class="{{kebabCase name}}">
        {{pascalCase name}} 组件
    </div>
</template>

输入 userInfo，会渲染成：

<template>
    <div class="user-info">
        UserInfo 组件
    </div>
</template>

💡 模板文件组织建议

一个生成器对应一个模板文件或一个模板目录，命名和生成器保持一致，方便查找：

plop-templates/
├── component.hbs          # component 生成器
├── page.hbs               # page 生成器
├── page.scss.hbs          # page 生成器的样式模板
└── api.hbs                # api 生成器

不要把所有模板都堆在一个文件里。模板越清晰，后续维护越轻松。

🧾 小节总结

• Plop 模板文件建议统一放在 plop-templates/ 目录下，后缀用 .hbs。
• prompts 中问题的 name 字段就是模板里的变量名。
• confirm 返回布尔值，适合 {{#if}}；checkbox 返回数组，适合 {{#each}}。
• Plop 内置了 camelCase、pascalCase、kebabCase 等命名转换 helper。
• Handlebars 基础语法请参考前面的 Handlebars 课程，本课程不再重复。

❓ 知识问答

Q1：模板文件必须放在 plop-templates/ 目录下吗？

A：不是必须，但这是社区约定。统一目录后，队友一看就知道哪些是模板文件。

Q2：如果 prompts 里没有某个 name，模板里用了会怎样？

A：Handlebars 会把它渲染成空字符串，不会报错。

Q3：Plop 的命名转换 helper 在 Handlebars 课程里学过吗？

A：没有。这些是 Plop 自己扩展的 helper，用来方便地生成不同风格的文件名和类名。

Q4：模板里可以用自定义 helper 吗？

A：可以。通过 plop.setHelper() 注册的自定义 helper，在模板里和内置 helper 用法一样。下一篇会详细讲解。

🧪 小练习

给定 prompt 的 name 为 userAvatar，请补全模板，使渲染结果同时包含大驼峰组件名和短横线类名：

<template>
    <div class="{{kebabCase name}}">
        <!-- 请在这里输出大驼峰形式的名称 -->
    </div>
</template>

🎉 恭喜你掌握了 Plop 模板文件的组织和变量传递！下一篇我们会学习如何扩展 Plop 的 helper 能力。