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

本文介绍了如何在Vue工程中创建utils文件夹,用于统一管理工具函数。通过在index.js中导入并导出各个函数和类,然后在main.js中挂载到Vue实例,实现组件间的便捷调用。作者分享了个人前端开发经验,提供了全面的前端学习资源,邀请同行加入技术交流群,共同进步。
摘要由CSDN通过智能技术生成

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. m y u t i l s . t

  • 8
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值