低代码平台-可视化搭建项目

附录

页面可视化搭建

目的

低代码平台-可视化搭建项目

开源的可视化编辑器

国内低代码平台

https://juejin.cn/post/6958378433604747278

https://juejin.cn/post/6844903991520968717

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

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

https://react-jsonschema-form.readthedocs.io/en/latest/

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

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

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开源项目

源码地址

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

拖拽vue-draggable

https://www.itxst.com/vue-draggable/tutorial.html

vite配置

https://cn.vitejs.dev/

打包问题

npm run build 时包内存泄露：

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

演示demo项目

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

注：会议中演示此demo，会议开始前请先安装依赖。

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

发布命令

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

downloadAndGenerateProject源码参考

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

vscode插件市场

linkkap

https://marketplace.visualstudio.com/manage/publishers/linkkap

liaohongjun@linkkap.com
linkkap2021
o344rbb35btoyyxtb4js6o2euvhtcmhi46ylnm45nvb76wkoxyiq

ouyangdan

https://marketplace.visualstudio.com/manage/publishers/ouyangdan

参考资料

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

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

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