Ctrl ACV工程师的提效之路——plop自动生成代码

作为一名业务开发熟练的Ctrl ACV工程师,我每天的工作就是做业务需求,基本上都是表格增删改查,都是复制一下类似的代码,然后在这个基础上进行改动。久而久之,我发现每个人的代码都自成一派,交互方式也是千奇百怪。

为了解决交互一致的问题,我们需要有一个模板,包含了增删改查、导出导出等功能,每次功能都来源于这个模板,而不是复制粘贴已有的业务代码。

示例技术框架:vben-admin。Demo地址:github.com/beat-the-bu...

新建一个查询列表页,要复制三个文件:api、vue、data,也就是接口文件、Vue页面、data数据,然后修改引用路径、接口、字段名等等,都是Ctrl ACV的操作。

我们可以使用plop,最终实现的目标就是一个命令自动生成一个页面需要的所有结构。

  1. 安装好plop
bash 复制代码
npm install --save-dev plop
npm install -g plop
  1. 编写模板代码:

如图,关键在于 import { getList } from '/@/api/{{module}}/{{name}}Api.ts'; 这一段,这里的modulename都是变量,可以用命令行输入。

  1. 配置plopfile
js 复制代码
module.exports = function (plop) {
    // controller generator
    plop.setGenerator('pages', {
        description: '新建一个查询页',
        prompts: [{
            type: 'input',
            name: 'module',
            message: '输入模块名'
        }, {
            type: 'input',
            name: 'name',
            message: '输入功能名'
        }],
        actions: [{
            type: 'add',
            path: 'src/api/{{module}}/{{name}}Api.ts',
            templateFile: 'plop-templates/pages/api.ts'
        }, {
            type: 'add',
            path: 'src/views/{{module}}/{{name}}/index.vue',
            templateFile: 'plop-templates/pages/index.vue'
        }, {
            type: 'add',
            path: 'src/views/{{module}}/{{name}}/data.ts',
            templateFile: 'plop-templates/pages/data.ts'
        }]
    });
};
  1. 只需要在控制台输入命令,就能自动从模板里生成代码,并且引用关系也自动写好了,减少大量的复制粘贴操作。
bash 复制代码
plop pages manage user # 一次性输入
plop pages # 根据提示输入模块名和文件夹名

输入命令之后,自动在指定位置按照模板生成了文件,并且引用关系也自动写好了:

使用代码模板不仅仅是为了提升开发效率,更重要的目的是统一交互,至少保证新页面的代码都是规范的、交互一致的,我们需要不断完善这个模板。

相关推荐
枷锁—sha2 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha3 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜19 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2432 分钟前
html复习
javascript·microsoft·html
汉得数字平台37 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹44 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法