Welcome to element-checklist 👋

checklist工作流，快速创建 element-ui 组件并生成对应代码。

思想：基于 element-ui，通过勾选和输入的UI交互来设置组件属性，利用checklist过一遍每一项，然后输出代码即可。

特点：用于新建组件；标准化；控制代码质量

🏠 Homepage

• 演示 @gitee
  • 演示 @github（内容同）

• 代码仓库 @gitee
  • 代码仓库 @github（内容同）

Install and Bootup

npm install -g element-checklist
e-checklist serve
# or give a try in a project:
npm install --save-dev element-checklist
# 同时开启前后端：(若后端未启动会导致前端启动失败)
npx e-checklist serve

How to Use

表单

一份 elment-ui 表单(el-form)有2处需要编辑设置的地方：

• el-form本组件的属性。例如：
  • 表单对象名
  • 表单的 Ref 名（用于表单验证）
  • 等等
• 表单项(el-form-item)

通过左栏的操作，添加 表单项 到中栏，方式有2种：

• 一项项地点击添加
• 由JSON/对象转化(批量添加)

由JSON/对象转化：你可以对后端接口返回字段稍作修改，粘贴至 JSON 输入框中再一键生成，支持嵌套的格式。(可以是json格式，也可以是JS对象格式)

此处格式约定了是 value:label 这样的结构，value 也就是该el-form-item的字段名，label 作为el-form-item的 label 属性。

{
  id: "商品ID",
  name: "商品名称",
  store: {
    name: "所属店铺名称",
    id: "店铺id"
  }
}

然后点击生成表单即可，默认生成 InputTrim 这类，可在右栏el-form-item的编辑区修改其类型。

表格

将后端接口返回字段粘贴至 JSON 输入框中，一键生成表格，然后编辑表格头等信息即可。

功能汇总

• 在线预览代码

  • 代码输出本地：如果npm install了，在本地启动该npm包内的后端可以把代码文件输出到本地(待优化)
  • 

• 将后端JSON接口返回字段，稍作修改，粘贴生成出组件的代码框架

• 用UI交互来取代代码的编写：明显比直接编辑器编写代码快

• 支持为组件标注注释：这样方便先写TODO来记住后续需要如何修改

• 支持admin前后端代码一起生成

模块方面：

• 表单 el-form：组件属性、控件供选项的设置
  • 支持表单校验的JS逻辑
  • 支持表单文字提示和校验错误提示一起显示的HTML逻辑
• 表格 el-table：组件属性
  • el-table组件本身属性的设置
  • 支持表格字段HTML灵活转为template格式
  • 支持判断表格字段是否为查询字段(待完善)
• 在线代码编辑器
  • 支持多开浏览器tab间同步代码结果

Author

👤 az22c

• Github: @AlexZhong22c

Support

Give a ⭐️ if the project inspired you!

备注：

太久没更新了。node ≥ 14