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

时间:2024-04-06 17:15:48

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

可以发现,在util.js中又引入了util.message.js,并使用const util ={ }中定义一个$message变量,即可引入util.message.js中的方法。
vue的引用公共js或工具js的方式

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

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

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

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