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. ruby 批量下载王者荣耀皮肤

    主要采用ruby Parallel库提供的多线程方式: require 'unirest' require 'open-uri' require 'parallel' require 'json' u ...

  2. MongoDB入门---文档查询之$type操作符&limit方法&skip方法&简单排序(sort)操作

    上一篇文章呢,已经分享过了一部分查询操作了,这篇文章呢?就来继续分享哈.接下来呢我们直接看MongoDB中的$type操作符哈.它呢是基于BSON类型来检索集合中匹配的数据类型,并且返回结果,在Mon ...

  3. Java设计模式(6)——创建型模式之原型模式(Prototype)

    一.概述 概念 // 引用自<Java与模式> UML图 第二种:登记式 二.实践 先导知识 对象的拷贝: 直接赋值:此时只是相当于a1,a2指向同一个对象,无论哪一个操作的都是同一个对象 ...

  4. VS2005源代码视图出现了小蓝点,怎么弄掉?

    VS2005源代码视图出现了小蓝点,怎么弄掉? 编辑->高级->查看空白行 就OK啦~ 这个查看空格的.. 或者Ctrl+E,S

  5. journalctl 日志查看方法

    1  概述 日志管理工具journalctl是centos7上专有的日志管理工具,该工具是从message这个文件里读取信息.Systemd统一管理所有Unit的启动日志.带来的好处就是,可以只用jo ...

  6. Redis系列八 使用Jedis

    使用Jedis jar操作Redis 1.配置redis.conf文件,修改 2.建java工程,加入 jedis jar包 3.代码示例: package com.ntjr.redis; impor ...

  7. linux_fdisk命令详解,关于分区的详解

    这篇文章写的十分详细,特别的好 fdisk -l 可以列出所有的分区,包括没有挂上的分区和usb设备.我一般用这个来查找需要挂载的分区的位置,比如挂上u盘. 实例解说Linux中fdisk分区使用方法 ...

  8. libevent学习四(Working with events)

    1.事件的分类 文件可写 文件可读 超时发生 信号发生 用户触发事件   2事件的生命周期        --非 persistent                                 ...

  9. c和c++的强制类型转换

    我们知道c语言中的类型转换只有一种, TYPE b = (TYPE)a; 而在c++中按照不同作用的转换类型将其细分为三个显示类型转换符号static_cast, const_cast, reinte ...

  10. Qt-第一个QML程序-1-项目工程的建立

    这个小程序是我发的第一个完整的QMl程序,这个程序也会持续的更新,一步一步的完善起来,最后会有一个什么样的结果也是不知道,只是把自己目前掌握的QML相关的东西都慢慢的写进来,积累起来 先展示一下运行结 ...