é¢å‘ç ”å‘的低代ç 元编程（代ç å¯è§†åŒ–）能力
mometa ä¸æ˜¯ä¼ 统主æµçš„低代ç å¹³å°ï¼ˆå¦‚ amis/云凤è¶ï¼‰ï¼Œmometa 是é¢å‘ç ”å‘çš„ã€ä»£ç å¯è§†è®¾è®¡ç¼–辑平å°ï¼›å®ƒæ›´åƒæ˜¯ dreamweaverã€gui å¯è§†ç¼–辑 之于 程åºå‘˜ã€‚
它用于解决的问题有：
- 对低代ç å¹³å°ä¸å½¢æˆä¾èµ–，二次开å‘å¯ä»¥æ— ç¼è¿›å…¥ä»£ç å¼€å‘模å¼
- åŒæ—¶æ”¯æŒæ‰€è§å³æ‰€å¾—çš„å¯è§†ç¼–辑，用于æ效，æå‡å¼€å‘体验
- æ供物料生æ€ï¼Œå¯è‡ªå®šä¹‰ç‰©æ–™ï¼Œæå‡ç‰©æ–™ä½¿ç”¨ä½“验，æå‡å¤ç”¨çŽ‡
- 🛠é¢å‘ç ”å‘的代ç å¯è§†åŒ–编辑，直接作用于æºç
- å“应å¼å¸ƒå±€ã€è·¯ç”±æ¨¡æ‹Ÿã€ç‰©æ–™é¢„览
- åå‘定ä½ï¼ˆè§†å›¾å®šä½æºç ）
- 拖拽æ’入物料
- 拖拽移动
- 上下移动
- åˆ é™¤
- 替æ¢
- 层级选择
- 💠开放物料生æ€ï¼Œå¯å®šåˆ¶å›¢é˜Ÿå†…ç‰©æ–™åº“ï¼Œè§ mometa-mat
- 💎 多è¯è¨€ã€å¤šç”Ÿæ€æ”¯æŒï¼Œç›®å‰æš‚åªæ”¯æŒ React，åŽç»æœ‰è®¡åˆ’æ”¯æŒ Vue
- 🔥 接入å‹å¥½ï¼ŒWebpack>=4 æ’件化接入
- 🌟 å¼€å‘å‹å¥½ï¼Œç‰©æ–™åº“支æŒçƒæ›´æ–°ï¼Œä¸ç ´å已有开å‘模å¼
- 使用团队开å‘指令，新增一个空的å ä½è·¯ç”± & 页é¢
- 进入 mometa，查看本地物料，和远端物料市场，选ä¸è‡ªå·±éœ€è¦çš„物料，直接拖拽，基本æˆåž‹çš„页é¢å¸ƒå±€å®Œæˆ
- 进入 ide，完æˆæ•°æ®è”调，数æ®ä¼ 递ç‰ï¼Œæºç å¼€å‘
- 进入 mometa，物料æ“作æ’å…¥
- åå‘定ä½ç›´æŽ¥è¿›å…¥ ide æºç å¼€å‘
支æŒä»Žè§†å›¾å®šä½ä»£ç ä½ç½®
å¯è§†åŒ–æ’入物料
npm i @mometa/editor -D- 安装 antd 物料
npm i @mometa-mat/antd -D- åœ¨é¡¹ç›®æ ¹ç›®å½•ä¸åˆ›å»º
mometa-material.config.js
module.exports = [require('@mometa-mat/antd').default]ä½ ä¹Ÿå¯ä»¥åˆ›å»ºè‡ªå·±çš„物料库，数æ®ç»“æž„è§„åˆ™è§ 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: true,
// å¼€å¯ç‰©æ–™é¢„览
experimentalMaterialsClientRender: true
})
]
}注æ„：使用时，ä¸éœ€è¦å¼€å¯å®˜æ–¹é¢„设的 react-refresh，mometa é»˜è®¤ä¼šå¼€å¯ react-refresh 能力
å¯åŠ¨ webpack dev serverï¼Œå¼€å¯ http://localhost:${port}/mometa/ å³å¯
æ供的例åå¯è§ @mometa/app
- @mometa/editor - 编辑器
- @mometa/fs-handler - 代ç æ“作转æ¢æ ¸å¿ƒé€»è¾‘ï¼Œå¦‚åˆ é™¤ã€ç§»åŠ¨ã€æ›¿æ¢ã€æ’å…¥ç‰
- @mometa/materials-generator - ç‰©æ–™ç”Ÿæˆ & 解æž
- @mometa/materials-resolver - Resolve materials config
- @mometa/react-refresh-webpack-plugin - An EXPERIMENTAL Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
git clone https://github.com/imcuttle/mometa.git
cd mometa
pnpm install
cd packages/app && pnpm start # å¼€å¯æœ¬åœ°å¼€å‘预览模å¼
637D
This library is written and maintained by imcuttle, imcuttle@163.com.