后端接活儿利器:基于Vue,拖拽一键生成UI界面,简洁漂亮已开源

boyanx5个月前技术教程16

简介

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

安装教程

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

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

使用教程

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

不满足系统提供的组件,也可以自定义组件

自定义组件可以看:

src/layout/home/index.vue  // 编辑页面文件
src/components/sliderassembly / index.vue // 左侧组件大全文件
src/components/componentscom // 左侧组件目录
src/components/rightslider  // 右侧组件目录
src/utils/componentProperties.js // 组件数据

componentProperties(组件数据)字段注解:

{
  component: 'custommodule',    // 中间部分手机组件的name
  text: '自定义模块',            // 组件文字描述
  type: '1-14',                 // data-tpye
  active: true,                 // 是否选中
  style: 'custommodulestyle',   // 右边组件设置的name
  setStyle: {}                  // 组件动态数据
}

开源地址

  • https://gitee.com/was666/as-editor
标签: slider.js

相关文章

微场景快速搭建方案:触景js发布1.3版本

切图触景JS发布,新增了手指触摸的刮刮卡效果组件QietuSwiperMask,放弃了对原生jQuery.mobile改造的swipeup,swipedown函数,采用了开源的触摸插件jquery.t...

实现前端工程师的第一个AI应用(前端之父是谁)

大家好,我卡颂。最近几个月,AI相关新闻不断抢占大家的注意力。逞着这波热度,各路开发者都投入到AI应用的开发。比如,15岁的开发者saviomartin7[1]开发的IconifyAI[2]可以根据文...

python下又一款漂亮超炫酷的动态数据可视化工具——可动态交互

python下有很多漂亮的数据可视化库,例如 Matplotlib、Seaborn、Bokeh、Plotly、Pyecharts等等,我们直接使用这些第三方库来进行漂亮的数据可视化操作。虽然这些库都可...

微信小程序入门1(微信小程序入门指南)

第一天-------运行第一个小程序一、前言从今天开始小编将带大家一起来学习微信小程序的开发,作为依托于微信的产品,微信小程序的热度的确是不容忽视的,而且推广的话也会有很多优势,毕竟不用像app一样要...

小程序-如何获取用户表单控件中的值

背景在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有:switch,input,checkbox,slider,radio,picker)等,通过触发事...

超详细带你从入门开始,开发一个超实用的浏览器插件

相信大家平时在电脑上逛掘金、知乎网站时,肯定有看到过下面超级烦人的跳转拦截确认页面虽然这种拦截的初衷是好的,但是我相信大家平时肯定不会因为有了这个拦截提醒页面,就会对即将打开的网站安全性提高自己的警惕...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。