封装具体案例

一、调用1：

1、首先，在assets文件夹下，新建common文件夹，创建util.js

2、定义相关方法

//对外接口
export default {    
    text(){
        console.log("测试，测试！！！")
    }，

    throttle(fn){
        let canRun = true;
        return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn()
            canRun = true;
        }, 3000);
       }
    }
}

3.1、单个.vue文件使用

import utils from '@/assets/common/utils.js'

相对应的地方调用：utils.text();或者utils.throttle()

3.1、多页面使用

将公共方法挂载到this

1.在main.js中引入 import utils from '@/assets/common/utils.js'

2.Vue.prototype.$utils = utils

在.vue中调用：this.$utils.text();或者this.$utils.throttle(this.xxxFn())

二、封装公共方法2

1、首先，在assets文件夹下，新建common文件夹，创建util.js

2、在main中引用

        import utils from '@/assets/common/utils.js'

   Vue.use(utils)

utils.js文件内容如下：

//对外接口
export default {    
    install(Vue){
        Vue.prototype.format = function(){
            console.log('测试公共方法')
        }
    }
}

 3、在.vue文件中调用（因为已经在main.js全局实例化了，所以任何一个.vue文件的生命周期this.方法名即可使用）

created(){
    this.format()
}

vue中install方法使用请参考