无码人妻丰满熟妇奶水区码,麻豆一区区三,亚洲日韩欧美精品综合,亚洲无码地址

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

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

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

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

它用于解決的問題有:

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

功能特性

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

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

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

使用場景

新開發(fā)一個頁面

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

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è)計編輯平臺mometa(可視化代碼編輯器)

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

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

  • 刪除視圖

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

  • 移動視圖

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

  • 編輯代碼

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)


預(yù)覽

  • 物料預(yù)覽

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

  • 響應(yīng)式布局

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

  • 路由模擬

面向研發(fā)的、代碼可視設(shè)計編輯平臺mometa(可視化代碼編輯器)

如何使用

由于 mometa 依賴本地開發(fā)環(huán)境,只使用在本地開發(fā)環(huán)境,所以沒有搭建在線 demo;在本地開發(fā)的時候可以進(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 }) ]}

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

啟動 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)僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 舉報,一經(jīng)查實(shí),本站將立刻刪除。

(0)
上一篇 2024年7月6日 上午10:14
下一篇 2024年7月6日 上午10:38

相關(guān)推薦

  • 擴(kuò)大試點(diǎn)“揭榜掛帥”“賽馬制”上海將探索科研項(xiàng)目組織實(shí)施新模式

    在昨天的市政府新聞發(fā)布會上,上海市科委主任張全表示,“十四五”期間,上海將全力打造國家戰(zhàn)略科技力量,持之以恒加強(qiáng)基礎(chǔ)研究,加快創(chuàng)新人才集聚和培育,深化科技體制機(jī)制改革,主動融入國際…

    2022年5月19日
    530
  • 如何理解項(xiàng)目質(zhì)量管理?(如何理解項(xiàng)目質(zhì)量管理)

    在我們?nèi)粘I钪校瑹o論是購買產(chǎn)品、享受服務(wù),還是參與各種活動,我們都會關(guān)注一個核心問題——質(zhì)量。那么,什么是質(zhì)量呢?簡單來說,質(zhì)量就是完成的結(jié)果所應(yīng)該達(dá)到的要求。在國際標(biāo)準(zhǔn)化組織(…

    科研百科 2024年2月17日
    117
  • 傳統(tǒng)項(xiàng)目管理的特點(diǎn)

    傳統(tǒng)項(xiàng)目管理的特點(diǎn) 傳統(tǒng)項(xiàng)目管理是一種較為普遍的項(xiàng)目管理方法,適用于許多不同的項(xiàng)目,包括建筑、工程、制造、醫(yī)療等等。與傳統(tǒng)項(xiàng)目管理相比,現(xiàn)代項(xiàng)目管理方法更加注重敏捷、協(xié)作、風(fēng)險和成…

    科研百科 2024年8月16日
    17
  • 咸陽科研項(xiàng)目申請時間表

    咸陽科研項(xiàng)目申請時間表 咸陽市位于中國陜西省中部,是中國重要的科技創(chuàng)新中心之一。近年來,咸陽市一直在加大對科技創(chuàng)新的投入力度,鼓勵企業(yè)和科研機(jī)構(gòu)合作開展科研項(xiàng)目。 以下是咸陽市最新…

    科研百科 2025年5月6日
    3
  • 項(xiàng)目制工時管理系統(tǒng)

    項(xiàng)目制工時管理系統(tǒng) 隨著現(xiàn)代項(xiàng)目管理的日益普及,項(xiàng)目制工時管理系統(tǒng)已經(jīng)成為了許多組織中必不可少的工具。項(xiàng)目制工時管理系統(tǒng)可以幫助項(xiàng)目經(jīng)理和團(tuán)隊(duì)成員更好地管理項(xiàng)目進(jìn)度和資源,提高項(xiàng)目…

    科研百科 2024年12月24日
    1
  • 工程項(xiàng)目管理可視化看板

    工程項(xiàng)目管理可視化看板是一種通過圖表和圖形等方式,將工程項(xiàng)目管理中的數(shù)據(jù)可視化展示,幫助管理人員更好地理解和分析項(xiàng)目進(jìn)展和數(shù)據(jù)的方法。在這篇文章中,我們將探討工程項(xiàng)目管理可視化看板…

    科研百科 2025年1月8日
    7
  • 備受你嫌棄的無代碼開發(fā),它來了(無代碼開發(fā)是什么意思)

    IT發(fā)展風(fēng)起云涌,新技術(shù)層出不窮,即便引發(fā)討論,很快會歸于平靜。 詭異的是,2018年西門子以7億美元巨資收購Mendix低代碼平臺,隨后無代碼開發(fā)平臺Airtable完成2.7億…

    科研百科 2024年5月14日
    41
  • 科研項(xiàng)目管理 年度總結(jié)

    科研項(xiàng)目管理年度總結(jié) 隨著科技的不斷發(fā)展,科研項(xiàng)目管理也在不斷地變革和進(jìn)步。在過去的一年里,我們團(tuán)隊(duì)在科研項(xiàng)目管理方面取得了一些顯著的成就,以下是我們的年度總結(jié)。 一、項(xiàng)目計劃和管…

    科研百科 2025年3月26日
    5
  • 科研項(xiàng)目包材預(yù)算

    科研項(xiàng)目包材預(yù)算 科研項(xiàng)目包材預(yù)算是指在科研項(xiàng)目中,用于包裝和展示科研材料的預(yù)算。合理的科研項(xiàng)目包材預(yù)算對于成功的科研項(xiàng)目至關(guān)重要。以下是一些影響科研項(xiàng)目包材預(yù)算的因素: 1. 項(xiàng)…

    科研百科 2025年3月13日
    5
  • 進(jìn)度報表軟件

    進(jìn)度報表軟件:讓進(jìn)度管理更高效 隨著企業(yè)規(guī)模的不斷擴(kuò)大,進(jìn)度管理已經(jīng)成為了企業(yè)管理中不可或缺的一部分。但是,傳統(tǒng)的進(jìn)度管理方式往往需要大量的手動記錄和追蹤,而且容易出錯,效率低下。…

    科研百科 2025年1月12日
    3