程序運(yùn)行截圖如下：

首先要用npm導(dǎo)入的vis包

npm run vis

程序結(jié)構(gòu)如下：

源碼如下：

HelloWorld.vue

<template><div id="networkDemo" style="width:800px; height: 600px"></div></template><script>import {createNode} from 'JS/visTest.js' export default {name: 'HelloWorld',mounted(){this.init();},data () {return {msg: 'Welcome to Your Vue.js App'}},methods: {init(){createNode('networkDemo')}} } </script><style scoped> </style>

visTest.js

import vis from 'vis'export function createNode(idStr) {let 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'},]);let edges = new vis.DataSet([{from: 1, to: 3, label: 'Hello'},{from: 1, to: 2},{from: 2, to: 4},{from: 2, to: 5},{from: 3, to: 5}])let container = document.getElementById(idStr);let data = {nodes: nodes,edges: edges};let options = {};let network = new vis.Network(container, data, options); }

?

總結(jié)

以上是生活随笔為你收集整理的Web前端文档阅读笔记-vis.js在vue cli中的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。