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>

效果如图：

vue下载、引入vis相关推荐

vue怎么引入外部地址_vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
vue下载大文件时浏览器不显示下载进度
vue下载大文件时浏览器不显示下载进度问题描述最近开发中遇到个问题,项目需要下载大文件(音视频),由于后端给我的是视频的地址而不是直接返回流,所以前端用了XMLHttpRequest获取视频流并实 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue组件引入scss变量_SCSS特色的Vue.js ui组件设计系统
vue组件引入scss变量 Kotti设计系统 (Kotti Design System) This design system helps to unify our design language ...
Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目
上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客上一篇博文已经对Node.js的安装与配置进行了详细介绍. 另外:文中项目存放的路径及项目名称可根据自身实际情况进行 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...

vue下载、引入vis

vue下载、引入vis相关推荐

最新文章

热门文章