拒绝重复搬砖！使用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站上的大佬们讲的视频，看的多了就会有自己的想法。
网友评论