mxDev
visual design tools for javascript web project ,such as vue react
??????ui界面的開發(fā)設(shè)計(jì)投队，如果有可視化設(shè)計(jì)工具的幫助，無疑會(huì)起到事半功倍的效果爵川。在web項(xiàng)目組件化的時(shí)代敷鸦。一款優(yōu)秀的可視化工具會(huì)在概要設(shè)計(jì)，網(wǎng)站總體設(shè)計(jì)寝贡，交互設(shè)計(jì)扒披，業(yè)務(wù)邏輯實(shí)現(xiàn)，api測試等方面帶來巨大的效率提升圃泡。MxDev輔助設(shè)計(jì)工具致力于幫助設(shè)計(jì)開發(fā)人員更好碟案，更快的進(jìn)行設(shè)計(jì)開發(fā)，為有效降低軟件企業(yè)設(shè)計(jì)開發(fā)成本颇蜡，提高軟件質(zhì)量穩(wěn)定性价说，縮短軟件交付時(shí)間貢獻(xiàn)力量辆亏。
??????mxDev是一款面向vue和react技術(shù)的輔助設(shè)計(jì)工具，其重要特性有：
一． 特點(diǎn)
- 工具以vscode插件方式展現(xiàn)鳖目，和vscode編程無縫結(jié)合
-
任意拖拽扮叨，實(shí)時(shí)展示
??????控件可由組件候選區(qū)拖拽到主編輯區(qū)，也可在主編輯區(qū)的不同父組件之間來回拖拽领迈，將來更可和組件樹之間進(jìn)行拖拽彻磁。
主編輯器區(qū)的效果即真實(shí)頁面的展示效果，不是模擬出來的狸捅，可以直接和組件進(jìn)行人機(jī)交互衷蜓。就目前來說，就已經(jīng)非常適合進(jìn)行頁面原型設(shè)計(jì)薪贫，未來進(jìn)一步完善后恍箭，更可以用來輔助業(yè)務(wù)細(xì)節(jié)實(shí)現(xiàn)刻恭。 - 組件屬性即時(shí)修改瞧省，視圖效果即時(shí)生效。
??????因?yàn)椴捎昧讼冗M(jìn)的組件顯示技術(shù)鳍贾，即使對(duì)層次較深的組件進(jìn)行屬性修改鞍匾，視圖刷新速度也會(huì)保持飛快。 - 完善的組件屬性編輯支持骑科，包括屬性類型及屬性說明提示等
- 支持html標(biāo)簽和vue第三方庫標(biāo)簽
1.jpg
二． 不同區(qū)域說明
1. 組件候選區(qū)
??????主要支持將html和vue第三方庫的組件以圖表方式羅列展示橡淑，并支持拖拽到右邊的主編輯器區(qū)。
??????目前只支持html <DIV>和element-ui絕大部分組件咆爽，未來還會(huì)完善html標(biāo)簽支持梁棠，支持slot，支持chart等第三方組件斗埂。
2. 屬性編輯區(qū)
??????當(dāng)在主編輯區(qū)單擊一個(gè)組件的時(shí)候符糊，會(huì)選中這個(gè)組件，在狀態(tài)條上會(huì)顯示這個(gè)組件的編輯id呛凶，編輯id的結(jié)構(gòu)為：“組件類型名-sequence”男娄，屬性編輯區(qū)也會(huì)展現(xiàn)其所有的屬性和當(dāng)前值，可以在屬性表格上直接修改屬性值漾稀。屬性值被修改之后是處于dirty狀態(tài)的模闲，需要點(diǎn)擊一下表格右上角的保存按鈕才能將修改同步刷新到視圖。注意處于dirty狀態(tài)的屬性在其名稱后面會(huì)有一個(gè)*崭捍。
??????當(dāng)單擊屬性名稱的時(shí)候尸折，會(huì)展示這個(gè)組件屬性的相應(yīng)幫助文檔。
??????當(dāng)前只支持number殷蛇，string和boolean類型屬性的編輯实夹，其他類型會(huì)在下一個(gè)大版本中予以支持拣播。
??????在近期計(jì)劃中（1）還會(huì)陸續(xù)支持v-for，v-if收擦，v-model等directive和組件內(nèi)聯(lián)樣式表等特殊屬性的編輯 （2）支持組件事件綁定贮配。
3. 主編輯器
??????主編輯器就是展現(xiàn)頁面的部分，MxDev在實(shí)現(xiàn)主編輯器的時(shí)候就是在每個(gè)組件外面做了一層薄薄的控件封裝塞赂，所以主編輯區(qū)展現(xiàn)的效果基本上就是項(xiàng)目頁面的實(shí)際效果泪勒。
??????主編輯器的組件同樣可以隨意拖拽，拖拽時(shí)也需要和target進(jìn)行匹配宴猾，如果不能匹配是無法激發(fā)黃色閃爍效果的圆存。有的輸入組件，輸入焦點(diǎn)觸發(fā)和拖拽控制相互沖突仇哆，所以在主編輯區(qū)要想直接輸入某些組件沦辙，比如輸入input，需要先雙擊這個(gè)組件以屏蔽拖拽并觸發(fā)輸入焦點(diǎn)讹剔。
??????注意：當(dāng)目前為止油讯，因?yàn)樯胁荒芙壎╲-model，所以輸入之后仍然是沒有效果的
??????有些組件比如el-table-column被拖拽到el-table后就無法被選中延欠，有的組件比如el-divider本身就屏蔽click事件陌兑，也無法被選中，在即將出現(xiàn)的下一個(gè)版本中由捎，會(huì)用組件樹的形式來解決這個(gè)問題兔综。
4. 操作按鈕
??????按鈕處于整個(gè)插件界面的右上角，截圖如下：
??????清空：清空主編輯器區(qū)所有組件
??????刪除：刪除當(dāng)前選中組件及其子組件
??????code：生成vue文件狞玛，并使用vscode的editor來進(jìn)行展示软驰。這個(gè)文件可以手動(dòng)拷貝到source文件夾下，并換名保存心肪。
三． 拖拽說明
??????拖拽是圖形化設(shè)計(jì)工具進(jìn)行人機(jī)交互時(shí)的靈魂锭亏，mxDev工具在拖拽控制上更是做到了細(xì)致貼心。
- 拖拽對(duì)象分為dragSource和dropTarget蒙畴，source和target必須匹配贰镣。比如el-col圖標(biāo)只能拖拽到el-row組件內(nèi)部或其他兄弟el-col組件旁邊，其他組件內(nèi)部是拖拽不進(jìn)去的膳凝。
- 拖拽分為“拖拽到內(nèi)部”和“拖拽到旁邊”
??????拖拽source到target內(nèi)部時(shí)碑隆，被拖拽進(jìn)入的target組件會(huì)呈現(xiàn)“黃色閃爍”的樣式，當(dāng)拖拽到target組件的任意一個(gè)邊的時(shí)候蹬音，target的這個(gè)邊會(huì)出現(xiàn)“黃色閃爍”的樣式上煤。 - 拖拽到內(nèi)部分為兩種情況
(1) source圖標(biāo)比target要小，直接拖拽進(jìn)內(nèi)部即可
(2) source圖標(biāo)比target要大著淆，可以使用“四角進(jìn)入”拖拽劫狠，所謂四角進(jìn)入拴疤，就是source圖標(biāo)或組件的任意一個(gè)角（corner）和target對(duì)應(yīng)的角重合的方式(source的角進(jìn)入到target的角)進(jìn)行拖拽。
??????個(gè)別組件在編輯器區(qū)展示時(shí)尺寸比較狹窄独泞，拖拽時(shí)要有耐心呐矾，直到目標(biāo)父組件呈現(xiàn)黃色閃爍樣式的時(shí)候，松開鼠標(biāo)完成拖拽懦砂。
四． 插件安裝
??????可以在vscode的extensions中搜索mxDev自動(dòng)進(jìn)行下載安裝蜒犯，也可以自git上下載之后，自己打包安裝荞膘。
??????Github地址：https://github.com/jonenine/mxDev
