1. index.html头部引用

  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.19/cytoscape.min.js"></script>

2. 修改webpack.base.cong.js

module.exports = {
...
externals: {
cytoscape: "cytoscape"
}
...
}

3. 在相关组件的ts中

import { Vue, Component, Watch, Prop } from "vue-property-decorator"
import cytoscape from "cytoscape"
@Component({}) export default class Cytoscape extends Vue {
/* ---- 变量 ---- */
cy; /* ---- 函数 ---- */ /* ----生命周期 ---- */
mounted() {
this.cy = cytoscape({
                           container: document.getElementById('cy'); // 组件中要有id="cy"的dom元素
            ...   //配置项
});

}
}

4. 注意,我这里使用的是ts,所以需要cytoscape 的类型声明文件,使用npm install @types/cytoscape 安装的声明文件是2.7.10版本的(估计后面版本没有及时更新),落后于我项目中引入的cytoscape 3.2.19版本,有些声明会不一致。

解决办法:a. 在自己项目的types文件夹中新建文件cytoscape.d.ts;

b. 找到./node_modules/_@types_cytoscape@2.7.10@@types/cytoscape/index.d.ts,复制其内容到上一步新建的文件cytoscape.d.ts;删除node_modules下的_@types_cytoscape@2.7.10@@types

c. 在使用cytoscape 3.2.19报错时,去修改cytoscape.d.ts声明;

d. 以上只是暂时解决方案,期待cytoscape同步类型声明文件

cytoscape其他使用方式: http://js.cytoscape.org/#getting-started/including-cytoscape.js
我之所以选择使用cdn引入,主要是因为项目已经引入不少的框架,导致打包上线时项目太大,对于这种本身功能较强比较厚重而我用到的功能又不多的框架,便使用cdn引入了

vue-cli2使用cdn方式引入cytoscape的更多相关文章

  1. vue-cli3使用cdn方式引入moment.js

    1. index.html引入: <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"&g ...

  2. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

  3. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  4. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  5. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  6. 转载 -- Cocoapod方式引入百川SDK -报错[!] Unable to find a specification for `xxx`

    [cocopad集成百川sdk官网] iOS需要填写BundleID .BundleID要是当前应用的BundleID.勾选淘宝登录基础包下载SDK. 注意事项:将下载的SDK中的身份图片yw_122 ...

  7. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  8. VScode保持vue语法高亮的方式

    VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 C ...

  9. antd 用 customize-cra 方式引入 sass

    antd 用 customize-cra 方式引入 sass 只需要安装:node-sass 即可

随机推荐

  1. OpenWrt超时检测

    参考http://www.right.com.cn/forum/thread-261702-1-1.html vim /home/ihid/chaos_calmer/feeds/luci/module ...

  2. [Codefroces401D]Roman and Numbers(状压+数位DP)

    题意:给定一个数,求将该数重新排列后mod m==0的方案数 重新排列就考虑到用到哪些数,以及此时mod m的值 于是dp[i][j]表示状态i中mod m==j的方案数 注意:转移的时候只要找到一种 ...

  3. filebeat5与filebeat6配置index的差异

    filebeat6配置index需要添加setup对应项,不然启动会报错. 6.0以后版本具体设置在filebeat.yml如下: setup.template.name: "myname- ...

  4. Java设计模式(4)——创建型模式之单例模式(Singleton)

    一.概述 弥补一下之前没有给设计模式下的定义,先介绍一下设计模式(引用自百度百科): 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计 ...

  5. 上海Uber优步司机奖励政策(12月28日到1月3日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 回写盘写速度被限速为10M左右

    问题现像如下图所示: 用hd-speed等测试虚拟盘速度都能达到90M/s左右,但复制文件到虚拟盘速度最高只有10M/s 原因:由于客户机开机加载这个随机驱动和随机进程后,会对磁盘启动进程等有扫描检查 ...

  7. 「日常训练」Queue(Codeforces Round 303 Div.2 D)

    简单到让人不敢相信是D题,但是还是疏忽了一点. 题意与分析 (Codeforces 545D) 题意:n人排队,当一个人排队的时间超过他需要服务的时间就会厌烦,现在要求一个最优排列使得厌烦的人最少. ...

  8. 提权基础-----mysql-udf提权

    1.总结关于udf提权方法 通过弱口令,爆破,网站配置文件等方式得到mysql数据库帐号密码,---还要能外连 (1).将udf.dll代码的16进制数声明给my_udf_a变量 set @my_ud ...

  9. Python3安装pywin32模块

    假如你安装的是Python3.6, 那么可以直接用PyCharm或者pip安装pywin32模块: 但是, 由于我安装的是Python3.7, 所以PyCharm或者pip都无法成功安装pywin32 ...

  10. 网站端测试常见BUG

    1.翻页 翻页时,没有加载数据为空,第二页数据没有请求 翻页时,重复请求第一页的数据 翻页时,没有图片的内容有时候会引用有图片的内容 2.图片数据为空 图片数据为空时,会保留为空的图片数据位置 3.链 ...