今天给大家分享一个超厉害的Vue Uniapp可视化拖拽编程项目dragUI。

drag-ui 基于 vuedraggable.js+vue+uniapp 的可视化拖放布局编程。能自动生成项目，自动生成代码，支持导入第三方组件。

效果图

dragUI演示视频

一个简单创建 hello world 界面的介绍视频，帮助大家更快了解项目。

视频加载中...

技术栈vue ^2.5.17 + uniAppelement-ui ^2.12.0 饿了么pc组件库sortablejs 组件拖拽功能file-saver 文件保存ejs ^2.7.1 JavaScript模板引擎jszip ^3.2.2 JS压缩库vue-context-menu 基于vue自定义右键菜单安装使用

# 克隆项目git clone  进入dragUI目录cd dragUI# 安装依赖包npm install# 用HBuilderX打开项目运行 > 运行到浏览器 > Chrome

项目目录注释

作者已经将该插件上传到了插件市场，大家可以下载使用。

store中 componentsInfo 存贮组件的基本信息。

componentsInfo: { // 组件的基本信息    // id 0- 999  （约定）会根据id来判断是哪个list    list: [        {            name:'按钮',            id: 0,            componentName: 'Ibutton',            iStyle:{},            iClass: [],            propsValue: [                {                       label:'值',                    key:'text',                    value:'按钮',                    toDataOrHtml: 'html',                    type: 'String'                },                {                    label:'类型',                    key:'type',                    value:'default',                    toDataOrHtml: 'html',                    type:'select',                    select: [                        {label: '红色',value: 'warn'},                        {label: '蓝色',value: 'primary'},                        {label: '白色',value: 'default'}                    ]                },            ...            ]        },        ...    ]}

项目中用到了 element-ui 组件库及第三方UI库 colorUI。

创建新项目

切换页面模式/组件模式

布局预览效果

查看uniapp页面代码

最后附上demo及项目地址

# demo地址 仓库地址

ok，这次就分享到这里。如果小伙伴们感兴趣的话可以去看下哈。