vue工程代码优化:新建utils文件夹统一管理工具函数

目录

一、总体思路

二、具体流程

1、在src下面新建一个目录utils文件夹

2、在utils文件夹下新建一个index.js文件

3、main.js挂载到vue实例中

三、如何使用


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类下面的方法

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值