vue 项目中公共 js 文件的封装

我们一般的做法是在 src 文件夹下 新建一个 util 文件夹，util 文件夹里面存放一个 utils.js 文件，这个 js 文件中存放公共的函数。下面讲解大概三种用法。

一、对 utils.js 通过 export default 默认导出为对象

utils.js 内容：

//import {Message, MessageBox} from 'element-ui' // elementui 引入(这里根据个人需求决定是否需要导入)
export default {
  //等同于test: function ()...
  test(x){
    console.log(x)
  },
  hello(){
    console.log("Hello World!")
  }
}

在main.js中引入：

//公共js函数
import utils from "@/util/utils"; // @ 默认的是 src 文件夹，后面省略了utils.js 后面的后缀名js
Vue.prototype.$utils = utils;    //直接定义在vue的原型上面

 这样在组件中，就可以直接拿来用了，写法为：this.$utils.hello( )

 二、对 utils 通过 export 默认导出

utils.js 内容：

function test(x){
  console.log(x)
}
function  hello(){
  console.log("Hello World!")
}
export default{   //注意这里是default
  test,
  hello
}

在组件中就可以通过 import utils from '@/util/utils.js' 引入，用法为： utils.hello( ) 

三、对 utils.js 通过 export 普通导出

utils.js 内容：

export function test(x){
  console.log(x)
}
export function  hello(){
  console.log("Hello World!")
}

然后在组件中通过 import { test, hello } from '@/util/utils.js' 引入（这里可以根据自己的需求，用到哪些函数，就引入哪些函数），用法为 test( )