vue-cli2使用cdn方式引入cytoscape

1. index.html头部引用

  

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/_@[email protected]@@types/cytoscape/index.d.ts,复制其内容到上一步新建的文件cytoscape.d.ts;删除node_modules下的_@[email protected]@@types

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

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

 

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

转载于:https://www.cnblogs.com/XHappyness/p/9915373.html

你可能感兴趣的:(vue-cli2使用cdn方式引入cytoscape)