vue的引用公共js或工具js的方式

需求中会用到公共的message提示,以及相应的桩号转换操作。
在这里插入图片描述
这时候将通用的提示和转换操作放入公共的js中,然后在需要用的的vue页面中进行相关引用,是非常方便的。
需要注意的是,如果js的暴露方式,以及在vue页面中引用的方式不当,会引发报错。
示例:
在这里插入图片描述
如上引入方式中,在vue中引入了util和pileNumberConversion两个公共方法,同样来自util.js中。
util.js:
一、pileNumberConversion暴露方式为一个方法,所以在引用中需要使用{pileNumberConversion}的方式,对单独的方法进行引入。(不要忘记加大括号将方法包裹{ })
在这里插入图片描述
在filters中使用桩号转换过滤即可:
在这里插入图片描述
二、使用util.$message,showYesNo用来进行提示的方法:
在这里插入图片描述

可以发现,在util.js中又引入了util.message.js,并使用const util ={ }中定义一个$message变量,即可引入util.message.js中的方法。
在这里插入图片描述

综合以上两种引入方式,一种是引入单独的方法,另一种可以引入整个js并使用js中所有方法的方式,需要注意的是,引入单独方法时,要用{pileNumberConversion}包裹起来:
在这里插入图片描述
第二种方式引入整个js,并使用util.$message对不同方法进行调用的方式,则直接import这个js,并使用util变量调用即可。
在这里插入图片描述

还有一点需要注意的是,引入时为了简洁并且简化代码使用:“@路径”的方式进行import时,如果最后一级是文件夹,没有指向一个实际存在的js文件,vue则会默认找到名为index.js的文件进行引入。

示例:
如果存在一个index.js在labs包下,则可以直接使用@libs,即可引用到index.js中的方法。
import util from '@/libs/util’

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值