Vue项目中使用第三方库

本文主要总结了一下在vue-cli中使用第三方库的方式。

1.全局变量

将引入的第三方库作为全局变量挂载在window对象

//main.js
window._ = require('lodash');

//组件中使用
export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.

2.在组件文件中引入

//组件中引入
import _ = require('lodash');
export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.

3.优雅的方式 - 代理到Vue的原型对象上去

代理到vue原型上有2种方式

//方式一
//main.js
import axios from 'axios';
Vue.prototype.$http = axios;

//方式二
//main.js
import axios from 'axios';
Object.defineProperty(Vue.prototype, '$http', { value: axios });

这两种写法的效果是一致的，但是 Object.defineProperty 允许我们通过一个 descriptor 来定义属性. Descriptor 运行我们去设
置对象属性的一些底层(low-level)细节, 如是否允许属性可写? 是否允许属性在 for 循环中被遍历.
通常, 我们不会为此感到困扰, 因为大部分时候, 对于属性赋值, 我们不需要考虑这样的细节. 但这有一个明显的优点: 通过 descriptor
创建的属性默认是只读的.

这就意味着, 一些处于迷糊状态的(coffee-deprived)开发者不能在组件内去做一些很愚蠢的事情, 就像这样:
this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function
此外, 试图给只读实例的方法重新赋值会得到 TypeError: Cannot assign to read only property 的错误.

由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此在所有组件/实例中都可以通过 this.$http: 的方式访问 axios 而不需要定义全局变量或者手动的引入.

//组件中使用
export default {
  created() {
    this.$http.get('/').then(data => {
        console.log(data);
    }).catch(err => {
        console.log(err);
    })
  }
}

$
你可能会注意到, 代理第三库的属性会有一个 $ 前缀, 也可能看到其它类似 $refs, $on, $mount 的属性和方式, 它们也有这个前缀.
这个不是强制要求, 给属性添加 $ 前缀是提供那些处于迷糊状态(coffee-deprived)的开发者这是一个公开的 API, 和 Vuejs 的一些内部属性和方法区分开来.

4.插件的形式

插件的使用形式

1 2	import Vuex from 'vuex'; Vue.use(Vuex);

将一个普通插件改造成vue插件，或者你可以写一个自己的插件给别人使用:

//axios.js
import axios from 'axios';
 
export default {
  install: function(Vue) {
    Object.defineProperty(Vue.prototype, '$http', { value: axios });
  }
}

最后, 利用 Vue 的实例方法 use 将插件添加到项目中:

//main.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);
 
new Vue({
  created() {
    console.log(this.$http ? 'Axios works!' : 'Uh oh..');
  }
})

插件的可选参数
插件的 install 方法可以接受可选参数. 一些开发可能不喜欢将 Axios 实例命名为 $http, 因为这是 Vue Resource 提供的一个通用名字. 因而可以提供一个可选的参数允许他们随意命名:

//axios.js
import axios from 'axios';
 
export default {
  install: function(Vue, name = '$http') {
    Object.defineProperty(Vue.prototype, name, { value: axios });
  }
}

//main.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');
 
new Vue({
  created() {
    console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
  }
})

参考资料：http://www.jqhtml.com/9582.html