大家好，欢迎来到IT知识分享网。

一、安装

npm install --save-dev plop 

或者

yarn add plop --dev

二、建立代码模板

1、在项目根目录下新建plop-templates文件夹

目录结构 -plop-templates |-view |-index.hbs |-promp.js -plopfile.js

2、新建index.hbs

{{#if template}} <template> <div class="{{dashCase name}}">This is {{name }}page!</div> </template> {{/if}} {{#if script}} <script> export default { name: '{{ properCase name }}', props: {}, components:{}, data() { return {} }, computed:{}, created() {}, mounted() {}, beforeDestroy() {}, methods: {} } </script> {{/if}} {{#if style}} <style lang="scss" scoped></style> {{/if}} 

3、新建promp.js

module.exports = { description: 'generate a view',// 对该功能的描述 prompts: [{ type: 'input', // 交互类型，input:输入类型 name: 'name', // 问题对应得到答案的变量名，可以在actions中使用该变量 message: 'view name please', // 在命令行中给于客户的提示 }, { type: 'checkbox', name: 'blocks', message: 'Blocks:', choices: [{ name: '<template>', value: 'template', checked: true }, { name: '<script>', value: 'script', checked: true }, { name: 'style', value: 'style', checked: true } ], validate(value) { if (value.indexOf('script') === -1 && value.indexOf('template') === -1) { return 'View require at least a <script> or <template> tag.' } return true } } ], actions: data => { const name = '{{name}}' const actions = [{ type: 'add', // 操作类型，这里是添加文件 path: `src/views/${name}/index.vue`, // 添加的文件的路径 templateFile: 'plop-templates/view/index.hbs', // 模板文件的路径 data: {// 变量数据 name: name, template: data.blocks.includes('template'), script: data.blocks.includes('script'), style: data.blocks.includes('style') } }] return actions } } 

4、在项目根目录下新建plopfile.js

const viewGenerator = require('./plop-templates/view/prompt') module.exports = plop => { plop.setGenerator('view', viewGenerator) }

三、添加脚本

package.json中添加脚本命令

"scripts": { "new": "plop" },

四、生成代码

npm run new 或者 npm run new view 或者 npm run new view “my-home”

五、修饰符

ccamelCasse：将字符串转为驼峰表示法 snakeCase：下划线表示法 dashCase/kebaCase：短划线表示法 dotCase: 点语法表示法 pathCase:路径表示法 properCase/pascalCase 单词首字母大写表示法 lowerCase 小写表示法 sentenceCase: 整句首字母大写法 constantCase: 全部大写下划线连接 titleCase 标题表示法