plop工具使用

平时写业务代码的时候，每次创建新的文件目录，自己写或者复制粘贴出来改，都很费时间。本文提供一种新的思路，使用plop插件，创建你的自定义页面模板，快速生成模板文件。

安装

执行npm install --save-dev plop
也可以选择全局安装，这样使用起来会很方便，执行npm install -g plop。我不想全局安装，所以不执行。

在根目录创建文件 plopfile.js，加入内容如下：

export default function (plop) {
  // 在这里创建你的生成器
  plop.setGenerator('basics', {
    description: '这是框架文件',
    prompts: [], // 提示数组
    actions: [], // 行为数组
  })
};

开始

在package.json/script中添加plop命令，创建时直接执行： npm run plop

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "plop": "plop" // 新增命令
  },

根目录下创建模板存放的文件夹 plopTemplate, 创建文件：basicVue3.hbs (这个模板用来生成基础的vue3单文件模板)

开始编写plopfile.js文件

export default function (plop) {
  // 基本vue3文件生成器
  plop.setGenerator('basicVue3', {
    description: '创建你的基础vue3模板文件',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: '请输入你要新建的文件名称',
      },
      {
        type: 'input',
        name: 'path',
        message: '请输入你要新建的文件存放的路径',
      },
      {
        type: 'input',
        name: 'componentName',
        message: '请输入你组件的名称',
      },
    ],
    actions: [{
      type: 'add',
      path: 'src/{{path}}/{{name}}.vue',
      templateFile: 'plopTemplates/basicVue3.hbs',
    }],
  })
};
// 这里输入了3个变量，文件名称、存放路径、组件名称

简单编写一下这个模板吧，basicVue3.hbs的内容如下：

<template>
  <div>基础文件模板</div>
</template>
<script>
export default {
  name: '{{componentName}}', // 会渲染成传入的componentName
}
</script>
<style lang="scss" scoped>

</style>

接下来执行 npm run plop, 然后按照提示输入，你就可以根据提示优雅的创建你的新文件啦～

可以多创建几个生成器，来对应不同的模板如下：

export default function (plop) {
  // 基本vue3文件生成器
  plop.setGenerator('basic', {
    description: '创建你的基础vue3模板文件',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: '请输入你要新建的文件名称',
      },
      {
        type: 'input',
        name: 'path',
        message: '请输入你要新建的文件存放的路径',
      },
      {
        type: 'input',
        name: 'componentName',
        message: '请输入你组件的名称',
      },
    ],
    actions: [{
      type: 'add',
      path: 'src/{{path}}/{{name}}.vue',
      templateFile: 'plopTemplates/basicVue.hbs',
    }],
  })

  // script setup生成器
  plop.setGenerator('setup', {
    description: '创建你的基础vue3模板文件',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: '请输入你要新建的文件名称',
      },
      {
        type: 'input',
        name: 'path',
        message: '请输入你要新建的文件存放的路径',
      },
    ],
    actions: [{
      type: 'add',
      path: 'src/{{path}}/{{name}}.vue',
      templateFile: 'plopTemplates/setupVue.hbs',
    }],
  })
};

执行的时候可以npm run plop setup指定你要使用的生成器，也可以直接npm run plop,然后再选择你要的生成器哈～
也可以在命令行中把你需要的变量传进去，比如： npm run plop setup --name HelloPlop --path pages 执行当前命令，就会在src目录下的pages文件夹创建一个 HelloPlop.vue文件。如图所示：

写在最后

是不是非常简单，快在你的项目里用起来吧～工作效率高，摸鱼时间才更多！摸起来，朋友！给老板打工赚到的钱都是你应得的，摸鱼赚到的钱就像白给的，还有什么比得到白给的钱更让人快乐的呢～～

摸鱼大法之plopjs——教会你如何快速根据模板生成新文件

plop工具使用

安装

开始

写在最后