ant-design-vue和elementui哪個(gè)好,ant-design-vue入門？很多人不了解，今天各百科為大家?guī)硐嚓P(guān)內(nèi)容，下面一起來看看吧。
俗話說，一圖勝千言。一張小圖可以代替一大段文字描述，也可以直觀的描述業(yè)務(wù)流程，展示算法.這里有一些我最近收集的開源在線繪圖工具。
Ant Design Pro項(xiàng)目地址：https://pic.qubaike.com/pic/2023-03-21/3ujihe2qzin
Ant Design Pro流程圖編輯器
Ant Design Pro是一款面向中端平臺(tái)的開箱即用前端/設(shè)計(jì)解決方案。在預(yù)覽網(wǎng)站中，圖形編輯器下有流程圖、腦圖、拓?fù)渚庉嬈鳎际谴蟛銎?。界面挺漂亮，功能?shí)用但不夠強(qiáng)大。你可以選擇將它作為一個(gè)在線繪圖工具集成到你自己的項(xiàng)目中。集成時(shí)，這個(gè)工具有很多可擴(kuò)展性：擴(kuò)展畫布左側(cè)的節(jié)點(diǎn)類型(節(jié)點(diǎn)是圖片)；保存擴(kuò)展流程圖、版本控制和版本比較；動(dòng)態(tài)調(diào)整畫布中節(jié)點(diǎn)的大小等。
Wookteam項(xiàng)目地址：https://pic.qubaike.com/pic/2023-03-21/cb4fhuditse
工作組在線流程圖
旭團(tuán)隊(duì)在線思維導(dǎo)圖
Wook團(tuán)隊(duì)在線任務(wù)甘特圖
WookTeam是用PHP編寫的輕量級(jí)開源在線團(tuán)隊(duì)協(xié)作工具，提供在線思維導(dǎo)圖、在線流程圖、在線任務(wù)甘特圖，以及文檔工具、項(xiàng)目管理、任務(wù)分配、知識(shí)庫管理等其他工具。前端框架采用Vue 2.0 Iview UI。該工具界面美觀，功能豐富。唯一的一點(diǎn)就是對PHPer比較友好。Java開發(fā)人員在集成和轉(zhuǎn)換時(shí)需要一定的工作量。
MxGraph項(xiàng)目地址：https://pic.qubaike.com/pic/2023-03-21/v1vg11mzp0f
MxGraph包含一個(gè)用JavaScript編寫的客戶端軟件，以及一系列后端(可以是Java，PHP，NET)用于各種語言?？蛻舳塑浖且粋€(gè)圖形組件，帶有可選的應(yīng)用程序包裝，已集成到現(xiàn)有的Web界面中。客戶端需要一個(gè)Web服務(wù)器來將所需的文件傳送到客戶端，或者它可以從本地文件系統(tǒng)運(yùn)行，而不需要Web服務(wù)器。這個(gè)工具入門簡單，界面強(qiáng)大，組件相對豐富，和下面說的JSPlumb不一樣。它可以導(dǎo)出為xml文件或保存為圖片。缺點(diǎn)是文檔不夠友好，沒有中文文檔，英語基礎(chǔ)差的學(xué)生很難上手。與jsPlumb相比，css不能用來自定義節(jié)點(diǎn)樣式，完全通過js完成，比較麻煩。
Visor.js項(xiàng)目地址：https://pic.qubaike.com/pic/2023-03-21/ssi4nsbqc0n
Visor.js示意圖
Visor.js基于JQUERYY，將在線繪圖應(yīng)用的核心基礎(chǔ)文件制作在畫布上。它支持鼠標(biāo)的拖放移動(dòng)、伸縮、旋轉(zhuǎn)和各種事件。該輪功能強(qiáng)大，控件豐富，擴(kuò)展性強(qiáng)，支持單個(gè)頁面預(yù)覽，開發(fā)文檔充足，具有一定的社區(qū)支持；缺點(diǎn)也很明顯。個(gè)人發(fā)展提交代碼不連續(xù)，上次提交是在兩年前。還有就是頁面不夠美觀，跟不上時(shí)代。還是一個(gè)很好的工具。熟悉JQUERYY的朋友可以快速上手。有興趣的可以重寫頁面讓它更漂亮，挑戰(zhàn)也不?。?。
https://pic.qubaike.com/pic/2023-03-21/zo3izj1fg5o VUE流程設(shè)計(jì)項(xiàng)目地址
VFD基于Vue Ant
Design Vue + JSPlumb，作為一款流程設(shè)計(jì)器組件，可作為流程圖、泳道圖等繪圖工具，面板組件布局合理，功能強(qiáng)大，操作方便快捷（可拖拽且快捷鍵豐富），保存后為一段json數(shù)據(jù)，便于保存及控制版本，也可保存為圖片，安裝使用方便，集成難度較小，有交流群。缺點(diǎn)是演示網(wǎng)站掛掉了，只可以通過圖片一覽真容。easy-flow項(xiàng)目地址：https://pic.qubaike.com/pic/2023-03-21/w3o1jboxeas
easy-flow示例圖
easy-flow示例圖
easy-flow是一款基于 VUE+ElementUI+JsPlumb 的流程設(shè)計(jì)器，通過 vuedraggable 插件來實(shí)現(xiàn)節(jié)點(diǎn)拖拽。支持拖拽編輯，連線自定義，加載給定數(shù)據(jù)，支持力導(dǎo)圖...與上面介紹的VFD近乎同樣的技術(shù)棧，頁面樣式更加美觀，同時(shí)，集成難度較小，雖然功能較少，但可擴(kuò)展性性強(qiáng)，持續(xù)更新也是一大亮點(diǎn)，有交流群，社區(qū)也較活躍。
Le5le-topology項(xiàng)目地址：https://pic.qubaike.com/pic/2023-03-21/sqx1a3bbgm0
Le5le-topology 是一個(gè)開源易擴(kuò)展方便集成的可視化在線繪圖工具，使用 Canvas + Typescript實(shí)現(xiàn)。采用引擎 + 圖形庫中間件的思路能夠方便、快速地?cái)U(kuò)展、集成到前端項(xiàng)目?？捎糜谖⒎?wù)架構(gòu)圖、流程圖/活動(dòng)圖/時(shí)序圖/類圖、拓?fù)鋱D、思維導(dǎo)圖/腦圖、動(dòng)畫、音頻/視頻等。分層架構(gòu)設(shè)計(jì)，插件輕量，且具有較好的性能，方便導(dǎo)入導(dǎo)出，可以保存為圖片或是SVG文件，支持在線制作云存儲(chǔ)多端分享。最厲害的是有一定的動(dòng)畫特效，更加便于展示業(yè)務(wù)流程及數(shù)據(jù)走向。社區(qū)強(qiáng)大，幫助文檔及教程特多，交流群豐富，對未來有明確的規(guī)劃。不僅僅是一個(gè)繪圖工具，更是一個(gè)強(qiáng)大的豐富的圖庫平臺(tái)。
總結(jié)：以上幾款在線繪圖工具，各有特點(diǎn)，有界面美觀的，有大廠出品的，有功能極其豐富的，有擴(kuò)展性極強(qiáng)的，但大部分都集成容易方便上手，感興趣的同學(xué)可以根據(jù)自己的需要進(jìn)行集成。
歡迎關(guān)注王小樂<來看我>
