基于Vue实现可视化商城搭建平台，而开发仅针对平台维护、业务组件的添加和迭代。避免高频业务需求，提高我们的开发效率。本项目提供可视化搭建平台模板。您可以根据公司的实际需求进行修改，最终形成符合您实际需求的可视化搭建平台。接下来，我将带大家深入了解Mall-Cook可视化平台的原理和技术实现。Mall-Cook可视化平台预览如下：github地址：传送门预览地址：传送门开发前计划明确目标人群。在具体开发之前，我们首先要明确我们开发的平台是为谁开发的？是用于运营还是用于研发？研发人员适合低代码（low-codeplatform），非研发人员适合no-code（无代码平台）。我觉得两者最大的区别就是组件通信，也就是人们常问的组件如何交互？给大家举个低代码的栗子，推荐大家去了解一下云风蝶，我认为是最值得期待的中后台平台。平台理论可以对接任何组件库或NPM组件，平台使用强大的parser分析组件。组件通过外部状态进行通信，简单理解就是每个页面都有自己的vuex，可以自定义状态（变量）和方法，根据需要将状态和方法绑定到组件上，实现组件的交互。云峰蝶在知乎上有几篇介绍性的文章。云吞蝶yyds！无码先推荐正彩云的鲁班。有赞和微盟虽然是独角兽级别的模板，但是太大了，我也找不到核心架构的文章，无法深入理解。而鲁班向我详细讲解了视觉构建的核心，图式的作用和重要性，虽然规模和复杂程度无法与有赞和微盟相提并论，但却是教我的人。选择Canvas布局方案对于布局方案，我们只看两点之一，自由或方便，其他大多是噱头。自由布局适用于大屏和中后台系统，因为它的页面自由度高，素材可以相互重叠。那么为什么流体布局适用于H5和小程序呢？举个栗子吧。比如H5页面，根据网络接口实时查询你的商品列表。当产品数量发生变化，产品列表组件的高度发生变化时，我们使用流式布局来保证布局不会受到影响。其他布局：比如力帆科技提供了classfree布局。除了以上两种布局，其他布局想要实现的功能基本相同。支持父子组件之间嵌套，自由拖拽，颗粒化基础材质（文字，按钮）。看似功能齐全，实际操作起来却发现操作复杂不实用，只能自定义一些静态样式。这也是一个产品列表。我想通过拖放自定义单个项目的样式，或者我想在没有它的情况下为横幅图像添加文本。我发现这种动态组件只能通过配置项来设置。结论是实用性不高，但是搭建一个页面比简单的流式布局要复杂好几倍。对于布局，我只推荐流体布局和自由布局。大多数其他附加功能都是噱头而不是现实。具体附加功能根据实际场景而定。比如组件嵌套功能，我在页面配置中没有提供这个功能，这个也不是不可以，但是组件嵌套一般用在TAB列的容器中，每个TAB里面可以嵌套不同的组件，我认为为此实现提供无限嵌套页面组件的复杂逻辑是不值得的。在SchemaProtocolGenerator中，由于数据结构可以任意嵌套，所以提供了Object和Array对象类型的组件嵌套，例如props接收对象数组类型的数据。某个功能是否需要，要看实际的实际场景，不是我都要，越多越强大。对于用户来说，操作越简单越友好，可以看看有赞和微盟的解决方案。针对流式布局自由度受限的缺点，充斥着大量的业务组件和页面模板，目的是让用户的操作简单化。简单的流式布局可能看起来低，但操作越简单，对用户来说就越方便。我要做的是一个实用的工具，而不是一个花哨的玩具。确定可视化平台开发的核心什么是可视化平台开发的核心？是一个可拖动的组件列表，一个显示组件画布，一个组件属性控制面板组成的控制中心？是不是一套看起来眼花缭乱的布局方式？不，它是一个规范，一组规范。每一个成熟的可视化平台都会经历长期的迭代升级，之后会大量添加和迭代无数实用的业务组件。只有一套标准规范才能使平台健康成长，直至成熟稳定。那么如何定义规范呢？定义规范有什么用？先说最简单的，定义组件的规格。一个标题组件连接到平台，我不关心你的内部实现，我只关心你的道具输入参数，我怎么通过属性配置面板来控制你。原始方法编写一个配置面板，其中包含一个包含标题字段输入框的表单。高级方法为每个组件写一个JSON来描述组件的关键信息，并为其分配一张身份证供我们平台识别。//组件描述JSON{"label":"titlecomponent",//组件名称"icon":"icon-title",//组件图标"fields":{//组件属性"title":{//propertyname"label":"title",//属性标签"type":"string",//属性类型"value":"LEADINGSERIES"//属性初始值}}}一旦进入平台，我们解析JSON身份证获取组件信息。然后我们开发一个PropertyConfigurator，在组件信息中传入Property数据，通过PropertyConfigurator生成Propertycontrolpanel，采用先进的解耦和产业化的方式，实现大量的组件接入平台之后。但是，存在一个风险点，即JSON是不规则的。组件描述JSON应该按照平台设定的规则来编写才能被平台识别，所以我们需要用规则来规范JSON。解决办法就是通过JSONSchema协议来约束JSON，让它按照我们的标准来写。（平台Schema协议后面会详细解释）所以，我们定义的Schema协议是我们平台规范的一个工具，是我们可视化开发平台的核心。平台介绍Mall-Cook平台的目的是建立一个可视化的移动商城。商城建设过程模仿有赞和微盟。平台提供：可视化推送面板、流线布局、多页面构建、实时预览、H5页面适配、自定义底部tab菜单商品管理（现在是模拟商品，可以修改界面管理真实商品)商品分类管理，自定义商品分类页面模板商城Schema生成器，属性可视化生成控制面板平台快速查看魔方组件轮播组件商品组件保存商城商品分类实时预览模板商城项目结构├─h5//h5项目│├─api│├─assets│├─components│├─pages│├─router│├─store│├─utils│├─App.vue│└─main.js├─src//管理项目│├─api│├─assets│├─components│├─config//初始配置文件│├─custom-components//素材库│├─custom-schema-template//属性组件库│├─custom-schema-template-set//propertypanelbuilder│├─mixin│├─pages│├─router│├─scss│├─store│├─utils│├─App.vue│└─main.js├─package.json├─ftpUp.js//ftp上传文件└─webpack.config.js项目分为admin和h5两个项目包，package.json支持单独/联合打包，一键部署{"name":"mall-cook","version":"0.1.0","scripts":{"dev":"cross-envGZIP=falseTYPE=adminvue-cli-serviceserve",//adminstarts"dev:h5":"cross-envGZIP=falseTYPE=h5vue-cli-serviceserve",//h5starts"build:admin":"cross-envGZIP=trueTYPE=adminvue-cli-servicebuild--no-clean--modedevelopment--report",//adminpackage"build:h5":"cross-envGZIP=trueTYPE=h5vue-cli-servicebuild--no-clean--modedevelopment--report",//h5package"build:dev":"npmrunbuild:h5&&npmrunbuild:admin--modedevelopment",//admin&h5打包在一起"deploy":"npmrunbuild:dev&&nodeftpUp.js"//ftp部署-请在ftpUp.js中配置服务器信息},}JSONSchema基本类型已经到了栗子的链接。这是一个基本的属性Form表单。包括输入框、单选选择器、计数器，由各种元素组成接下来，我们用JSON表示元素来组装它们：复合类型组件除了基本类型外，往往还需要传入对象、数组、对象数组等复合类型。我们应该支持任何复合类型。再看导航栏数据列表：业务场景示例从上面我们知道了如何使用JSON来表示基本类型和复合类型数据，一个组件props可以接收任意数量任意类型的数据。接下来我们使用导航栏组件进行实际分析：导航栏组件接收styles(对象)、attrs(对象)、tabList(对象数组)props:{styles:{type:Object,default:()=>{}},attrs:{type:Object,default:()=>{}},tabList:{type:Array,default:()=>[]}}，我们一一细细看：那我们将接收到的数据合并在一起，连同组件的基本信息，就构成了一个描述组件的JSON。我们按照平台JSONSchema协议编写的标准JSON可以让平台识别组件信息，然后调用属性解析器生成属性控制面板来控制组件。Schema生成器JsonSchema要满足两点：定义JSON规则，约束JSON检查机制，检测当前JSON是否满足JsonSchema规则。虽然我们定义了JsonSchema，但是没有相应的检查机制。我怎么知道我写的JSON是否正确？此时我们应该继续开发一个验证器来验证JSON。不过，我选择了一个更高效的方法，开发一个Schema生成器，用工具来规则代码，避免复杂的json写法。,array)嵌套组成复合类型自动生成所有json，无需用户修改，直接引用json导入函数，可以导入生成的json进行重复修改。H5商城场景的项目模板，可以根据实际场景（如酒5、外卖等）克隆项目并修改逻辑。本项目的核心是实现从Schema生成到构建一整套可视化项目的标准，让大家明白Schema对于可视化平台的重要性。未来平台计划平台迭代会不断增加更多常用素材组件和商城逻辑，完善支持小程序。后期计划用uni-app替换H5项目，素材也搬入uni-app。利用多设备部署的uni-app一码开发特性，支持H5、小程序等多设备。npm组件注册后续会尝试实现npm组件在平台上的注册和加载。最头疼的应该是npm组件的版本管理，很有挑战性。（导入的自定义组件需要提供components.json的组件描述json来识别组件）最后，我对未来的规划：开发目的既然讲了宿主共享的前端基础设施，就想开发一个一组小型实用的基础设施项目。MALL-COOK开发的目的是构建可视化开发模板，其核心是一套从JsonSchema生成到页面构建的标准流程。具体的实际场景可以是商场、酒店、外卖等，也可以是活动页面的搭建。您可以根据自己公司的实际使用场景，DIY自己的xx可视化平台。就像鲁班在正财云实用一样，我也会在公司实施MALL-COOK，打造H5商城。未来计划MALL-COOK迭代开发提供小程序版本（uni-app）开发小程序配置商城，将Mall-Cook配置json传入项目生成小程序开发素材库（uni-app版），可在现有小程序中引入素材库，导入Mall-Cook配置Json，自定义构建单页迭代，提供海量业务组件。在其他基建项目的未来发展计划中，后台代码生成器（配置元素）可视化大屏构建平台（低优先级）等后续计划……（让我们完成前一部分）这是一小步我的前端基础设施梦想。如果觉得还可以，请给个star。谢谢
