1 Star 0 Fork 194

开源技术 / vdesjs-drag

forked from china-bin / vdesjs-drag 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

中文 | English

vdesjs-drag

Version Documentation License: MIT

介绍 :loudspeaker: :loudspeaker:

vdesjs-drag

演示动图

技术选型 :computer: :computer:

技术 描述
Vue.Draggable 基于 Sortable.js 的 Vue 拖放组件
vuex 状态管理工具(简单理解就是维护vue的公共变量,供全局使用)
clipboard.js 将文本复制到剪贴板的插件
element-ui 基于Vue.js 2.0 的桌面端UI框架
vant 有赞前端团队开源的移动端组件库 (我们选择部分vant组件,将其作为vdesjs-drag左侧拖拽组件)
handlebars js模板引擎 (vdesjs-drag左侧拖拽组件的代码生成模板选择handlebars作为模板引擎。如果想自己编写生成模板,可参照handlerbars语法进行编写)
vue-codemirror 代码编辑器(用其作为vdesjs-drag代码显示的编辑器)
file-save.js 将代码下载至本地
js-beautify 对生成的代码进行格式美化

项目目录结构


vdesjs
├── build
├── config
├── docs vuepress文档
│   ├── cooperation
│   └── guide
├── src
│   ├── assets 资源存放目录
│   │   ├── h5 h5模式
│   │   │   ├── basics 基础组件资源
│   │   │   ├── business 业务组件资源
│   │   │   ├── feeback 反馈组件资源
│   │   │   ├── form 表单组件资源
│   │   │   ├── nav 导航组件资源
│   │   │   └── show 展示组件资源
│   │   ├── icon
│   │   └── pc pc模式
│   │       └── basics
│   ├── common
│   │   ├── css 公共css
│   │   └── js 公共js
│   │       ├── h5
│   │       └── pc
│   ├── components 组件目录
│   │   ├── componentLib 左侧面板json数据存放
│   │   ├── h5 h5模式组件
│   │   │   ├── basics 左侧拖拽面板中的基础组件
│   │   │   ├── business 左侧拖拽面板中的业务组件
│   │   │   ├── feeback ...
│   │   │   ├── form ...
│   │   │   ├── nav ...
│   │   │   └── show ...
│   │   ├── pc pc模式组件
│   │   │   ├── basics
│   │   │   └── media
│   │   ├── pcomp 右侧属性栏独立组件
│   │   └── sub 实现vdesjs的子组件
│   ├── handlebars 模板代码存放目录
│   │   ├── helpers handlebars自定义helper
│   │   └── template
│   │       ├── h5 h5模式模板
│   │       └── pc pc模式模板
│   ├── mixins 混入
│   ├── page 路由页面
│   ├── preview 用于预览模式的组件
│   ├── router 路由配置
│   └── store vuex配置
└── static

扩展组件步骤 :electric_plug: :electric_plug:

  • 1.编写左侧组件json数据结构
  • 2.编写组件,引入组件。
  • 3.编写代码生成模板
  • 如需详细步骤请参阅vdesjs官网

参考文档 :notebook: :notebook:

官方文档: http://china-bin.gitee.io/vdesjs/ 预览地址: http://china-bin.gitee.io/vdesjs/demo/#/

持续升级

项目会持续维护升级,如您在使用中与到任何bug,或者关于本项目有任何好的建议都可以联系作者。

技术反馈交流群 :telephone_receiver: :telephone_receiver:

1125390832
  • qq群号: 1125390832

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

已完成功能

  1. 清空画布
  2. 生成vue代码
  3. h5端vant组件可拖拽
  4. 生成JSON代码
  5. h5模式预览
  6. 完成扩展pc响应式布局组件
  7. 下载html文件至本地
  8. 制作vdesjs官网与演示demo
  9. 添加自由画布模式(自由画布模式可自由拖拽更改组件大小、布局、并且有标线对齐功能、历史记录、组合组件等功能)

加入计划功能 (欢迎补充提交建议)

使用场景描述

  1. 假如我想基于vant组件开发移动端h5页面,但是我又不想一个个的写代码,那么就可以使用vdesjs从左侧拖拽组件并编辑属性。点击生成vue代码。这个代码就可以复制到我们的项目中。(这个生成代码应该是非常便于开发的,理论上跟我们手写的代码相差无几,如果这个生成的代码有问题,都可以根据handlebars模板语法去自己手动修改组件所对应的代码模板)

开源地址

MIT License Copyright (c) 2020 china-bin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于vue的可视化拖拽,代码生成工具。提升前端开发效率,或者集成至项目作为在线拖拽工具。(持续迭代升级中) 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/gfzl-open-source/vdesjs.git
git@gitee.com:gfzl-open-source/vdesjs.git
gfzl-open-source
vdesjs
vdesjs-drag
master

搜索帮助

14c37bed 8189591 565d56ea 8189591