中文 | English
vdesjs是一款基于vue技术栈，可视化拖拽，代码生成工具。我们提供详细的文档来帮助您理解我们工具的实现原理，并且您可以方便的基于vdesjs来扩展您自己的代码生成组件。
| 技术 | 描述 |
|---|---|
| Vue.Draggable | 基于 Sortable.js 的 Vue 拖放组件 |
| vuex | 状态管理工具(简单理解就是维护vue的公共变量，供全局使用) |
| clipboard.js | 将文本复制到剪贴板的插件 |
| element-ui | 基于Vue.js 2.0 的桌面端UI框架 |
| vant | 有赞前端团队开源的移动端组件库 (我们选择部分vant组件，将其作为vdesjs左侧拖拽组件) |
| handlebars | js模板引擎 (vdesjs左侧拖拽组件的代码生成模板选择handlebars作为模板引擎。如果想自己编写生成模板，可参照handlerbars语法进行编写) |
| vue-codemirror | 代码编辑器(用其作为vdesjs代码显示的编辑器) |
vdesjs ├── build ├── config ├── src │ ├── assets 资源存放目录 │ │ ├── basics 基础组件资源 │ │ ├── business 业务组件资源 │ │ ├── feeback 反馈组件资源 │ │ ├── form 表单组件资源 │ │ ├── nav 导航组件资源 │ │ └── show 展示组件资源 │ ├── common 公共代码 │ │ ├── css 公共css │ │ └── js 公共js │ ├── components 组件目录 │ │ ├── basics 左侧拖拽面板中的基础组件 │ │ ├── business 左侧拖拽面板中的业务组件 │ │ ├── feeback 左侧拖拽面板中的反馈组件 │ │ ├── form 左侧拖拽面板中的表单组件 │ │ ├── nav 左侧拖拽面板中的导航组件 │ │ ├── pcomp 右侧属性栏独立组件 │ │ ├── show 左侧拖拽面板中的展示组件 │ │ └── sub 实现vdesjs的子组件 │ ├── handlebars 模板代码存放目录 │ │ └── template │ │ ├── basic 基础组件模板代码 │ │ ├── feeback 反馈组件模板代码 │ │ ├── form 表单组件模板代码 │ │ ├── methods script标签下的methods方法模板代码 │ │ ├── nav 导航组件模板代码 │ │ └── show 展示组件模板代码 │ ├── page 路由页面 │ ├── router 路由配置 │ └── store vuex配置 └── static
- 1.编写左侧组件json数据结构
- 2.编写组件，引入组件。
- 3.编写代码生成模板
- 如需详细步骤请参阅 下方参考文档：vdesjs扩展自己的组件
项目会持续维护升级，如您在使用中与到任何bug，或者关于本项目有任何好的建议都可以联系作者。
- qq群号: 1125390832
# 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- 清空画布
- 生成vue代码
- h5端vant组件可拖拽
- 生成JSON代码
- h5模式预览
- 扩展pc响应式布局组件
- 假如我想基于vant组件开发移动端h5页面，但是我又不想一个个的写代码，那么就可以使用vdesjs从左侧拖拽组件并编辑属性。点击生成vue代码。这个代码就可以复制到我们的项目中。（这个生成代码应该是非常便于开发的，理论上跟我们手写的代码相差无几，如果这个生成的代码有问题，都可以根据handlebars模板语法去自己手动修改组件所对应的代码模板）