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 # 根据提示输入模块名和文件夹名

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

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

相关推荐
小林学习编程几秒前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络3 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket