1.前言
jTopo（Javascript Topology library)是一款完全基於HTML5 Canvas的關系、拓撲圖形化界面開發工具包。其體積小，性能優異，由一群開發愛好者來維護。唯一感覺不足的是它是一個純js庫，沒有像使用ES6語法，不能像模塊化開發那樣使用import導入，
由於博主的項目是使用vue-cli搭建的模塊化開發項目，想要使用第三方庫最好的方式是通過npm install xxx安裝，然后在項目里import xxx來使用。但是在JTopo官網上並沒有發現有該庫的npm包，在www.npmjs.com上搜索JTopo，雖然找到了該庫的npm包，但是這些包都是由一些個人開發者通過修改源碼上傳的，並且年限過久，博主擔心直接使用的話可能會有一些詭異的bug，所以博主研究了一下，如何在vue-cli項目中直接導入第三方js庫，幸運的是，很快就找到了辦法，並且很容易哈，現將方法記錄下來，並提供demo，供大家參考。
2.解決辦法
我們知道，無論是什么項目，最終通過打包后跑在瀏覽器上的肯定是一個html文件，在Vue中就是根目錄下的index.html,在該文件中會將webpack打包后的build.js文件通過<script>標簽方式引入，既然如此，我們可以大膽想象一下，我們可以認為jtopo.js就是webpack打包輸出的文件，我們也將其手動在index.html文件中通過<script>標簽方式引入是不是就可以使用了呢。通過實驗，果真如此。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JTopoInVue</title>
</head>
<body>
<div id="app"></div>
<script src="/lib/jtopo-0.4.8-min.js"></script>
<script src="/dist/build.js"></script>
</body>
</html>
這樣引入之后，我們就可以在項目中按照jtopo官方文檔那樣使用了該庫啦。demo猛戳這里
3.不足之處
jtopo官網還提供了工具欄，該工具欄功能是在toolbar.js中實現的，而該js文件內部依賴了jQuery，所以要想在項目中使用該工具欄，必須安裝jQuery，而博主在項目中沒有使用工具欄，所以就沒有在繼續研究，如果有這方面需求的小伙伴可自行研究使用。
（完）