后台研发效率提升是一个永恒的话题，效率提升的基本思路离不开标准化、标准化对齐、跟进甚至智能化。主流的商用低代码平台基本上是希望将整个研发环节推向标准化、规范化，以达到提升效率的效果，但需求本身是在变化的，同时也会对低代码平台形成依赖.后续维护都需要依赖平台能力；所以今天要给大家介绍的不是传统主流的低代码平台，而是面向研发的代码可视化设计编辑平台；它更像是程序员的Dreamweaver和gui可视化编辑。它用来解决的问题是：不依赖低代码平台，二次开发可以无缝进入代码开发模式，支持所见即所得的可视化编辑，用于提高效率，提示开发体验提供物质生态，以及可以自定义素材，提升素材使用体验，提高复用率方案描述功能特性编辑反向定位支持从视图定位插入素材代码位置可视化插入素材删除视图移动视图编辑代码预览路由单页应用隔离路由跳转可拦截控制，其他与正常预览一致如何使用安装依赖npmi@mometa/editor-DUseantdmaterial在项目根目录下安装antdmaterialnpmi@mometa/materials-generator@mometa-mat/antd-D创建mometa-material.config.jsconst{resolveLibMatConfig}=require('@mometa/materials-generator')module.exports=[resolveLibMatConfig('antd')]也可以创建自己的材质库，数据结构规则见Material定义进入编辑器webpack.config.js，修改如下：constMometaEditorPlugin=require('@mometa/editor/webpack')module.exports={模块:{规则:[{测试:/\.(js|mjs|jsx|ts|tsx)$/,//注意，只需要处理你需要编辑的文件目录include:paths.appSrc,loader:require.resolve('babel-loader'),options:{plugins:[isEnvDevelopment&&require.resolve('@mometa/editor/babel/plugin-react')]}}]},插件:[isEnvDevelopment&&newMometaEditorPlugin()]}注意：使用时不需要开启官方预设的react-refresh。Mometa将默认启用react-refresh功能。启动webpack开发服务器。打开http://localhost:${port}/mometa/提供例子可以看出@mometa/app看到mometa是其他完整的开源实现。请不要吝啬你的点赞和星星。后面会出一篇文章详细介绍如何实现！敬请关注
