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