OverVue(Vue原型設(shè)計工具)

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

安裝使用

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、在開發(fā)模式下運(yùn)行

quasar dev -m electron

5、打包成.dmg 或 .exe

quasar build -m electron

6、下載程序到本地后，運(yùn)行。新建項(xiàng)目，程序會默認(rèn)建立一個根App組件和路由上傳一個模型圖像。

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

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

特性

- 可上傳前端模型圖像

- 每個組件的實(shí)時生成的可預(yù)覽代碼段

- 實(shí)時生成的樹視圖，以幫助可視化父子層次結(jié)構(gòu)

- 保存項(xiàng)目并打開以前的項(xiàng)目

- 導(dǎo)出工作前端的完整樣板代碼

- 重做/撤銷功能

- 包含可視化可拖動和可調(diào)整大小的組件

- 創(chuàng)建組件的父子層次結(jié)構(gòu)

- 將html元素添加到組件

- 創(chuàng)建Vue Router使用的路由

- 可嵌套Html元素

- 能夠從選定的VUE組件導(dǎo)航到HTML元素

- 每個路由分配一個圖像

- 可以把Vue組件設(shè)定為特定的圖層

- 加載項(xiàng)目的同時加載路由圖像

- 上傳模型圖像兼容windows

主要功能

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

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