2023.3 拒绝重复搬砖！使用node来写个通用模板吧

拒绝重复搬砖！使用node来写个通用模板吧.jpeg

大家好，我是wo不是黄蓉

实际项目中我们经常写列表页，但是通常都是查询，列表，分页，操作，页面内容大概分为这几块，但是我们每次写得时候要么都得打开elementUI库，要么就是打开现有项目得页面复制粘贴，删删减减。虽然简单，但这也是浪费我们得时间，使用该配置至少可以帮助我们缩短1个小时得开发时间。

思路

思路主要来源于看elementUI库得源码，上一篇文章看完build-entry的代码后就对json-templater产生了兴趣，使用也比较简单，那为何不拿来用在我们项目中呢？

分析

在执行脚本文件里，读取到传参，以此来作为账单的文件夹命名

读取到组件名后，就是定义模板文件、生成config文件夹和form.js 和table.js文件。

实现功能

• 根据输入的指令生成模板文件并且在项目中能跑起来

进阶优化

• 根据输入的组件名生成组件
• 在指定目录生成组件
• 可选配置pageKey

终极版（大佬指导下提供的思路）

• 使用命令根据配置生成json配置
• 读取json配置实现页面展示

配置执行脚本

"scripts": {
    "create:component": "node build/bin/createBillTemplate.js component",
}

对应的就要在项目目录下新建build/bin/createBillTemplate.js文件

用到的一些包：

uppercamelcase将首字母大写

json-templater模板字符串替换

enquirer命令行交互工具

其他的就是一些基本的js操作和node api的使用

进阶版demo地址：github

终极版还在优化中，后续更新

使用方法见下图：

1675752760820.png

通过配置：组件名，相对路径，queryApi地址生成模板和表格表格模板文件

生成文件如下：

1675752867427.png

总结

对于技术没有那么敏感的人来说不是什么东西都是一学就会的，一会就会用的，所以我们需要花费比技术大佬们更多的时间去学习。没有思路可以多看看b站上的大佬们讲的视频，看的多了就会有自己的想法。