Vue之引用第三方JS插件,CKPlayer使用

前言：

创新互联建站是一家专业提供山亭企业网站建设,专注与成都网站设计、做网站、成都外贸网站建设公司、html5、小程序制作等业务。10年已为山亭众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

不管是VUE还是Angular，有时候我们需要使用到一些js插件，但是的源库中并没有相应的插件包，这个时候我们需要如何引入并且使用呢？这个问题其实非常简单，接下来我以VUE为例写给大家介绍一下如何加载第三方js插件。
备注：今天写这篇文章是在是出于同事的老婆的弟弟的老婆学起了前端vue（关系有点绕），所以问到我这个问题，我就总结一下，其实她问的是vue中如何使用ckplayer插件。所以我会先用ckplayer插件进行演示在VUE下的使用。

---

概述
不管是具体是什么js插件，vue项目也好，angular项目也罢，最终打包都是打包成js压缩文件，资源文件，入口文件（index.html）.所以就算你要使用的js插件在源中没有对应的typescripte版本也不要着急，我们依然可以使用它。

1.下载CKPlayer插件

CKPlayer官方下载地址
下载后解压直接放入到static目下

2.放入Vue项目中的static目录下，在入口文件(index.html)中引入js

3.构建ckplayer组件，使用ckplayer插件

ckplayer组件代码如下（按照官方文档写的，解压后index.html中有可自行定义方法进行测试）：

5.效果截图

到这了，ckplayer的引用以及使用方式就完成了。

---

扩展
除了上述的直接引入到入口文件的方式，还有什么其他的方式吗？我找了下资料给大家总结如下：

1.绝对路径引入，全局使用。

在index.html文件中使用script标签引入插件。
该种方式就是上面演示ckplayer插件使用的方式。
备注：
    这种方式的引用，会在开启ESLint时，报错，可以通过/* eslint-disable*/去掉检查，但是这样并不友好，如果使用的地方很多，都得加，那不是很费事吗。

2.绝对路径引入，配置externals，Import后使用

在index.html文件中使用script标签引入插件。
然后在webpack.base文件中找到externals。
使用的地方用Import引入这个插件即可，（根据配置名进行引入）

这种方式就可以解决第一种方式的ESLint检查问题。虽然全局引入，但是这依然有一个问题就是使用时需要Import的问题，因为每次都要import也确实很麻烦，哈哈，人都是这样得寸进尺（懒死了）。

3.webpack配置plugins,无须Import，全局可用

配置webpack的plugins属性，加入一条插件配置，
然后全局可以用

备注：这个解决了1，2的问题，并且index.html中也不需要使用script标签进行引入了，强烈推荐此种方式进行使用。

4.webpack配置alias,Import后使用

这种方式跟第二种方式，很相似。
配置webpack中的alias，创建插件的别名，
然后使用时候需要Import

进一步扩展

这里是将的VUE，其实Angular也是相同的，所以我就不多写了，你们可以自行实验。

本文标题：Vue之引用第三方JS插件,CKPlayer使用
链接分享：http://mswzjz.cn/article/gjiedc.html