亚洲熟妇av一区二区三区,久久久久久精品观看sss,免费观看四虎精品国产永久,国产成人精品一区二三区熟女,天堂网在线最新版www资源网

  1. 科研云首頁
  2. 科研百科

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

投稿用戶 ? ? 科研百科 ? 閱讀 180

《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)面向研發(fā)的低代碼元編程，代碼可視編輯，輔助編碼工具——mometa。

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

mometa 定位更多是基于程序員本地開發(fā)的模式，新增了可視化編碼的能力，修改的也是本地的代碼文件本身，它更像是輔助編碼工具，而不是 No-Code (amis/云鳳蝶) 的平臺(tái)方案。

它用于解決的問題有：

  • 對(duì)低代碼平臺(tái)不形成依賴，二次開發(fā)可以無縫進(jìn)入代碼開發(fā)模式
  • 同時(shí)支持所見即所得的可視化編輯，用于提效，提升開發(fā)體驗(yàn)
  • 提供物料生態(tài)，可自定義物料，提升物料使用體驗(yàn)，提升復(fù)用率

功能特性

  • 面向研發(fā)的代碼可視化編輯，直接作用于源碼：

① 響應(yīng)式布局、路由模擬、物料預(yù)覽 ② 反向定位（視圖定位源碼）③ 拖拽插入物料 ④ 拖拽移動(dòng) ⑤ 上下移動(dòng) ⑥ 刪除 ⑦ 替換 ⑧ 層級(jí)選擇

  • 開放物料生態(tài)，可定制團(tuán)隊(duì)內(nèi)物料庫，見 mometa-mat
  • 多語言、多生態(tài)支持，目前暫只支持 React，后續(xù)有計(jì)劃支持 Vue
  • 接入友好，Webpack>=4 插件化接入
  • 開發(fā)友好，物料庫支持熱更新，不破壞已有開發(fā)模式

使用場景

新開發(fā)一個(gè)頁面

1、使用團(tuán)隊(duì)開發(fā)指令，新增一個(gè)空的占位路由 & 頁面

2、進(jìn)入 mometa，查看本地物料，和遠(yuǎn)端物料市場，選中自己需要的物料，直接拖拽，基本成型的頁面布局完成

3、進(jìn)入 ide，完成數(shù)據(jù)聯(lián)調(diào)，數(shù)據(jù)傳遞等，源碼開發(fā)

已有歷史項(xiàng)目，需要迭代功能，只在某一小塊 ui 模塊內(nèi)

1、進(jìn)入 mometa，物料操作插入

2、反向定位直接進(jìn)入 ide 源碼開發(fā)

操作演示

編輯

  • 反向定位：支持從視圖定位代碼位置

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

  • 插入物料：可視化插入物料

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

  • 刪除視圖

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

  • 移動(dòng)視圖

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

  • 編輯代碼

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

預(yù)覽

  • 物料預(yù)覽

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

  • 響應(yīng)式布局

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

  • 路由模擬

面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)mometa（可視化代碼編輯器）

如何使用

由于 mometa 依賴本地開發(fā)環(huán)境，只使用在本地開發(fā)環(huán)境，所以沒有搭建在線 demo；在本地開發(fā)的時(shí)候可以進(jìn)行使用：

git clone https://github.com/imcuttle/mometa.gitcd mometapnpm installpnpm run start:app:cr # 開啟本地開發(fā)預(yù)覽模式

  • 安裝依賴

npm i @mometa/editor -D

  • 使用 antd 物料

1、安裝 antd 物料

npm i @mometa-mat/antd -D

2、在項(xiàng)目根目錄中創(chuàng)建 mometa-material.config.js

module.exports = [require('@mometa-mat/antd').default]

你也可以創(chuàng)建自己的物料庫，數(shù)據(jù)結(jié)構(gòu)規(guī)則見 Material 定義： https://github.com/imcuttle/mometa/blob/master/packages/materials-generator/src/types.ts

  • 接入編輯器

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: true, // 開啟物料預(yù)覽 experimentalMaterialsClientRender: true }) ]}

注意：使用時(shí)，不需要開啟官方預(yù)設(shè)的 react-refresh，mometa 默認(rèn)會(huì)開啟 react-refresh 能力

啟動(dòng) webpack dev server，開啟 http://localhost:${port}/mometa/ 即可

提供的例子可見： https://github.com/imcuttle/mometa/tree/master/packages/app

此項(xiàng)目使用MIT開源協(xié)議，更多內(nèi)容大家可自行前往閱讀。

開源地址：https://github.com/imcuttle/mometa

版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。

贊 (0)
上一篇 2024年1月17日 am10:18
下一篇 2024年1月17日 am10:34

相關(guān)推薦