vue项目遇到的坑（vue项目中的某个组件调用外部js）

第一步骤
当项目做一个圆环进度条的时候，我自己用canvas写了一个js,并且封装成函数。当时想到的是直接将函数写在组件中然后进行调用：
报错了：Uncaught TypeError: Cannot read property ‘getContext’ of null
然后意识到canvas的getContext方法需要在页面文档加载完成之后才会去触发识别这个属性。所以canvas写的代码不能直接放在组件当中。
第二步骤
后面就将canvas的js代码写在外部，然后用在index.html去调用，但是发现这样很麻烦，应该当页面无论是初始化还是加载某一个组件时候，都会去调用这类代码，有可能还会报错。
重点解决方法
后面想了想，能不能将canvas.js作为一个模块在需要引用这个模块的组件中去调用它。去往上看了一下这类知识。也找到了方法，之后就是实施起来。canvas.js如下所示：
function  loadCanvas(){}
export {loadCanvas};
组件中调用 import loadCanvas from ‘loadCanvas.js’
由于我的vue项目是用vue-cli去生成simple版本的，这个时候继续出错，报错代码如下： webpack_require.i(…) is not a function。
想想这个时候头都大了，一个自写的canvas插件引入到vue的项目中衍生出这么多个问题。但是没办法，还得解决不是。
然后再命令行npm中去查看错误报告，发现