🛫 导读

需求

工作需要，用到了ant-design-vue，作为没接触过ant-design的小白，以新人角度来记录学习过程。

开发环境

	版本号	描述
文章日期	2022-12-15
操作系统	Ubuntu 20.04.4 LTS	CSDN开发云
node -v	v16.17.0	npm -v （8.15.0）
Cloud IDE	1.71.0

1️⃣ ant-design生态

ant-design主页可以简单看下其庞大的生态体系（相对于Element，资料丰富很多）。

ant-design

目前已经是5.0.7版本了。
助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～

• 定制主题，随心所欲
  • Ant Design 5.0 开放更多样式算法，让你定制主题更简单
• 组件丰富，选用自如
  • 大量实用组件满足你的需求，灵活定制与拓展
• 设计语言与研发框架
  • 配套生态，让你快速搭建网站应用
    

资料

• ant-design主页： https://ant.design/index-cn
• 组件文档：https://ant.design/components/overview-cn/

ant-design-vue

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。对标element-ui。

功能特点

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Vue 组件。
• 共享Ant Design of React设计工具体系。

资料

• ant-design-vue主页： https://www.antdv.com/docs/vue/introduce-cn
• 组件文档：https://www.antdv.com/components/overview-cn

ant-design-pro

开箱即用的中台前端/设计解决方案。对标vue-element-admin，资料更丰富。

资料

• ant-design-pro主页： https://pro.antdv.com/
• 文档：https://pro.antdv.com/docs
• 组件文档：https://pro.antdv.com/components

2️⃣ 表单设计器

懒是人类进步的动力，为了人类进步，我找几款表单设计器，进一步解放双手。
另一方面，可以比对正确的代码编写，快速入手ant-design组件。

form-render - 阿里团队开源表单设计器，自家 Antd UI 框架友好

FormRender 是阿里旗下的飞猪 app 的表单生成方案，从 2017 年在内部开始使用到 2019 年正式对外开源，FormRender 经历了多个阿里大项目的迭代和升级，细节已经相当全面。

功能特点

• 支持阿里旗下的 Ant Design 和 Alibaba Fusion Design
• 功能逻辑清晰，快速部署
• 阿里旗下 20 多个业务线正在使用
• 支持表格校验、自定义嵌套、样式，可拖拽生成表单

资料
git地址：https://github.com/xaboy/form-create
工具地址：https://xrender.fun/generator/playground
文档地址：https://xrender.fun/

form-create - 支持Vue3 及 ElementPlusUI、AntDesign、iview 框架

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持 3 个UI框架，并且支持生成任何 Vue 组件。内置 20 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

form-create 功能特点

• 全面支持 Vue 3
• 支持市面上 3 种主流框架 ElementPlusUI、AntDesign、iview
• 支持使用 json 数据生成表单
• 支持生成任何组件，提升表单的灵活性，可以实现功能更复杂的表单
• 内置组件缓存功能，提升渲染速度
• 双向数据绑定，生成规则变化后，页面会实时更新

资料
git地址：https://github.com/xaboy/form-create
工具地址：http://form-create.com/designer/
文档地址： http://form-create.com/v2/ant-design-vue/

Form Generator Antdv

Ant Design Vue表单设计及代码生成器

资料
git地址：https://gitee.com/fuzui/form-generator-antdv
工具地址：http://form-create.com/designer/
文档地址： https://1x.antdv.com/docs/vue/introduce-cn/

k-form-design

基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速

资料
github地址：https://github.com/Kchengz/k-form-design
gitee地址：https://gitee.com/kcz66/k-form-design
工具地址：http://cdn.kcz66.com/k-form-design.html
文档地址： http://kcz66.gitee.io/k-form-design

v-form-antd

v-form-antd是使用伪vue3开发的低代码可视化表格设计器，支持自定义组件、表单联动等高级功能。

资料
github地址：https://github.com/Alfred-Skyblue/v-form-antd
gitee地址：https://gitee.com/yuan_fangY/v-form-antd
工具地址：https://yuan_fangy.gitee.io/v-form-design/
文档地址： https://yuan_fangy.gitee.io/v-form-antd/

🛬 文章小结

前端技术千变万化，上面也只是资料的汇总，真的需要使用的也只是其中的一部分。
目前小编用到是ant-design-vue和Form Generator Antdv。Form Generator Antdv能生成组件代码，而其它几个表单设计器都是直接生成json的数据了，不适合初学者。

📖 参考资料

• ant-design主页 https://ant.design/index-cn
• ant-design-vue https://www.antdv.com/components/overview