快速搭建页面：一款开源可视化拖拽工具

小半 • 2024年10月4日下午8:46 • Java知音 • 阅读 665

简介

基于vue可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。

安装教程

npm install：安装 node_modules 模块
npm run serve：运行
npm run build：打包
npm update：用于更新包到基于规范范围的最新版本

注：在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。可使用：npm install --legacy-peer-deps

使用教程

自定义组件

创建组件

进入 src/components/componentscom 创建组件（这里以custommodule为实例）

创建组件设置

进入src/components/rightslider 创建组件设置（这里以custommodulestyle为实例）

添加页面基础组件

进入 src/components/sliderassembly/index.vue 添加数据

实例字段注解

{
  text: '自定义模块',                // 组件简称
  type: 'demo',                     // 组件唯一值
  icon: 'icon-zidingyimokuai',      // 组件图标
  name: 'custommodule'              // 组件里的name
}

创建组件初始化数据

进入src/utils/componentProperties.js 添加组件初始化数据

实例字段注解

{
  component: 'custommodule',        // 手机组件的name
  text: '自定义模块',                // 组件文字描述
  type: 'demo',                     // 组件唯一值
  active: true,                     // 是否选中
  style: 'custommodulestyle',       // 组件设置的name
  setStyle: {                       // 组件动态数据
    text: '自定义模块',
    demo:'自定义内容',
    img:'https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg'
  }
}