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

Myth丶恋晨 2021-07-24 17:13 857阅读 0赞

**目录**

一、总体思路

二、具体流程

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