軟件介紹
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)（可視化），實現(xiàn)組件層次結(jié)構(gòu)的實時直觀樹形顯示和實時生成的代碼預(yù)覽，并導(dǎo)出其樣板代碼以簡化并提高開發(fā)效率，生成的樣板可以作為模板導(dǎo)出，以便進(jìn)一步開發(fā)。
主要功能
1、基于UI設(shè)計的原型
上傳你選擇的網(wǎng)頁設(shè)計開始原型。
2、創(chuàng)建組件
給你的組件起名字，添加所需的HTML元素。把它們蓋在你的設(shè)計上。
3、層次性
在創(chuàng)建組件之前或之后指定層次結(jié)構(gòu)，可視化樹中的變化。
4、查看活動代碼段
創(chuàng)建組件時自動生成代碼段，單擊顯示中的組件，查看其代碼和HTML元素。
5、添加VUE路由
添加新路由并查看與該路由關(guān)聯(lián)的所有組件，完成后，將項目導(dǎo)出到文件系統(tǒng)。
安裝使用
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ā)模式下運行
quasar dev -m electron
5、打包成.dmg 或 .exe
quasar build -m electron
6、下載程序到本地后，運行。新建項目，程序會默認(rèn)建立一個根App組件和路由上傳一個模型圖像。
7、要添加新組件，在“組件名稱”框中鍵入其名稱，并選擇應(yīng)由該組件呈現(xiàn)的任何HTML元素。還可以在創(chuàng)建后添加HTML元素，方法是在顯示中選擇組件，然后選擇HTML元素。
8、添加新的路由，然后在側(cè)邊欄可以查看所有的組件和路由。
軟件特性
- 可上傳前端模型圖像
- 包含可視化可拖動和可調(diào)整大小的組件
- 創(chuàng)建組件的父子層次結(jié)構(gòu)
- 將html元素添加到組件
- 創(chuàng)建Vue Router使用的路由
- 每個組件的實時生成的可預(yù)覽代碼段
- 實時生成的樹視圖，以幫助可視化父子層次結(jié)構(gòu)
- 保存項目并打開以前的項目
- 導(dǎo)出工作前端的完整樣板代碼
- 重做/撤銷功能
- 可嵌套Html元素
- 能夠從選定的VUE組件導(dǎo)航到HTML元素
- 每個路由分配一個圖像
- 可以把Vue組件設(shè)定為特定的圖層
- 加載項目的同時加載路由圖像
- 上傳模型圖像兼容windows
百度_baidu.com
百家號_baijiahao.baidu.com
