Vue-cli4表单设计器：自定义el-button组件教程

本文档是关于"form-generator表单设计器API"的详细教程，它是一个基于Vue CLI 4开发的工具，特别强调了使用jsx技术，因此开发者需要对vuerender有深入的理解。对于初次接触二开（二次开发）的初学者来说，这个项目可能会有些挑战性。 该文档主要介绍了项目的四个组成部分：表单设计器、.vue代码生成器、.vue代码预览器以及表单JSON解析器。核心目标是让开发者能够利用这个工具自定义表单，例如添加el-button这一Element UI的全局注册组件。 首先，开发者在添加新的自定义组件时，需要确认组件是否已全局引入。如要添加的el-button，由于已随elementUI注册，无需额外引入。若遇到未注册的组件，需参考Vue官方文档中的组件注册方法。 步骤2详细描述了如何将el-button添加到表单设计器。在`src\components\generator\config.js`文件中，开发者需要创建一个新的布局型组件配置对象，包括自定义的`__config__`和`__slot__`属性。`__config__`用于定义组件的标签、显示标志、是否允许改变标签等信息，`__slot__`则定义默认的插槽内容。这里提到的`config.tagIcon`使用SVG图标，图标需要从iconfont下载并放置在指定文件夹。 然而，在初始步骤中，虽然左侧备选组件列表会显示出【按钮】组件，但实际显示的按钮并未显示文字，这是因为还需要进一步配置组件的其他属性，如`type`、`icon`、`round`、`size`和`disabled`等，这些属性都需要与el-button组件的官方属性保持一致。 此外，文档可能还包含了如何在代码预览器中查看效果、如何生成相应的.vue代码以及如何解析和使用表单JSON的教程。总体而言，这份API文档为开发者提供了一个完整的流程指导，帮助他们在form-generator表单设计器中灵活创建和管理自定义组件。通过学习和实践，开发者可以提升自己的Vue和jsx技能，同时熟悉这个表单设计工具的工作原理。