用户工具

站点工具


前端可视化布局小调研

百度 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 快速生成简单的表单。

/opt/bitnami/dokuwiki/data/pages/技术/前端可视化布局.txt · 最后更改: 2021/01/28 02:46 由 superuser