一起来从 0 到 1 开发可视化搭建项目吧！

前言

笔者最近写了本关于可视化搭建方向的掘进小册，直接放链接： https://juejin.cn/book/6930553086918262798 同时为大家准备了 50 个 5 折 优惠码，数量有限，先到先

小册介绍

在当下业务需求迭代飞快的互联网环境下，如何助力业务，为业务快速试错、迭代提供基础支持是不可规避的挑战之一。这其中最重要的一环就是“快”。有的时候为了满足业务诉求，我们不得不重复去开发一些活动页。所以你可能和我一样，非常想通过一款可以由运营自主组装页面的工具来自动生成页面，规避掉重复、无技术含量的劳动。

相比业界现状，不管在阿里还是腾讯等大厂都有适配自己内部业务诉求场景的一套可视化搭建体系。实现细节虽然有着出入但是核心思想都是希望把原本由开发人肉堆代码的活，通过可视化的方式表达给运营同学使用。或者通过 lowcode 的形式减少开发者的重复劳动。因为与业务相关，所以基本上都不会开源。而现在大多数开源的可视化搭建项目，也只是实现了部分可视化搭建的能力，并不能完全结合业务场景使用。

笔者希望借这本小册，一方面为没有接触过可视化搭建的同学提供一个解决问题的思路和方法。 另一方面本小册将会从背景到架构设计再到技术实现细节来一步步介绍如何落地一个围绕业务场景的可视化搭建需求。

作者介绍

muwoo，前端攻城狮。之前在 51 信用卡 搞过一年的可视化搭建平台鲁班，半年内发布了 1000+ 活动页。后面辗转反侧去了蚂蚁集团，接触到内部的云凤蝶项目，对自己的可视化搭建理念产生了一定的影响。现在团队内也落地了一套可视化搭建体系，也是踩过了颇多的坑。

你可以在这里找到我

Github: https://github.com/muwoo

知乎： https://www.zhihu.com/people/monkey-wang-

小册目录

• <input checked="" disabled="" type="checkbox"> 1. 前言：可视化搭建诞生背景
• <input checked="" disabled="" type="checkbox"> 2. 架构设计
• <input checked="" disabled="" type="checkbox"> 3. 前置基础知识准备
• <input checked="" disabled="" type="checkbox"> 4. 模板设计
• <input checked="" disabled="" type="checkbox"> 5. 模板通信设计
• <input checked="" disabled="" type="checkbox"> 6. 模板动态化设计
• <input checked="" disabled="" type="checkbox"> 7. 稳定性-模板更新策略
• <input checked="" disabled="" type="checkbox"> 8. 全局组件设计
• <input checked="" disabled="" type="checkbox"> 9. 全局组件注册
• <input checked="" disabled="" type="checkbox"> 10. 稳定性-组件更新策略
• <input checked="" disabled="" type="checkbox"> 11. 设计实现 CLI 为开发助力
• <input checked="" disabled="" type="checkbox"> 12. 可视化编辑区实现
• <input checked="" disabled="" type="checkbox"> 13. 可视化编辑区 mock&预览
• <input checked="" disabled="" type="checkbox"> 14. vue3 Form render 实现
• <input checked="" disabled="" type="checkbox"> 15. Server 端编译实现
• <input checked="" disabled="" type="checkbox"> 16. 发布流程设计
• <input checked="" disabled="" type="checkbox"> 17. 写在最后
• <input checked="" disabled="" type="checkbox"> 18. 加餐：当前可视化搭建未解决的问题
• <input checked="" disabled="" type="checkbox"> 19. 加餐：H5 可视化搭建项目如何在本地跑起来

你会学到什么？

• 可视化搭建的历史背景和方向选择
• 了解可视化搭建的技术设计思想
• 可视化搭建的编辑区设计
• 可视化搭建动态表单设计
• 可视化搭建模板的设计
• 可视化搭建组件设计
• 可视化搭建 CLI 设计
• 可视化搭建发布流
• 可视化搭建页面更新策略和版本设计
• 可视化搭建页面的未来发展方向

适宜人群

• 熟悉常用的 js 框架 Vue 或者 React
• 对 h5 可视化搭建有兴趣的前端开发者