前端自动化构建工具——Plop的基本使用

一款小而美的脚手架工具，一般集成在项目中使用，用于自动化创建重复类型文件

# 将plop模块作为项目开发依赖安装
yarn add plop --dev

在项目根目录下创建 plopfile.js

module.exports = plop => {
    // component ---> 为运行命令
    plop.setGenerator('component', {
        // 描述
        description: 'create a component',
        // 询问，用户交互 (api参照：Inquirer.js)
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: 'component name',
                default: 'MyComponent'
            }
        ],
        // 执行的动作
        actions: [
            {
                type: 'add', // 代表添加文件
                path: 'src/components/{{name}}/{{name}}.vue',
                templateFile: 'plop-templates/xxx.hbs'
            }
        ]
    })
}

创建模版
一般是在项目根目录下创建 plop-templates 文件夹
内部再创建 hbs模板（Handlebars模板语法） 中文版

.{{name}} {

}

运行cli命令生成对应模版文件

yarn plop component

到此结束，自动在src/components/目录下生成了对应模版的文件