目录
vue项目工程中,有很多公用的js函数,为了便于集中管理,可以在src下面新建一个utils文件夹统一管理。这样在使用时候直接调用这个utils文件夹的内容就行。
一、总体思路
src下面新建一个utils文件夹,里面存在所有的函数js文件,utils文件夹下面在建一个index.js文件,可以将所有的函数js文件注册到这个index.js里面,方便统一管理调用。最后将这个index.js在main.js里面注册到vue实例中
二、具体流程
1、在src下面新建一个目录utils文件夹
2、在utils文件夹下新建一个index.js文件
index.js里面的内容:
import test1 from "./test1"; //引入单个函数方法
import test2 from "./test2"; //引入单个函数方法
import * as test3 from "./test3"; //引入多个函数方法
import classtest from "./classtest"; //引入class类
export default {
test1:test1,
test2:test2,
test3:test3,
classtest:classtest,
}
其中test1.js文件写法:
function test1(){
alert("123");
}
export default test1;
test3.js文件写法:
export function test3(){
alert("test3");
}
export function test4(){
alert("test4");
}
classtest.js文件写法:
class Person{
// 构造函数
constructor(x,y){
this.x = x;
this.y = y;
}
todoSome(){
alert(this.x + "的年龄是" +this.y+"岁");
}
}
export default Person;
3、main.js挂载到vue实例中
//main.js文件中
import myutils from './utils/index'; //引入文件
Vue.prototype.$myutils=myutils; //挂载实例属性,所有的往vue实例的prototype属性中挂载,这样挂 载后就可以使用this.来调用了。
三、如何使用
如何使用单个方法、多个方法、class类的js调用方法不一样:
this.$myutils.test1(); //调用单个方法
this.$myutils.test2();
this.$myutils.test3.test4(); //调用多个方法中的某个方法
var test= new this.$myutils.classtest('haha','33'); //调用类js,先new,注意根据constrator传参
test.todoSome(); //调用class类下面的方法