這可能是目前最好的vue程式碼生成工具

孫證傑發表於2017-11-22

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會持續開發更多的功能,希望大家多提意見!

相關文章