vue-cli2使用cdn方式引入cytoscape

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引入了