一:Vue.use()的作用

1. 扩展Vue的功能 : 比如添加全局过滤器,添加全局组件

2. 示例: Vue.use(vuex),Vue.use(vueRouter),Vue.use(Vant) … 从拓展vue的功能意义来说vuex,vueRouter,Vant 做可以叫做vue的插件

二: 封装过程

1. 创建文件 src/utils/formateDate.js

这个文件是把日期格式化的函数单独封装成一个模块,以供在不同项目中使用

  1. export const relativeTime = val => {
  2.   const t = new Date(val)
  3.   const diff = Date.now() - t.getTime()
  5.   const year = Math.floor(diff / (1000 * 3600 * 24 * 365))
  6.   if (year) {
  7.     return `${year}年前`
  8.   }
  9.   const month = Math.floor(diff / (1000 * 3600 * 24 * 30))
  10.   if (month) {
  11.     return `${month}月前`
  12.   }
  13.   const day = Math.floor(diff / (1000 * 3600 * 24))
  14.   if (day) {
  15.     return `${day}天前`
  16.   }
  17.   const hour = Math.floor(diff / (1000 * 3600))
  18.   if (hour) {
  19.     return `${hour}小时前`
  20.   }
  21.   const minute = Math.floor(diff / (1000 * 60))
  22.   if (minute) {
  23.     return `${minute}分钟前`
  24.   } else {
  25.     return '刚才'
  26.   }
  27. }
  28. export default {
  29.   install: function (Vue) {
  30.     // console.log('install', val === Vue)
  31.     // 补充定义全局过滤器
  32.     // Vue.filter('relativeTime', (val)=>{})
  34.     Vue.filter('relativeTime', relativeTime)
  35.   }
  36. }

2. 在main.js里面导入

  1. // 省略其他...
  2. import obj from '导入formateDate.js文件'
  4. Vue.use(obj)

3. 运行原理

a) 相当于install这个对象呗默认导出了,然后在main.js里面obj又将它导入,紧接着就是

Vue.use(obj) .

b) 那么Vue.use(obj)又是怎么工作的呢?

Vue.use()会找到install方法,同时把Vue传进来给函数的形参,然后在函数里面

(‘relativeTime’, relativeTime),传入了一个全局的时间过滤器,这个时候Vue就被我们拓展

了一个全局过滤器的功能出来,这样直接就可以Vue.use() 了

图示说明:

image.png