(一)大概的步骤:
1.npm安装
2.创建plopfile.js配置文件(配置与步骤3中文件的对应关系)
3.创建相关模板文件
4.package.json中配置运行命令
(二)具体操作如下:
1.安装
npm install --save-dev plop
2.根目录添加plopfile.js文件
function validate(v) { if (/[[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s]+/.test(v)) { return "输入内容不能包含中文和空格"; } else { return true; } } module.exports = plop => { plop.setGenerator("vue", { description: "创建vue文件", prompts: [ { type: "input", name: "moduleName", message: "请输入模块名称", validate, }, { type: "input", name: "fileName", message: "请输入文件名称", validate, }, { type: "list", name: "path", choices: ({ moduleName, fileName }) => { return [`${moduleName}/${fileName}/index`, `${moduleName}/${fileName}`]; }, message: "请选择生成方式", }, { type: "list", name: "apiSty", choices: () => { return ["get_post", "restfule"]; }, message: "请选择生成API的风格,默认使用get_post风格", }, ], actions: (data) => { let { path, fileName } = data; let spePath = path.replace(/index$/, fileName); let apiTemplUrl = data.apiSty == "restfule" ? "plop-template/api_restful.hbs" : "plop-template/api_get_post.hbs"; // console.log(`output->path`, path) // console.log(`output->spePath`, spePath) const actions = [ { type: "add", path: `src/views/${path}.vue`, templateFile: "plop-template/vue.hbs", data, }, { type: "add", path: `src/api/${path}.ts`, templateFile: apiTemplUrl, data, }, { type: "add", path: `src/views/${spePath}.ts`, templateFile: "plop-template/vue-ts.hbs", data, }, ]; return actions; }, }); plop.setHelper("upperFirstCase", function (text) { return text.slice(0, 1).toUpperCase() + text.slice(1).toLowerCase(); }); }plopfile.js
3.根目录添加plop-template文件夹,按plopfile.js文件中配置的路径添加模板文件
4.package.json中配置运行命令
5.使用:
npm run plop
标签:return,plop,data,代码,fileName,path,type,模板 From: https://www.cnblogs.com/duanzhenzhen/p/17819417.html