目前还只是一个简单的模板，后面可能会引入较为完善的机制系统，感兴趣的小伙伴可以根据自己的需要去调整, 通过这个项目或许你可以接触到 vue3 很多有趣的新特性和玩法。

计划实现：

模型驱动的视图

克隆项目

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.gitorgit clone --depth=1 https://github.com/buqiyuan/vite-vue3-lowcode.git

cd vite-vue3-lowcodepnpm install

pnpm serve

pnpm build

技术栈

功能清单

简易说明

快速生成组件属性

// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性letpropObj={string:(config)=>`createEditorInputProp(${JSON.stringify(config)})`,number:(config)=>`createEditorInputNumberProp(${JSON.stringify(config)})`,boolean:(config)=>`createEditorSwitchProp(${JSON.stringify(config)})`,};JSON.stringify($$('#props + table tbody tr').reduce((prev,curr)=>{constchildren=curr.children;constkey=children[0].textContent.replace(/-([a-z])/g,(all,i)=>i.toUpperCase());constchild3Text=children[3].textContent;constdefaultValue=['true','false'].includes(child3Text)      ?child3Text      :`'${child3Text=='-' ?'' :child3Text}'`;constvalue=(propObj[children[2].textContent]??propObj['string'])({label:`'${children[1].textContent}'`,      defaultValue,}).replaceAll('"','');prev[key]=value;returnprev;},{}),).replaceAll('"','');

// 在vant文档中 chrome控制台输入以下代码，快速生成组件事件JSON.stringify($$('#events + table tbody tr').reduce((prev,curr)=>{constchildren=curr.children;constevent={label:children[1].textContent,value:children[0].textContent,};returnprev.concat([event]);},[]),).replaceAll(/(?<!:)\"(?!,|})/g,'').replace(/\"/g,"'");

部分功能演示

浏览器支持

提交规范