OverVue官方版是面向Vue開發人員的打造的原型設計工具，這個程序能幫你生成Vue 組件、添加HTML元素、指定層次結構、查看活動代碼片段、添加Vue路由 ， 也可以幫你顯像Component Parent-Child組件樹。它一個Electron應用程序，它允許新老Vue開發人員對他們的Vue應用程序進行原型設計和架構（可視化），實現組件層次結構的實時直觀樹形顯示和實時生成的代碼預覽，并導出其樣板代碼以簡化并提高開發效率，生成的樣板可以作為模板導出，以便進一步開發。

安裝使用

1、安裝 Quasar 框架

npm i -g @quasar/cli

2、下載源碼到本地

git clone https://github.com/open-source-labs/OverVue.git myproject

cd myproject

3、安裝依賴

npm install

4、在開發模式下運行

quasar dev -m electron

5、打包成.dmg 或 .exe

quasar build -m electron

6、下載程序到本地后，運行。新建項目，程序會默認建立一個根App組件和路由上傳一個模型圖像。

7、要添加新組件，在“組件名稱”框中鍵入其名稱，并選擇應由該組件呈現的任何HTML元素。還可以在創建后添加HTML元素，方法是在顯示中選擇組件，然后選擇HTML元素。

8、添加新的路由，然后在側邊欄可以查看所有的組件和路由。

特性

- 可上傳前端模型圖像

- 每個組件的實時生成的可預覽代碼段

- 實時生成的樹視圖，以幫助可視化父子層次結構

- 保存項目并打開以前的項目

- 導出工作前端的完整樣板代碼

- 重做/撤銷功能

- 包含可視化可拖動和可調整大小的組件

- 創建組件的父子層次結構

- 將html元素添加到組件

- 創建Vue Router使用的路由

- 可嵌套Html元素

- 能夠從選定的VUE組件導航到HTML元素

- 每個路由分配一個圖像

- 可以把Vue組件設定為特定的圖層

- 加載項目的同時加載路由圖像

- 上傳模型圖像兼容windows

主要功能

1、根據UI設計的原形
提交你挑選的網頁制作逐漸原形。
2、創建組件
讓你的組件取名字，添加需要的HTML原素。把他們蓋在你的制定上。
3、層次性
在創建組件以前或以后特定結構分析，交互樹中的轉變。
4、查看主題活動代碼段
創建組件時自動生成代碼段，點擊表明中的組件，查看其編碼和HTML原素。
5、添加VUE路由器
添加新路由并查看與該路由器關系的全部組件，進行后，將新項目導出來到系統文件。

以上便是winwin7下載小編給大家分享介紹的Vue原型設計工具——OverVue！