关于前端:面向研发的低代码代码可视化设计编排

37次阅读

共计 1205 个字符,预计需要花费 4 分钟才能阅读完成。

背景

研发提效是亘古不变的话题,提效的基本思路离不开向 标准化、规范化 对齐,后续甚至走向 智能化

支流的商业化低代码平台,根本就是心愿将研发全链路都推向标准化、规范化,来达到提效的成果,然而对于需要自身是变动的,同时会造成对低代码平台的依赖,后续保护均须要依赖平台能力实现;

所以明天跟大家介绍的不是传统支流的低代码平台,介绍的是面向研发的、代码可视设计编辑平台;它更像是 dreamweaver、gui 可视编辑 之于 程序员。

它用于解决的问题有:

  1. 对低代码平台不造成依赖,二次开发能够无缝进入代码开发模式
  2. 同时反对所见即所得的可视编辑,用于提效,提醒开发体验
  3. 提供物料生态,可自定义物料,晋升物料应用体验,晋升复用率

计划阐明

性能 & 个性

编辑

反向定位

反对从视图定位代码地位

插入物料

可视化插入物料

删除视图

挪动视图

编辑代码

预览

路由隔离

单页利用中的路由跳转可能进行拦挡管制,其余和失常预览保持一致

如何应用

装置依赖

npm i @mometa/editor -D

应用 antd 物料

  1. 装置 antd 物料
npm i @mometa/materials-generator @mometa-mat/antd -D
  1. 在我的项目根目录中创立 mometa-material.config.js
const {resolveLibMatConfig} = require('@mometa/materials-generator')

module.exports = [resolveLibMatConfig('antd')]

你也能够创立本人的物料库,数据结构规定见 Material 定义

接入编辑器

webpack.config.js 批改如下:

const MometaEditorPlugin = require('@mometa/editor/webpack')

module.exports = {
  module: {
    rules: [
      {test: /\.(js|mjs|jsx|ts|tsx)$/,
        // 留神,只须要解决你须要编辑的文件目录
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
        }
      }
    ]
  },
  plugins: [isEnvDevelopment && new MometaEditorPlugin()]
}

留神:应用时,不须要开启官网预设的 react-refresh,mometa 默认会开启 react-refresh 能力

启动 webpack dev server,开启 http://localhost:${port}/mometa/ 即可

提供的例子可见 @mometa/app

其余

残缺开源实现见 mometa,请不要悭吝你的点赞与 star,前面会产出文章具体阐明如何实现!继续关注

正文完
 0