OverVue官方版是面向Vue開發人員的打造的原型設計工具,這個程序能幫你生成Vue 組件、添加HTML元素、指定層次結構、查看活動代碼片段、添加Vue路由 , 也可以幫你顯像Component Parent-Child組件樹。它一個Electron應用程序,它允許新老Vue開發人員對他們的Vue應用程序進行原型設計和架構(可視化),實現組件層次結構的實時直觀樹形顯示和實時生成的代碼預覽,并導出其樣板代碼以簡化并提高開發效率,生成的樣板可以作為模板導出,以便進一步開發。
主要功能
1、基于UI設計的原型
上傳你選擇的網頁設計開始原型。
2、創建組件
給你的組件起名字,添加所需的HTML元素。把它們蓋在你的設計上。
3、層次性
在創建組件之前或之后指定層次結構,可視化樹中的變化。
4、查看活動代碼段
創建組件時自動生成代碼段,單擊顯示中的組件,查看其代碼和HTML元素。
5、添加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