头图

Visual coding! Front-end seamless access code visual editing

moyuyc
中文

background

R&D efficiency improvement is an eternal topic. The basic idea of efficiency inseparable from 161cfd3796caf2 standardization, standardized alignment, and subsequent intelligent .

The mainstream commercial low-code platform basically hopes to standardize and standardize the entire R&D link to achieve the effect of improving efficiency, but the demand itself changes, and it will form a dependence on the low-code platform, and subsequent maintenance All need to rely on platform capabilities to achieve;

So what I will introduce to you today is not the traditional mainstream low-code platform, but the R&D-oriented, code visual design editing platform; it is more like dreamweaver, gui visual editing for programmers.

The problems it is used to solve are:

  1. No dependence on low-code platforms, secondary development can seamlessly enter the code development mode
  2. At the same time, it supports WYSIWYG visual editing to improve efficiency and prompt development experience
  3. Provide material ecology, customize materials, improve material usage experience, and increase reuse rate

plan description

image.png

Functions & Features

edit

Reverse positioning

Support locating code position from view
mometa-locate.gif

Insert material

Visually insert materials
mometa-insert-material.gif

Delete view

mometa-delete.gif

Mobile view

mometa-move.gif

Edit code

mometa-edit.gif

Preview

Route isolation

The route jump in the single-page application can be intercepted and controlled, and the others are the same as the normal preview

mometa-preview-url.gif

how to use

Installation dependencies

npm i @mometa/editor -D

Use antd material

  1. Install antd materials
npm i @mometa/materials-generator @mometa-mat/antd -D
  1. mometa-material.config.js in the project root directory
const { resolveLibMatConfig } = require('@mometa/materials-generator')

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

You can also create your own material library, see Material definition

Access editor

webpack.config.js amended as follows:

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()]
}

Note: When using, there is no need to enable the official default react-refresh, mometa will enable the react-refresh capability by

Start webpack dev server, open http://localhost:${port}/mometa/

The provided example can be seen at @mometa/app

other

For the complete open source implementation, see mometa , please don’t be stingy with your likes and stars, there will be articles detailing how to achieve it later! stay tuned

阅读 5.6k

墨鱼碎碎念
包括技术,总结,项目说明,分享等

前端学生

1.1k 声望
260 粉丝
0 条评论

前端学生

1.1k 声望
260 粉丝
文章目录
宣传栏