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( )