Vue's reference to third-party JS plugins, Ckplayer use

Objective:

Whether it is vue or angular, sometimes we need to use some JS plug-in, but the source library does not have the corresponding plug-in package, this time we need to introduce and use it? This question is actually very simple, next I use Vue as an example to introduce you how to load third-party JS plugin.
Note: Today, this article is written in the wife of a colleague is out of the brother of the wives learned the front-end vue (relationship a bit around), so ask me this question, I summed up, in fact, she asked the Vue how to use the Ckplayer plugin. So I'm going to use the Ckplayer plugin to demonstrate it under Vue.

Overview
No matter what is the specific JS plug-in, Vue project or angular project, the final package is packaged into JS compressed files, resource files, Entry file (index.html). So even if you want to use the JS plugin in the source does not have a corresponding version of the Typescripte do not worry, we can still use it.

1. Download the Ckplayer plugin

Ckplayer official
Download and unzip it directly into the static

2. In the static directory in the Vue project, introduce JS in the Portal file (index.html)

3. Building Ckplayer components, using the Ckplayer plugin

The Ckplayer component code is as follows (according to the official documentation, the index.html can be tested in a self-defined way after decompression):

<template> <div> <label>ckplayer Player plugin vue uses demo</label> <div id= "video" ></div> </div></template><script>export Default {name: ' Ckplayerplugin ', data () {return {}}, Moun                Ted:function () {///mount after completion of var videoobject = {container: ' #video ',//container ID or classname Variable: ' Player ',//Play function name loaded: ' Loadedhandler ',/////////When the player is loaded after the function loop:true,//The end of the play loop Play Cktrack: ' static/ckplayer/material/srt.srt ',//subtitle file poster: ' Static/ckplayer/material/pos Ter.jpg ',//Cover picture preview: {//preview picture file: [' static/ckplayer/material/mydream_en1800_1010_                01.png ', ' static/ckplayer/material/mydream_en1800_1010_02.png '], scale:2},  Config: ',///specify config function debug:true,//whether to turn on debug mode drag: ' Start ',//drag properties to seek:           0,//time of default jump     The ad section starts Adfront: ' Http://www.ckplayer.com/yytf/swf/front001.swf,http://www.ckplayer.com/yytf/swf/fron T002.swf ',//Pre-advertising adfronttime: ' 15,15 ', Adfrontlink: ', Adpause: ' http://www                . ckplayer.com/yytf/swf/pause001.swf,http://www.ckplayer.com/yytf/swf/pause002.swf ', Adpausetime: ' 5,5 ', Adpauselink: ', Adinsert: ' Http://www.ckplayer.com/yytf/swf/insert001.swf,http://www.ckplayer. Com/yytf/swf/insert002.swf ', Adinserttime: ' 10,10 ', Adinsertlink: ', Insertt IME: ' 10,80 ', adend: ' Http://www.ckplayer.com/yytf/swf/end001.swf,http://www.ckplayer.com/yytf/swf/end002.s  WF ', Adendtime: ' 15,15 ', Adendlink: ',//Advertising part ends Promptspot: [                     Cue point {words: ' cue point text ', time:30},   {                     Words: ' Cue point text, time:150}],                    Video: [[' Http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4 ', ' video/mp4 ', ' Chinese standard definition ', 0], [' Http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4 ', ' video/mp4 ', ' Chinese HD ', 0], [' HT Tp://img.ksbbs.com/asset/mon_1703/eb048d7839442d0.mp4 ', ' video/mp4 ', ' English HD ', ten], [' http://img.ksbbs.co      M/asset/mon_1703/d30e02a5626c066.mp4 ', ' video/mp4 ', ' English Super Clear ', 0]]};  Define an object var player = new Ckplayer (videoobject);    }}</script><style scoped> #video {width:600px;    height:400px;  margin:0px Auto; }</style>

5. Effects

By the way, Ckplayer's references and usage are complete.

Extended
In addition to the above-mentioned ways of directly introducing to the portal file, is there any other way? I found the following information to summarize the following:

1. Absolute path Introduction, global use.

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

2. Absolute path Introduction, use after configuration Externals,import

在index.html文件中使用script标签引入插件。然后在webpack.base文件中找到externals。使用的地方用Import引入这个插件即可，（根据配置名进行引入）这种方式就可以解决第一种方式的ESLint检查问题。虽然全局引入，但是这依然有一个问题就是使用时需要Import的问题，因为每次都要import也确实很麻烦，哈哈，人都是这样得寸进尺（懒死了）。

3.webpack configuration plugins, no import required, global availability

配置webpack的plugins属性，加入一条插件配置，然后全局可以用备注：这个解决了1，2的问题，并且index.html中也不需要使用script标签进行引入了，强烈推荐此种方式进行使用。

4.webpack configuration Alias,import after use

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

Further expansion

Here is the Vue, in fact angular is the same, so I do not write more, you can experiment on their own.

Vue's reference to third-party JS plugins, Ckplayer use