### 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`调用方法了
