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