Vue-Layout:可视化布局、自动生成代码工具

最新推荐文章于 2024-06-04 16:59:14 发布
最新推荐文章于 2024-06-04 16:59:14 发布
阅读量1w 收藏 18
点赞数 3
分类专栏： 前端 文章标签： Vue.js
原文链接：https://www.mk2048.com/blog/blog.php?id=iaccc11jhj&title=Vue-Layout%3A%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80%E3%80%81%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E4%BB%A3%E7%A0%81%E5%B7%A5%E5%85%B7
版权

按惯例，先上GIF:

demo1
demo1

banner
banner

Vue-Layout

基于UI组件的Vue可视化布局、生成.vue代码的工具。https://jaweii.github.io/Vue-Layout/dist

GitHub | Demo

效果展示

demo2
demo2

后台布局图片的例子，你可以进入这个页面访问其布局：https://jaweii.github.io/Vue-Layout/dist/#/share/5993d3b05c497d0057c6f2da
也可以进入这个页面体验其布局效果：https://jaweii.github.io/Vue-Layout/dist/#/preview/pc/5993d3b05c497d0057c6f2da

最后

目前我只完成了Muse-UI的可视化组件，现在正在做Mint-UI的可视化组件。

「已注销」
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue-Layout（可视化布局）
郭宝的博客
08-15 1万+
什么是Vue-Layout ？ 怎么使用Vue-Layout ？
基于Vue框架的可视化搭建方案「低代码」
yangjian_666的专栏
11-13 6805
纯表单的页面拖拽方案。
vue-layout-diy:基于vue和flex的自定义布局
05-16
vue-layout-diy 基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码分离时: 若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。 在main.js中通过Vue.component直接注册则正常。 为了方便在GithubPage展示效果，将build后dist中的结果拷贝至demo目录，并修改资源路径。 由于demo并非部署在Web服务器根目录下，所以分离的异步js文件找不到。 需要修改config/inde
若依管理系统RuoYi-Vue（三）：代码生成器原理和实战
最新发布
qq_20236937的博客
06-04 580
ruoyi-vue中的ruoyi-generator模块有着完整的代码生成逻辑，但是它依托于ruoyi-admin的spring-boot框架才能运行，现在我要将ruoyi-generator模块的功能独立于spring-boot，让其作为一个普通的spring的程序，只有一个普通的main方法，实现和原来等效的功能。在这里封装的代码生成器不考虑前端页面调整功能，其实现的功能更加注重于后端代码，其作用和“系统工具-代码生成”页面中最简单的生成代码的两步（导入表和下载代码，无编辑）结果等效。
vue3后台管理系统之layout组件的搭建
m0_52704461的博客
10-18 2737
您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。hidden: false //代表路由标题在菜单中是否隐藏。src下创建setting.ts。渲染layout一级路由的子路由。title: ' 登录 ',传递路由数组到Menu组件。在meta添加属性icon。动态组件component。hidden代表是否隐藏。store管理路由数组。接收menuList。根据判断条件展示路由。
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
SAHADEV的专栏
01-07 6067
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具，英文全称：Low Code Generator，简称LCG。它也是一种LowCode解决方案。通过它可以快速完成Vue组件的代码骨架搭建，通过减少不必要的重复工作从而带来开发效率的提升。 体验地址：https://lc.100tal.com/ 出现的背景 做前端久了就难免会发现有一些工作其实是繁复的，它们有一些共同的特点： 频率高 非常基础 花费时间 而有一部分工作是可以通过技术手段解决的，例如在写Vue时会发现： class的名称需
6. Vue自动化工具（Vue-cli）
weixin_42127687的博客
04-25 200
6. Vue自动化工具（Vue-cli） 6.4 使用Vue-CLI初始化创建项目 6.4.1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录。 该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目： // 生成一个基于 webpack 模板的新项目 vue init webpac...
VueLayout基于UI组件的Vue可视化布局生成vue代码的工具
08-12
VueLayout是一款专为Vue.js开发者设计的工具，它允许用户通过可视化的方式创建和编辑UI布局，然后自动生成相应的Vue组件代码。这个工具极大地简化了前端开发过程，特别是对于那些不熟悉手动编写复杂布局代码的开发者...
vue自动化表单实例分析
08-27
2. 设计目标：通过 JSON 配置快速生成表单的 Vue 插件，目标是减少 HTML 重复片段、表单字段组件可扩展、事件、联动通过 eventbus 解耦、校验可扩展、表单布局可自定义、可视化配置。 3. 安装和使用：使用 npm 安装...
基于d3或者relation-graph（vue）图形化展示关系
03-16
在IT领域，图形化展示关系是一种常见的数据可视化技术，它帮助我们理解复杂的数据网络和实体之间的相互联系。在这个场景中，我们将关注如何使用d3.js和relation-graph库在Vue.js框架下实现这样的功能。 首先，d3.js...
layoutit bootstrap3中文版可拖放排序在线编辑的bootstrap可视化布局系统
06-11
Layoutit Bootstrap3是这个框架的一个扩展，它是一个可视化的布局系统，特别适用于快速原型设计和网页布局的构建。在这个中文版中，洋洋创意网络为国内用户提供了方便，将原本英文版的Layoutit翻译成了中文，使得不...
Vue2.0教程 （十一）layout组件
燃燃的大尾巴
07-26 5303
vue脚手架
java excel前端预览_推荐一个基于 Vue 的前端界面可视化设计器项目
weixin_39630735的博客
11-21 490
简介基于 Vue 开发的界面可视化设计器，前端小白可以直接拖拽生成前端代码。特性可视化拖拽布局支持数据关联和交互行为的可视化编辑支持扩展组件、组件属性、属性编辑器依赖vjform，可视化布局基于 vjform 扩展Lodash，使用了 get set forEach 等 APIVue，基于 v2.5.9 测试，理论上支持高于 v2.4.0 版本vuedraggable，实现拖拽布局vue-json...
vue可视化拖拽生成工具_GitHub - richerdyoung/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
weixin_39912984的博客
12-20 1026
dragUI文档目录用于UNI可拖拽可视化编程在线演示demo地址一个简单创建hello world 界面的视频,github不会放视频，放在bilibli了dragUI 演示视频效果图快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install致开发者项目目录coloruicommon -----------------------公共方法js...
基于vue的可视化编辑器
热门推荐
weixin_30249203的博客
04-25 1万+
https://github.com/jaweii/Vue-Layout https://github.com/L-Chris/vue-design https://github.com/fireyy/vue-page-designer https://github.com/OXOYO/X-Page-Editor-Vue 转载于:https://www.cnblogs.com/web...
vue 可视化布局工具_前端工程实践之可视化搭建系统（一）
weixin_39940755的博客
12-01 893
本文为第 14 篇原创，扫码关注公众号「政采云前端团队」，获取更多不掺水的原创好文～背景随公司业务不断发展，营销活动、广告、页面改版等需求日益倍增，靠纯人工撸代码已经无法跟上需求增长速度。加班？招人？显得不够明智，也不够前端，提效也就成为了关键。如何提效？从何入手？那不得不提的就是前端提效神器 —— 搭建系统，下文将从多个方面，向大家简单介绍政采云前端团队 ZooTeam 的可视化搭建系统 —— ...
「Web全栈教程」手把手教你用 Vue.js + Django 搭建在线教育平台
实验楼
03-24 1057
今年疫情影响了大部分企业，但却是在线教育平台发展的契机。不少高校改为线上授课，许多高校计算机学院的上机实验也借助了线上教育平台提供的环境。比如，「实验楼...
Vue源码阅读（14）：代码生成器
f18855666661的博客
08-05 2168
代码生成器是模板编译的最后一步，所做的工作是根据 AST（抽象语法树）生成代码字符串，这个代码字符串就是 render 函数的代码内容，代码字符串可以通过 new Function(code) 生成真正的 render 函数。 render 函数的作用是生成 vnode（虚拟 DOM），vnode 可以理解成真实 DOM 的抽象表示，通过 vnode 可以在页面上渲染出对应的真实 DOM，使用 vnode 的好处是：Vue 可以根据新旧vnode 之间的差异计算出哪些真实DOM 需要更新，然后只更新需..
vue 可视化布局工具_数据大屏可视化工具篇—DataV
weixin_39629617的博客
12-12 3104
datav前面猪猪侠已经分享了很多数据大屏可视化的精美模板，都是小编浪里淘沙一点一点收集起来的，感兴趣的小伙伴们可以进入猪猪侠主页直接获取大屏可视化模板，完全免费的哦。古人有云，授人以鱼不如授人以渔，基于这方面的考虑，所以猪猪侠这次给大家带来了数据大屏可视化的一套工具DataV。首先来介绍一下，DataV是干什么的？DataV是一个基于Vue的数据可视化组件库(有vue版本和react版本，今天主...
vue垂直布局_使用vue-grid-layout完成桌面拖拽布局功能
06-10
Vue-grid-layout 是一个基于 Vue.js 的响应式网格布局系统，可以帮助你轻松地实现桌面拖拽布局功能。下面是一个简单的例子： 1. 首先，你需要安装 vue-grid-layout： ``` npm install vue-grid-layout ``` 2. 在 Vue 组件中引入 vue-grid-layout： ```javascript import VueGridLayout from 'vue-grid-layout'; ``` 3. 在 template 中使用 vue-grid-layout： ```html <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"> <div v-for="item in layout" :key="item.i">{{ item.i }}</div> </vue-grid-layout> ``` 其中，`layout` 是一个数组，用于定义每个网格的位置和大小。`col-num` 定义了网格布局的列数，`row-height` 定义了每行网格的高度，`is-draggable` 和 `is-resizable` 分别表示是否可拖拽和可调整大小。 4. 在 JavaScript 中定义 `layout` 数组： ```javascript data() { return { layout: [ { i: 'a', x: 0, y: 0, w: 1, h: 2 }, { i: 'b', x: 1, y: 0, w: 3, h: 2 }, { i: 'c', x: 4, y: 0, w: 1, h: 2 } ] }; } ``` 其中，`i` 表示网格的 ID，`x` 和 `y` 表示网格的左上角坐标，`w` 和 `h` 表示网格的宽度和高度。 这样，你就可以实现一个简单的网格布局，并且可以拖拽和调整网格的大小。更多详细的用法可以参考 vue-grid-layout 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值