一、form-generator是什么?✨ ⭐️ 🌟
form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。
但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零开始扩展每一个组件。
扩展主要包含Element UI中的卡片、步骤条、table列表、折叠面板、树形控件以及自定义组件等等10余个组件的详细扩展方法。
其中不包含子表单、表格布局。因为这两个组件涉及到的代码量实在很大,没办法写博文。感兴趣的小伙伴可以看看大概的效果form-generator扩展原生表格,element-table,子表单。
这一章只讲解如何从零开始将form-generator项目集成到其他项目中。
二、form-generator项目结构 💎 💎 💎
项目结构主要由 拖拽 ➕ 浏览(运行) ➕ parser解析器
1、拖拽 👇 👇
views/index/home.vue页面就是整个拖拽的入口。
由左侧可拖拽组件(components/generator/config.js)
中间可视化区域(src/views/index/Drag