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