魯班 H5基于 Vue 的拖拽式 H5 生成工具

魯班H5是基于Vue2.0開(kāi)發(fā)的，通過(guò)拖拽的形式，生成頁(yè)面的工具，類(lèi)似易企秀、百度 H5 的一個(gè)可視化搭建系統(tǒng)

初心：希望能通過(guò)工程化的手段，大幅度提高簡(jiǎn)單H5頁(yè)面的制作效率，提高工程師的幸福感，從這種需求頻繁變更的簡(jiǎn)單任務(wù)中解脫出來(lái)

Screenshots

在線訪問(wèn)地址

Features

1. 編輯器    

   1. - [x] 參考線    

   2. - [x] 吸附線、組件對(duì)齊    

   3. - [x] 拖拽改變組件形狀    

   4. - [x] 元素: 復(fù)制（畫(huà)布）    

   5. - [x] 元素: 刪除（畫(huà)布）     

   6. - [x] 元素: 編輯（畫(huà)布）    

   7. - [x] 頁(yè)面：新增    

   8. - [x] 頁(yè)面：復(fù)制    

   9. - [x] 頁(yè)面：刪除    

   10. - [x] 快速預(yù)覽    

   11. - [x] 撤銷(xiāo)、重做

2. 組件系統(tǒng)    

   1. - [x] 文字    

   2. - [x] 普通按鈕    

   3. - [x] 表單按鈕    

   4. - [x] 表單輸入框    

   5. - [x] 普通圖片    

   6. - [ ] 背景圖    

   7. - [ ] 視頻（Iframe形式）

3. 增強(qiáng)功能    

   1. - [ ] 上傳 PSD，一鍵轉(zhuǎn)換為 H5(已經(jīng)調(diào)研，可以實(shí)現(xiàn))    

   2. - [ ] 圖片庫(kù)    

   3. - [ ] 第三方無(wú)版權(quán)圖片搜索    

   4. - [ ] 自定義腳本(已經(jīng)調(diào)研，可以實(shí)現(xiàn))

4. 后端 API    

   1. - [x] 創(chuàng)建、保存、更新作品    

   2. - [x] 表單數(shù)據(jù)收集    

   3. - [x] 表單數(shù)據(jù)展示    

   4. - [x] 在線預(yù)覽    

   5. - [x] 二維碼預(yù)覽

技術(shù)棧（當(dāng)前）

1. 前端：Vue.js
2. 后端：Strapi
3. 存儲(chǔ)：Sqlite