【告别复制粘贴】动态模板生成小技巧

prefix: 代码片段名字，即输入此名字就可以调用代码片段body: 这个是代码段的主体.需要编写的代码放在这里    $1: 生成代码后光标的初始位置$2: 生成代码后光标的第二个位置,按 tab 键可进行快速切换,还可以有 $3,$4,$5.....${1,字符}: 生成代码后光标的初始位置（其中 1 表示光标开始的序号，字符表示生成代码后光标会直接选中字符）description: 代码段描述,输入名字后编辑器显示的提示信息tab键制表符:\t换行: \r 或者\n

{ "Print to console": {  "prefix":"vue",  "body": [   "<template>",   "\t<div>test</div>",   "</template>",   "<script>",   "export default{",    "\tmounted(){$1},",    "\tcomponents: {},",    "\tdata() {",    "\t\treturn {",    "\t\t};",    "\t},",    "}",   "</script>",   "<style lang='less'>",   "</style>"  ],  "description": "vue-template" }}

module.exports = function(plop){  plop.setGenerator('test',{ // 这里的 test 是一个自己设定的名字，在执行命令行的时候会用到      description: 'generate a test', // 这里是对这个plop的功能描述      prompts: [        {          type: 'input', // 问题的类型          name: 'name', // 问题对应得到答案的变量名，可以在actions中使用该变量          message: 'view name please', // 在命令行中的问题          default: 'test' // 问题的默认答案        }      ],      actions: data => {          const name = '{{name}}';          const actions = [          {              type: 'add', // 操作类型，这里是添加文件              path: `src/views/${name}/index.vue`, // 模板生成的路径              templateFile: 'plop-templates/view/index.hbs', // 模板的路径              data: {                name: name              }          }        ];        return actions;      }    });}

<template>  <div /></template>
<script>  export default {    name: '{{ properCase name }}',    props: {},    data() {      return {}    },    created() { },    mounted() { },    methods: {}  }</script>
<style lang="less">
</style>

"script":{    ...,    "new":"plop"}

// plopfile.js 文件module.exports = function(plop){  plop.setGenerator('test',{      description: 'generate a test',      prompts: [        {          type: 'input',          name: 'name',          message: '请输入文件夹名称',        },        {          type: 'input',          name: 'less',          message: '需要less文件吗？(y/n)',        }      ],      actions: data => {        const name = '{{name}}';        let actions = [];        if (data.name) {          actions.push({            type: 'add',            path: `src/${name}/index.vue`, // 文件生成后所在的位置            templateFile: 'plop-templates/view/index.hbs', // 模板路径            data: {              name: name            }          });        }        if (data.less === 'y') {          actions.push({            type: 'add',            path: `src/${name}/index.less`, // 文件生成后所在的位置            templateFile: 'plop-templates/index.less', // 模板路径          })        }        return actions;      }    });  }

// plopfile.js 文件module.exports = function(plop){  plop.setGenerator('test',{      description: 'generate a test',      prompts: [        {          type: 'input',          name: 'pageName',          message: '请输入文件夹名称',        },        {          type: 'input',          name: 'less',          message: '需要less文件吗？(y/n)',        },{          type: 'confirm',          name: 'hasNavbar',          message: '需要页面导航栏吗？(y/n)',          default: this.hasNavbar        }      ],      actions: data => {        const { pageName, less, hasNavbar } = data;        const name = '{{pageName}}';        let actions = [];        if (pageName) {          actions.push({            type: 'add',            path: `src/${name}/index.vue`,            templateFile: 'plop-templates/view/index.hbs',            data: {              name: name,              hasNavbar: hasNavbar, // 是否有操作按钮            }          });        }        if (less === 'y') {          actions.push({            type: 'add',            path: `src/${name}/index.less`,            templateFile: 'plop-templates/index.less',          })        }        return actions;      }    });  }

// hbs 文件<template>  <div>    {{#if hasNavbar}}      <div>导航栏</div>    {{/if}}  </div></template>
<script>  export default {    name: '{{ properCase name }}',    props: {},    data() {      return {}    },    created() { },    mounted() { },    methods: {}  }</script>
<style lang="less">
</style>