簡介

OverVue是一種原型設計工具，允許開發人員動態創建和可視化Vue應用程序，實現組件層次結構的實時直觀樹形顯示和實時生成的代碼預覽。生成的樣板可以作為模板導出，以便進一步開發。

這個程序能幫你生成Vue組件，設置routes，也可以幫你顯示組件Parent-Child組件樹。你只要做一些小配置然后可以下載代碼樣板文件。這樣你就可以很方便簡潔地生成Vue公司前臺APP了！

特征

• 上傳前端模型圖像
• 可視化可拖動和可調整大小的組件
• 創建組件的父子層次結構
• 將html元素添加到組件
• 創建Vue Router使用的路由
• 每個組件的實時生成的可預覽代碼段
• 實時生成的樹視圖，以幫助可視化父子層次結構
• 保存項目并打開以前的項目
• 導出工作前端的完整樣板代碼

如何使用

• 打開應用程序將默認創建一個根App組件和一個名為“HomeView”的根路由
• 如果您愿意，可以從文件系統上傳模型。刪除模型并根據需要選擇一個新模型。

• 要添加新組件，請在組件名稱框中鍵入其名稱，然后選擇應由該組件呈現的任何HTML元素。
• 通過在顯示中選擇組件，然后選擇HTML元素，也可以在創建后添加HTML元素。
• 如果需要，為新組件選擇父組件。
• 添加后，您可以在顯示中移動和調整組件的大小。
• 您還可以通過右鍵單擊要添加子項的組件來將子項添加到組件，并且可以在創建新組件或更改層次結構時看到樹重新呈現。

• 儀表板顯示有關每個組件的信息（代碼片段和HTML元素）。單擊顯示中的組件以查看其屬性。

• 您可以添加新路線并查看側欄中的所有組件和路線。

• 完成創建后，您可以導出到您選擇的文件位置。以下是導出的文件結構：

public/ 
 index.html 
src/ 
 assets/ 
 components/ 
 UserCreatedComponent1.vue 
 UserCreatedComponent2.vue 
 ... 
 views/ 
 HomeView.vue 
 UserCreatedRouteComponent1.vue 
 UserCreatedRouteComponent2.vue 
 ... 
 App.vue 
 main.js 
 router.js 
babel.config.js 
package.json