低代码平台

附录

从零开发一款可视化搭建框架dooringx-lib

美团 - 设计稿（UI视图）自动生成代码方案的探索

用AI写代码是什么样的体验？亲测GitHub Copilot

前端架构 - 关于 LowCode 架构设计模式的一些想法

lowcode之H5可视化搭建项目

h5-Dooring

老板要我做一个1天搭建100个表单和列表的开发平台

开发规划

1. vscode插件可视化创建项目，可视化增加页面+组件。（已初步完成，待应用）

2. 拖拽生成页面、页面预览、生成DSL。（扫盲中，预计这周初步完成）

3. DSL转换为Vue、React框架组件。（未开始，预计2周内初步完成）

4. 组件上传为飞冰物料供vscode插件使用。（未开始，预计2周内初步完成）

最终达到的效果：可以利用vscode插件、飞冰物料脚手架、开源低代码拖拽系统等开源工具，将前端开发人员、产品、UI设计师的知识沉淀（如日常项目模板、通用组件、可视化拖拽生成的组件等）用于代码二开，快速完成项目开发，减少开发成本。

后续规划

语音识别、人机交互

低代码平台资料

可视化编辑器

国内低代码平台

• https://juejin.cn/post/6958378433604747278

• https://juejin.cn/post/6844903991520968717

• react-jsonschema-form

• https://github.com/jarvelov/vue-form-json-schema

• https://github.com/michaelfitzhavey/vue-json-tree-view

• https://github.com/woai3c/visual-drag-demo

• https://github.com/buqiyuan/vite-vue3-lowcode

• https://github.com/lljj-x/vue-json-schema-form

• https://github.com/baidu/amis

• https://github.com/LianjiaTech/hetu

• https://github.com/H5-Dooring/H5-Dooring-Vue

• https://github.com/jaweii/Vue-Layout

vite-vue3-lowcode问题

源码地址

vite-vue3-lowcode

拖拽vue-draggable

vue-draggable

vite配置

vitejs

打包问题 npm run build 时包内存泄露：

//全局安装increase-memory-limit
npm install -g increase-memory-limit
// 进入工程目录，执行：
increase-memory-limit

简单demo https://gitee.com/ouyangdan/lowcode-editor-demo.git

DSL格式

区块JSON格式：

{
    blockid: 'b20210910', // 区块唯一标识id
    rules: [
        {
            name: 'NavBar', // 区块名称
            description: '头部导航条',  // 组件描述
            homepage: 'https://unpkg.com/@ouyangdan/linkkap-admin@0.0.6/build/index.html',  // 组件预览地址
            source: { // 组件url地址 
                url: '',
                type: "npm",
                npm: "@ouyangdan/linkkap-admin",
                version: '0.0.6',  // 组件版本
                author: 'ouyangdan',  // 组件开发者
            }, 
            sceenshot: 'https://unpkg.com/@ouyangdan/linkkap-admin@0.0.6/screenshot.png', // 截图图片地址
            props: { // 组件属性,可为字符串/对象，字符串即静态文本，对象即动态属性(:value)
                class: '', // 自定义类
                style: {}, // 自定义样式
                customProps: {key: 'username'},
                vFor: '',
            },
            events: [{
                eventName: 'change',
                methodName: 'changeWorld'
            }],
            children: [ // 区块内容，可为其他区块，避免死循环
            ],
        }
    ],
    import: [ // 可选
      'import { transformDate } from "./utils/index" '
    ],
    components: [ // 可选
    ],
    model: { // 可选，vuex数据源
      data: {},
      computed: {},
      watch: {}
    },
    actions: [ // 可选
       'changeWorld': {
          params: ['event'],
          content: 'alert(event)'
       }  
    ],
    style: { // 可选
      lang: 'scss',
      scoped: true,
      src: './assets/index.scss',
      content: '' 
    },
    dependencies: { // 可选
      'sass': '1.26.5',
      'sass-loader': '8.0.2'
    }
}

EJS渲染HTML

https://ejs.bootcss.com/#install

页面预览

https://github.com/easy-team/egg-vue-webpack-boilerplate

vscode插件开发教程

http://blog.haoji.me/vscode-plugin-overview.html https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/

appworks资料

appworks源码

https://github.com/appworks-lab/appworks

私有npm物料

https://unpkg.com/@ouyangdan/ice-material-demo@latest/build/materials.json

downloadAndGenerateProject源码参考

https://github.com/ice-lab/iceworks-cli

发布命令

npm库

npm version patch 更新一个补丁
npm version minor 更新一个小改动
npm version major 更新一个大改动
npm publish --access public

飞冰私有npm物料

iceworks generate
iceworks sync

vscode插件

vsce publish patch
vsce publish minor
vsce publish

vscode插件市场

ouyangdan

https://marketplace.visualstudio.com/manage/publishers/ouyangdan
1183719396@qq.com
oyd95445018

linkkap

https://marketplace.visualstudio.com/manage/publishers/linkkap
liaohongjun@linkkap.com
linkkap2021
o344rbb35btoyyxtb4js6o2euvhtcmhi46ylnm45nvb76wkoxyiq