需求中会用到公共的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’

本文探讨了在Vue项目中如何有效利用公共方法和JS模块化引入,包括message提示和桩号转换操作的封装及引用技巧,避免错误引入方式导致的问题。
403

被折叠的 条评论
为什么被折叠?



