Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Curd CreateNew to Visual Studio Code? Get it now.
Curd Create

Curd Create

ued-team

|
515 installs
| (1) | Free
一键创建CRUD页面(增删改查页面),包括Vue、React
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Curd Create

🔜 提供基于 API 接口信息,快速创建 CRUD(增删改查) 场景页面的能力。🏃‍♀️

Curd Create

crud.png 常见的 CURD 页面如上图,一般包含【数据新增】【数据查询】【数据的表格展示】【数据编辑】【数据删除】等元素

main.png 本插件提供基于 API 接口信息,快速创建 CURD 场景页面的能力

入口

插件入口在资源管理器上点击右键,菜单中出现入口: entry.png

插件使用条件

本插件需要项目满足以下几个条件方可使用:

  1. 使用 Vue 框架项目;
  2. 安装 Ant Design of Vue;
  3. 安装 lodash;
  4. 安装 axios;

如何使用

配置接口

api.png 首先需要先配置页面相关的 CURD 接口,支持单个接口录入或导入 Swagger 配置文件/Postman 配置文件,具体录入方式类似 Postman 录入接口方式;

编辑读取接口

读取接口.png 选择数据的读取接口

读取接口字段.png 选择读取接口后,需要配置接口返回数据中代表数据源的字段

编辑新增接口

新增接口.png 选择数据的新增接口

新增加扣子段.png 选择新增接口后,需要配置新增接口中需要生成输入表单项的字段

编辑更新接口

更新接口.png 同上继续选择数据的更新接口,并配置更新接口中需要生成更新表单项的字段,同时配置字段与读取接口返回数据字段的映射

编辑删除接口

删除接口.png 最后选择数据的删除接口,并配置删除接口参数与读取接口返回数据字段的映射

效果预览

效果预览.png 完成相关接口的配置后,可以看到即将生成的页面的预览效果,确认效果后点击【生成页面】得到最终的代码页面

代码.png

更多

本插件是 FE Tools 插件包的一部分,请安装 FE Tools 插件包获取更完善的功能!

使用反馈

  • 使用上有问题?请到https://marketplace.visualstudio.com/items?itemName=ued-team.lb-curd-create&ssr=false#qna上反馈
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft