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

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

效果图

dragUI演示视频

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

技术栈

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

安装使用

# 克隆项目
git clone https://github.com/wozhishilaonanhai/dragUI.git

# 进入dragUI目录
cd dragUI

# 安装依赖包
npm install

# 用HBuilderX打开项目
运行 > 运行到浏览器 > Chrome

项目目录

项目目录注释

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

https://ext.dcloud.net.cn/plugin?id=1035

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地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html

# 仓库地址
https://github.com/wozhishilaonanhai/dragUI

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