Vue批量全局引入js及对应方法

Posted 2023-04-18

参考技术A 在正确位置创建自己的js文件，比如src下创建一个utils.js文件

里面创建多个方法，比如：parseTime、getFileType

在 main.js 中引入，添加

在需要用到的组件中，果断抽出来遛一遛
let fileType = this.$utils.getFileType(this.fileUrl)

Vue全局引入JS的方法

两种情况：

1. js为ES5的写法时，如下（自定义的my.js）:

function fun(){
    console.log(‘hello‘);      
}

　Vue中的全局引入方式为，在index.html中通过如下方式引入即可：

<script src="src/models/my.js"></script>

2. js为 ES6 模块化写法时，即 import，export形式，如下：

var fun=function(){
    console.log(‘hello‘);
}
export default fun;

　Vue中全局引入的方式为，在main.js中添加如下代码：

import fun from ‘src/models/my.js‘;
Vue.prototype.$xx=fun;  //其中$xx为新命的名。

　使用方法为，在要调用的地方使用如下代码调用：

var aa=this.$xx;

　　注意，模块化引入方式时，要引入的 js export的值只可为一个，若多余一个如 export {var1,var2,...} 则不可使用这种方式 （经验证无效）。