1 專案介紹
Esview是一款拖拽元件生成頁面的工具,並且可以生成vue程式碼。
包含拖拽生成頁面、頁面管理、元件管理等功能。
前端採用vue和iview,生成的程式碼必須安裝vue和iview才能使用,
後臺採用java(springboot)作為持久層,儲存生成的頁面、建立的元件。
3 GITHUB | DEMO
4 文件(點我)
5 原理
如何實現拖拽:html源生api,程式碼在dnd.js。
如何生成程式碼:拖拽生成的頁面,背後是一個樹形的結構,通過解析語法樹生成最終的.vue程式碼。
元件的屬性編輯影響元件樣式:vue會監聽這棵屬性結構的所有屬性,當屬性被編輯過後,vue會更新整個頁面。
6 安裝
前端: Esview使用webpack和vue、iview,所以必須安裝他們和nodejs,下載本專案後npm install,npm run dev就能啟動dev 模式。
dev模式不需要安裝後端。
後端: 使用Java(springboot),所以你必須先安裝jdk.
資料庫: mysql,資料庫表檔案在'server'目錄下,名字叫 'soul-esview.sql'.
7 結語
Esview會持續開發更多的功能,希望大家多提意見!