Vue-第三方库扩展

​

​ 之前写过一篇 Vue-组件扩展 的文章，通常我们采用 extends 或 mixins 进行扩展组件；但项目中我们经常还会使用一些第三方库（Lodash, Moment等），如何调用这些工具方法智者见智仁者见仁。

​ 我司现在大部分都是大数据可视化方面的工作，所以在系统中，倡导封装了一批图表的数据转换方法，便于大家的调用和系统的统一。 ​ 在第一个项目中，将这批数据转换方法直接封装到了全局 mixins 中（当然，mixins中还用其他共同业务的处理），但是总有一些模块和页面是不需要这些图表转换方法（需要的模块也并非要全量引入），总觉得不是很合理；于是，在后面的系统中，将这些工具方法单独抽离成 data-factory.js，需要的模块自己调用，但这同时带来了另外一个问题，大部分模块都存在类似的相同代码 import {data2Line, data2Pie} from ‘@/util/data-factory’

全局变量

将这些工具类（第三方库）挂载到window上

// 入口文件
window._ = require('lodash')

全局变量遭到了污染，且服务器端渲染时，并不能获取window对象！

单独引入

这是上述提到的我们项目中使用的方式

// 具体页面
import _ from 'lodash'
// 或者独立引入某些方法
import {unzip} from 'lodash'

比较繁琐，需要的页面都需引入，如果后续想删除库，需要找到每一个引用该库的文件并删除该库的引用；同时，如果构建工具没设置正确，可能导致该库的多份拷贝被引用。

挂载到Vue原型上

// 入口文件
import _ from 'lodash';
Object.defineProperty(Vue.prototype, '_', { value: _ });

configurable、enumerable、writable 默认都为false，即不能被改变、删除和赋值，也就是只读的。

这里只能通过vue实例调用，注意this指向问题！

setTimeout(() => { // 这里用箭头函数
    this._.head()
})

插件形式

export default {
  install: function(Vue) {
    // 添加全局方法Vue.|资源Vue.directive<>|全局mixin组件选项|Vue.prototype实例方法
  }
}

// 入口文件
Vue.use(...)

https://cn.vuejs.org/v2/guide/plugins.html