中文 | English

vdesjs

介绍

vdesjs是一款基于vue技术栈，可视化拖拽，代码生成工具。我们提供详细的文档来帮助您理解我们工具的实现原理，并且您可以方便的基于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扩展自己的组件

参考文档

• vdesjs实现原理
• vdesjs扩展自己的组件

持续升级

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

技术反馈交流群

• 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代码

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

1. 扩展pc响应式布局组件

开源地址

• 码云
• github