先看一下实现效果吧  ，如下图  ：

        为什么要写这篇文章呢？因为之前有浅浅的了解一下vis.js，后期开发中没有使用vis，所以太深奥的也不懂，但是当时是用js写的。这两天有人问我用vue怎么写，然后说看到很多地方说npm，他连npm在哪输入都不知道。

        那么下面这篇文章就超级啰唆的将一下npm install vis在哪输入，输入之后要怎么使用？？？

        首先你总得需要有个vue项目吧，其次你有vue项目的话，你是不是还需要一个写代码的编辑器呀。

        我正常使用的是webStrom,可在下图所示终端位置输入命令进行安装，安装完成后package.json中会有你安装的vis出现

npm install vis

         当然，如果你使用的是vsCode,如下图所示打开终端输入npm安装，，，当然我这边vsCode没有拉项目进来，你肯定要拉自己的项目进来，在项目下npm。

        在啰唆一点，如果你还是找不到终端，快捷键ctrl+shift+`打开终端。

         好了，安装完了，接下来开始导入。有人问我导入在哪里导，我这个暴脾气一下子就上来了，当然是你哪里需要使用vis往哪个文件导啊。。。。

       如果还不知道，那我就在啰唆一点，那你是不是有个vue文件准备把拓扑图放在这个文件写呀，那你肯定在这个文件导入呀。

        接着问题又来了，那我这个导入写哪呢？我告诉你写在

         这样整个完整的功能就实现了，不知道这样算不算手把手教学了。如果还不懂那我真的，，，，算了，在上一份从头到尾的完成代码吧。。

        这样应该就懂了吧。。。