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({
... //配置项
});
}
}
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的更多相关文章
- vue-cli3使用cdn方式引入moment.js
1. index.html引入: <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"&g ...
- Vue 创建组件的方式
Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015 版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
- 转载 -- Cocoapod方式引入百川SDK -报错[!] Unable to find a specification for `xxx`
[cocopad集成百川sdk官网] iOS需要填写BundleID .BundleID要是当前应用的BundleID.勾选淘宝登录基础包下载SDK. 注意事项:将下载的SDK中的身份图片yw_122 ...
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- VScode保持vue语法高亮的方式
VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 C ...
- antd 用 customize-cra 方式引入 sass
antd 用 customize-cra 方式引入 sass 只需要安装:node-sass 即可
随机推荐
- ruby 批量下载王者荣耀皮肤
主要采用ruby Parallel库提供的多线程方式: require 'unirest' require 'open-uri' require 'parallel' require 'json' u ...
- MongoDB入门---文档查询之$type操作符&limit方法&skip方法&简单排序(sort)操作
上一篇文章呢,已经分享过了一部分查询操作了,这篇文章呢?就来继续分享哈.接下来呢我们直接看MongoDB中的$type操作符哈.它呢是基于BSON类型来检索集合中匹配的数据类型,并且返回结果,在Mon ...
- Java设计模式(6)——创建型模式之原型模式(Prototype)
一.概述 概念 // 引用自<Java与模式> UML图 第二种:登记式 二.实践 先导知识 对象的拷贝: 直接赋值:此时只是相当于a1,a2指向同一个对象,无论哪一个操作的都是同一个对象 ...
- VS2005源代码视图出现了小蓝点,怎么弄掉?
VS2005源代码视图出现了小蓝点,怎么弄掉? 编辑->高级->查看空白行 就OK啦~ 这个查看空格的.. 或者Ctrl+E,S
- journalctl 日志查看方法
1 概述 日志管理工具journalctl是centos7上专有的日志管理工具,该工具是从message这个文件里读取信息.Systemd统一管理所有Unit的启动日志.带来的好处就是,可以只用jo ...
- Redis系列八 使用Jedis
使用Jedis jar操作Redis 1.配置redis.conf文件,修改 2.建java工程,加入 jedis jar包 3.代码示例: package com.ntjr.redis; impor ...
- linux_fdisk命令详解,关于分区的详解
这篇文章写的十分详细,特别的好 fdisk -l 可以列出所有的分区,包括没有挂上的分区和usb设备.我一般用这个来查找需要挂载的分区的位置,比如挂上u盘. 实例解说Linux中fdisk分区使用方法 ...
- libevent学习四(Working with events)
1.事件的分类 文件可写 文件可读 超时发生 信号发生 用户触发事件 2事件的生命周期 --非 persistent ...
- c和c++的强制类型转换
我们知道c语言中的类型转换只有一种, TYPE b = (TYPE)a; 而在c++中按照不同作用的转换类型将其细分为三个显示类型转换符号static_cast, const_cast, reinte ...
- Qt-第一个QML程序-1-项目工程的建立
这个小程序是我发的第一个完整的QMl程序,这个程序也会持续的更新,一步一步的完善起来,最后会有一个什么样的结果也是不知道,只是把自己目前掌握的QML相关的东西都慢慢的写进来,积累起来 先展示一下运行结 ...