vue可視化拖拽生成工具_GitHub - kerasking/vdesjs: 基于vue的可視化拖拽，代碼生成工具。...

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代碼

h5模式預覽

加入計劃功能 (歡迎補充送出建議)

擴充pc響應式布局元件

使用場景描述

假如我想基于vant元件開發移動端h5頁面，但是我又不想一個個的寫代碼，那麼就可以使用vdesjs從左側拖拽元件并編輯屬性。點選生成vue代碼。這個代碼就可以複制到我們的項目中。(這個生成代碼應該是非常便于開發的，理論上跟我們手寫的代碼相差無幾，如果這個生成的代碼有問題，都可以根據handlebars模闆文法去自己手動修改元件所對應的代碼模闆)

開源位址