plop学习

具体步骤

一.项目根目录下

yarn add plop --dev

二.要在根目录新建plopfile.js(plop入口文件需要导出一个函数,此函数接受一个plop对象,用于创建生成器任务)
module.exports = plop => {
  plop.setGenerator('component', {//这里定义生成器的名字component
    description: 'application component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name'
      }
    ],
    actions: [
      {
        type: 'add',//代表添加文件
        path: 'src/components/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.js.hbs'//添加的模板
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.js.hbs'
      }
    ]
  })
}

三. plop-templates

根目录创建模板文件夹
里面都是作为模板存在,plopfile.js中templateFile属性值就是这里面找

四.配置好plopfile.js,就可以命令行输入yarn plop component(component是上面自己定义生成器的名字)

自动生成和模板一样的文件夹及其内部文件,这里name自定义输入clover,生成就是clover,src/components/{​{name}}/{​{name}}.js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值