说说我是怎么把仪表盘插件JustGage引入vue项目中的
一、前言
上周五我接到一个任务，让我把某个js插件放到vue的项目里使用，我打开这个网址一看，居然还要付费。机灵的我打开F12一看，把代码扒了下来，百度发现是一个国外知名开源仪表盘插件名叫JustGage。
于是开始了我这个菜鸡的漫长旅程。
二、如何引入JustGage
这个过程非常之艰难，花费了我一个星期上班时间内闲杂时间，最后终于解决。
JustGage插件依赖raphael这个svg库，所以一共需要引入的文件是两个，一个是raphael-2.1.4.min.js，另一个就是justgage.js。在普通的html页面里引入这两个文件，再初始化插件就可以直接使用。但如果直接引入到vue项目里，则会疯狂报错。
1.插入插件初始标签和初始化
在你需要引入插件的地方插入一个标签：
<div id="g1"></div>
在需要初始化的时候：
var g1 = new JustGage({
id: "g1",
min: 0,
max: 100
});
g1.refresh(50);2.引入依赖库raphael
首先尝试引入raphael-2.1.4.min.js文件：
import '文件路径/raphael-2.1.4.min.js'
会得到一个报错：
Module build failed: SyntaxError: 文件路径/raphael-2.1.4.min.js: Deleting local variable in strict mode
分析这个报错会发现是因为在严格模式下不能删除局部变量。
我把raphael-2.1.4.min.js文件里的代码格式化后找到具体的报错位置(2631行)：
b.ninja = function() {
return A.was ? z.win.Raphael = A.is: delete Raphael,
b
},发现这里删除了Raphael变量，所以报错。为了解决这个问题我在.babelrc文件夹里设置不用严格模式检查这个文件：
"ignore": [
"文件路径/raphael-2.1.4.min.js"
]这时又出现了一个新的报错：
B[b] is not a function
再去看源码发现非常困难了，因为源码里的变量全部用的abcd这种字母来表示的，完全不知道实际含义。这时我想到这个源码是压缩过的，于是我去github找到了raphael的源码，下载raphael.js文件，这个就是没有压缩的完整源码文件。
在项目里引入这个文件，在created里面就可以正常打印Raphael了。
到此第一步就成功了。
3.引入仪表盘插件JustGage
首先还是尝试引入justgage.js文件：
import '文件路径/justgage.js'
果不其然的报错了，不报错才有鬼。
JustGage is not defined
为什么引入后JustGage还是未定义呢？打开文件一看就能发现这个插件没有用es6的方法export，也不符合AMD、CMD或者CommonJS的规范。自然import是没有生效的。
这时就需要自己动手修改一下这个文件。
修改引入方式：
import JustGage from '文件路径/justgage.js'
在文件最开头修改：
var JustGage = function(config) {
...
}在文件的最后修改：
export default JustGage
这时再打印JustGage发现又报了一个错：
eve is not defined
但仪表盘已经显示在页面上了！只不过没有刻度和动画，可以猜测现在只差eve.js这个文件了，引入此文件就成功了。
4.引入必须依赖eve.js文件
但是这个eve.js文件去哪里找呢？
我在raphael.js里搜索“eve”发现了一个地址：
./node_modules/eve-raphael/eve.js
先需要
npm install raphael --save
然后到/node_modules/eve-raphael地址下找到eve.js这个文件，复制到和另外两个文件同一个目录里。
然后在justgage.js的最上面引入：
var eve = require('./eve.js');此时就没有任何报错了。
可以在vue的项目里使用JustGage插件了！！！T_T
问题是这几个文件有点大....- -||