vue /vue-cli3 项目调用自己封装的js文件

1. 在入口文件main.js中引入js文件,然后挂载到vue的原型上:

//引入公共js
import messagebox from "../myJs/messagebox.js"
import publicmethods from "../myJs/publicmethods"
Vue.prototype.messagebox=messagebox;
Vue.prototype.publicmethods=publicmethods;

如图所示:

vue /vue-cli3 项目调用自己封装的js文件_第1张图片

通过this关键字引用:

this.publicmethods.加上jsz中需要引用的方法名即可

如图:

vue /vue-cli3 项目调用自己封装的js文件_第2张图片

途中踩的坑:

1. 在需要引入的js中的末尾需要用export将外部引用的方法导出,如图:

vue /vue-cli3 项目调用自己封装的js文件_第3张图片

2. 由于js文件中的方法是从组件中复制过来的,忘记将调用自己js中的方法的this. 删掉   调用自己js中的方法不需要用this.来调用,直接用即可,不过加上this.在浏览器工具调试时会发现 这个方法根本进不去,所以很快就看出错误了.

vue /vue-cli3 项目调用自己封装的js文件_第4张图片

 

你可能感兴趣的:(vue /vue-cli3 项目调用自己封装的js文件)