前端可视化布局小调研

百度 amis

https://baidu.gitee.io/amis/zh-CN/docs/start/getting-started

根据官网描述，使用 amis 的好处是

• 完全不需要懂前端
• 不受前端技术更新影响
• 可视化编辑

我的考虑

1. 文档完善，看起来靠谱，但仍然要考虑后续维护问题
2. 通过 json 生成页面，方便嵌入 React，不方便嵌入 Vue
3. 等同于学习一个看起来比较简单的新框架，但是学习成本肯定还是有的

实际情况

• 因为现在的系统使用 Vue，基于第二点所以不推荐
• 如果以后有新系统使用 react，可以从可视化编辑的角度考虑使用 amis，但是百度能维护多久也是个问题，以前用的一个 PWA 框架 lavas，现在两年没更新了
• 不依赖于 react 直接使用 amis 我暂时觉得是意义不大的时间投资

MagicalCoder 布局器

http://lowcode.magicalcoder.com/magicalcoder/index-element.html

• 直接生成框架代码（热门框架均可选择），直接复制到项目使用
• 编辑器操作略微不清晰
• 生成的文件不是单个 Vue 组件文件，脚本文件不容易维护

可以考虑使用布局器生成模板文件，脚本部分自己写

Form Generator

https://github.com/JakHuang/form-generator

• 编辑器功能清晰，容易操作，上手难度很低
• 可直接复制 vue 代码，也可以导出 json
• 只能生成表单
• 只能用于 element ui

适合现有场景，推荐使用，但缺点也很明显，只能生成表单

类似：https://github.com/dream2023/f-render

编辑器不错，但是需要额外添加插件才能使用

具体来说可能还是要实际写起来才知道，我个人感觉在比较复杂的页面直接在 element 官网找事例或者直接 copy 之前已经实现的类似页面再进行改动，需要的时间不会比可视化编辑多，毕竟可视化编辑之后拿过来其实还是有细节要自己写的；表格组件在可视化编辑意义也不大，毕竟数据获取配置也不共通；目前个人只推荐用 Form Generator 快速生成简单的表单。