API配备component配备page配备

plop 是一款编码模版形成专用工具，配备之后只需要在终端设备上敲上指令，就也可以根据你界定好一点的模板文件去形成相对应的文档，下面我们看看下面完成。

新项目组装plop

在工程中组装依靠

npm i plop -D

在package.json配备启动命令

plop环境变量（存放新项目网站根目录）

demoFile.js的注解早已写清清楚楚啦

const FILE_PATH = 'demo'

module.exports = {
  description: '创建文件，留意要符合新项目管束标准', // 指令运行叙述
  prompts: [
    {
      type: 'input', // 指令方法，input-键入，list-挑选，confirm-是不是
      name: 'fileName', // 输入文件夹名称
      message: '输入您文件目录' // 消息提示
    }
  ],
  actions: data => {
    const { fileName } = data // 取得终端设备输入文件夹名称
    const actions = []
    if (fileName) {
      actions.push({ // 加上一个新的模板文件 add
        type: 'add',
        path: `${FILE_PATH}/{{ fileName }}.js`, // 产生的文档储放途径
        templateFile: '.setting/template/demoFile.hbs', // 模板文件途径
        data: { // 传达的数据信息给模板文件
          name: fileName,
        }
      })

      actions.push( // 再现有的文档中append 模版具体内容
        {
          type: 'append',
          path: `${FILE_PATH}/index.js`,
          pattern: /[\\s\\S]*?/, // 插进视频的匹配规则
          templateFile: '.setting/template/require.hbs', // 模板文件途径
          data: { // 必须告知模板的变量值
            name: fileName
          }
        }
      )
    }
    return actions
  }
}

模板文件的概念

依据配备的文件创建2个模板文件

形成模板的文档，拿传出去的用户标识符即可获得值

插进的模板文件

运作实际效果

如今那就让我们试一下它的奇妙的地方

生成文件前文件目录

生成文件前index文档

开启新项目网站根目录的终端设备，键入npm run new，发生如下所示结论

下面我们键入text，回车键，获得如下所示结论

第一个为产生的文档，第二个为插进具体内容以后文件，如今来让我们一起看看实际操作以后的文件目录

生成文件内容，跟我们模版界定的一毛一样

插进在index.js具体内容上面

是否非常实用，配备完以后大家也就不用创建文件=>引入=>写路由器这么多流程啦，立即一个指令解决，下面带各位看实战演练配备哦。

实战演练事例

我将plop拆为三个形成控制模块，如下图所示：

配备如下所示：

API配备

component配备

page配备

一起来看看我们自己的模版（能看头顶的文件夹名称）

敲 npm run new，下面奇迹时刻时

先挑选page，看看实际效果：

挑选手动式

挑选Y，形成并载入如下所示文档

实际效果：

别的2个都是一样的也不展现啦，是否很特别，配备的话，能够让我们的研发不会再繁杂。如果感到本文对大家有所帮助得话，麻烦你挪动下手指头给我给我点个赞哦！

番外篇

下边是该章节前面高科技专用工具篇哦，大大提升了前端工程师高效率呢。

1.前面高科技章节之scp2，使你一键打包部署服务器