如何在Vue-cli项目中使用JTopo

匿名 (未验证) 提交于 2019-12-02 23:43:01

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,供大家参考。

我们知道,无论是什么项目,最终通过打包后跑在浏览器上的肯定是一个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猛戳这里

jtopo官网还提供了工具栏,该工具栏功能是在toolbar.js中实现的,而该js文件内部依赖了jQuery,所以要想在项目中使用该工具栏,必须安装jQuery,而博主在项目中没有使用工具栏,所以就没有在继续研究,如果有这方面需求的小伙伴可自行研究使用。

(完)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!