vdesjs

介紹

vdesjs是一款基于vue技術棧，可視化拖拽，代碼生成工具。我們提供詳細的文檔來幫助您理解我們工具的實現原理，并且您可以方便的基于vdesjs來擴展您自己的代碼生成組件。

技術選型

技術

描述

基于 Sortable.js 的 Vue 拖放組件

vuex

狀態管理工具(簡單理解就是維護vue的公共變量，供全局使用)

將文本復制到剪貼板的插件

基于Vue.js 2.0 的桌面端UI框架

有贊前端團隊開源的移動端組件庫 (我們選擇部分vant組件，將其作為vdesjs左側拖拽組件)

js模板引擎 (vdesjs左側拖拽組件的代碼生成模板選擇handlebars作為模板引擎。如果想自己編寫生成模板，可參照handlerbars語法進行編寫)

代碼編輯器(用其作為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

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

已完成功能

清空畫布

生成vue代碼

h5端vant組件可拖拽

生成JSON代碼

加入計劃功能 (歡迎補充提交建議)

擴展pc響應式布局組件

開源地址

總結

以上是生活随笔為你收集整理的vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。