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

boyanx2周前技术教程4

简介

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

相关文章

Python与数据可视化:Dash框架入门

Dash 是一个用于创建交互式 Web 应用程序的 Python 框架,它非常适合用于数据分析和可视化的项目。Dash 基于 Flask、Plotly.js 和 React.js 构建,因此可以轻松地...

Photoshop插件-晕影动态-选区-脚本开发-PS插件

PS是一款栅格图像编辑软件,模块众多。提供了脚本,动态连接库等多种扩展机制,本文演示如何通过脚本实现晕影动态和选区相关功能,展示从互联网收集而来的一个小插件,供大家学习交流,请勿用于商业用途。1.插件...

Weex在内涵发现页中的工程实践(weex是骗局吗)

React-Native和Weex是目前最为火热的两个客户端跨平台解决方案。从去年2016年9月份开始,IES在抖音产品中应用了React Native,中途遇到了很多的问题,尤其是长列表的性能问题一...

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

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

就算你不会 Web 开发,也能让数据“动”起来的开源项目

本文面向有 Python 基础的小伙伴,有 Web 基础的更好作者:HelloGitHub-吱吱这里是 HelloGitHub 推出的《讲解开源项目》系列,今天要向小伙伴们介绍的是一个能够快速地把数据...

基于 vue2/3 可视化拖拽编辑ASEditor

今天给大家分享一个vue.js支持移动端的可视化拖拽模板AsEditor。as-editor 使用vue2/3开发的可视化拖拽,可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。git...

发表评论    

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