vue下载、引入vis

学习过程：vis​​​​​​​

1.先了解下官网文档

• 英文文档：https://visjs.org
• 中文文档：https://ame.cool/pages/a7d858/
• 实例：https://visjs.github.io/vis-network/examples/

2.用npm安装

npm install --save vis-network

3.在你要使用vis的页面应用

const vis = require("vis-network/dist/vis-network.min.js");
require("vis-network/dist/dist/vis-network.min.css");

⚠️css引用时，有两个dist，学习的时候发现很多只写了一个，导致报错

4.页面全部代码

<template>
  <div>
    <div id="mynetwork"></div>
  </div>
</template>
<script>
const vis = require('vis-network/dist/vis-network.min.js')
require('vis-network/dist/dist/vis-network.min.css')
export default {
  data() {
    return {
      nodes: new vis.DataSet([
        { id: 1, label: 'Node 1' },
        { id: 2, label: 'Node 2' },
        { id: 3, label: 'Node 3' },
        { id: 4, label: 'Node 4' },
        { id: 5, label: 'Node 5' }
      ]),
      edges: new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 }
      ]),
    }
  },
  mounted() {
    var container = document.getElementById('mynetwork');
    var data = {
      nodes: this.nodes,
      edges: this.edges
    };
    var options = {};
    var network = new vis.Network(container, data, options);
  }
}
</script>
<style scoped>
#mynetwork {
  width: 500px;
  height: 500px;
  border: 1px solid lightgray;
}
</style>

效果如图：