### 6.1 編寫自己的工具庫插件
> 參考文檔：
>
> vue插件說明:https://cn.vuejs.org/v2/guide/plugins.html
項目中往往會使用一些通用的函數，比如獲取當前時間、時間格式轉化，防抖，節流等，我們可以把這個公用的部分封裝成插件，在main.js中引入。
首先，在src目錄下新建`utils`文件夾，在里面新建`index.js`,`utils.js`文件
我們在`utils.js`中編寫自己的工具庫，然后導出
```js
class Utils{
constructor(){
this.d=new Date();//date對象
this.instance=null;
}
static getInstance(){//單例模式
if(!this.instance){
this.instance = new Utils();
}
return this.instance;
}
pick(obj,arr){//pick({ a: 1, b: '2', 'c': 3 }, ['a', 'c']) =>{a:1,c:3}
return arr.reduce((acc,curr)=>{
return (curr in obj && (acc[curr] = obj[curr]), acc)
},{})
}
dateFormat(datetime,pattern=""){
let vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
let dt=new Date(datetime);
let y=dt.getFullYear();
let m=(dt.getMonth()+1).toString().padStart(2,'0');
let d=dt.getDate().toString().padStart(2,'0');
let hh=dt.getHours().toString().padStart(2,'0');
let mm=dt.getMinutes().toString().padStart(2,'0');
let ss=dt.getSeconds().toString().padStart(2,'0');
let vWeek_s = dt.getDay();//星期
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`
}else if(pattern.toLowerCase() === 'mm-dd'){
return `${m}-${d}`
}else if(pattern.toLowerCase() === 'yyyymmddhhmmss'){
return `${y}${m}${d}${hh}${mm}${ss}`
}else {
return `${y}-${m}-${d} ${hh}:${mm}:${ss} ${vWeek[vWeek_s]}`
}
}
}
const UTIL = Utils.getInstance();
// console.log(UTIL.dateFormat(new Date(),'yyyymmddhhmmss')) //=>20190312110722
// console.log(UTIL.dateFormat(new Date()))//=>2019-03-12 11:07:22 星期二
// console.log(UTIL.pick({ a: 1, b: '2', 'c': 3 }, ['a', 'c']))//=>{a:1,c:3}
export default UTIL;
```
然后在index.js中編寫插件，導出
```js
//utils/index.js
import UTIL from './utils.js'
const UtilPlugin={}
UtilPlugin.install=function(Vue,options){//插件必須有install方法，接受兩個參數，一個是Vue構造器,一個是參數
Vue.prototype.$utils=UTIL//在vue prototype上添加實例方法
}
export default UtilPlugin
```
最后在main.js中引入并use插件
```js
// utils
import Util from './utils/index'
Vue.use(Util)
console.log(Vue.prototype.$util)//打印下是否引入成功
```
之后就可以在組件中通過使用`this.$utils`調用方法了
