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

科技   2024-11-21 21:48   山西  

简介

基于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'
  }
}

开源地址

https://gitee.com/was666/as-editor

好书推荐
《Java 项目开发全程实录》(第5版)是Java编程领域的经典图书,包括了Java项目开发中的3大方面 ~ 基础应用、数据库应用和Web开发。本书通过11个精心设计的项目展示了从项目构思到实现的完整过程,每个项目都有详细的讲解和代码示例,配套有项目视频和源码下载,还提供了丰富的在线学习资源。 
值得一提的是,本书还可以作为计算机专业相关院校实践课的教材。对于软件开发相关专业的学生,在进行毕业设计时往往需要设计一个中小型的项目,本书所涵盖的内容和项目案例,能够为这类读者提供丰富的灵感、成熟的设计思路及可靠的技术支持,帮助他们顺利完成毕业设计这一重要的人生挑战。 
除了大学生群体之外,初入职场的Java开发工程师也能通过学习书中的项目巩固Java项目开发的知识。

老炮说Java
十年老炮程序员带你玩技术
 最新文章