关于javascript:在-Vuejs-中使用任意-JavaScript-第三方库

如何在 Vue.js 我的项目中 引入 JavaScript 第三方库

全局变量

将 JavaScript 第三方库 增加到我的项目中，最简略的方法是通过将其附加到 window 对象上，以使其成为全局变量：

// entry.js 文件
window._ = require('lodash'); 
JavaScript 代码:
// MyComponent.vue 文件
export default {created() {console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

这种状况会使 window 变量一直增长，然而最要害的是，他们不能应用服务器渲染。当应用程序在服务端运行时，window 对象是 undefined 的，因而尝试拜访 window 下的属性将会抛出一个谬误。

在每个文件中导入

另一种二流的办法是将库导入到每个文件

// MyComponent.vue 文件
import _ from 'lodash';
export default {created() {console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
}

这是无效的，然而你须要反复手动导入和移除，这是一个痛点：你必须记住将这个库导入到每个文件中，而后当你的某个文件不必这个库的时候, 记得要将它从这个文件中移除。如果你没有正确地设置你的构建工具，则可能会最终导致在构建包中存在同一个库的多个正本。

一个更好的形式

在 Vue 我的项目中应用 Javascript 库的最洁净，最强壮的办法是将其代理为 Vue 原型对象的属性。咱们用这种形式，将 Moment 日期和工夫库增加到咱们的我的项目中：

JavaScript 代码:
// entry.js 文件
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment});
因为所有组件都会继承 Vue 原型对象上办法，这将使 Moment 主动可用于任何组件，没有全局变量或任何须要手动导入的组件。它能够在任何 实例 / 组件 中简略地通过 this.$moment 拜访被拜访：JavaScript 代码:
// MyComponent.vue 文件
export default {created() {console.log('The time is' . this.$moment().format("HH:mm"));
  }
}

当初让咱们花点工夫理解一下这是如何工作的。

Object.defineProperty
咱们通常会像这样设置一个对象属性：

JavaScript 代码:
Vue.prototype.$moment = moment;

你能够这么做，然而通过应用 Object.defineProperty，咱们能够应用 描述符 来定义咱们的属性。描述符容许咱们设置一些低级细节，例如咱们的属性是否可写，以及在 for 循环中枚举期间是否显示。

咱们通常不会在日常应用 Javascript 中应用到描述符，因为 99% 的工夫咱们不须要这么粗疏的属性调配。但这里给咱们一个显著的劣势：默认状况下，应用描述符创立的属性是只读的。

这意味着，一些糊涂的开发人员（可能是你）不能在组件内去做一些很愚昧的事件, 并且毁坏所有.

JavaScript 代码:
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.

$

您会留神到，咱们将库代理为以美元符号“$”为前缀的属性名。你可能还看过其余的属性和办法，例如，$refs, $on, $mount 等等也都是以”$”结尾。

尽管属性名上增加前缀不是必须的，然而这样做能够揭示糊涂的开发人员（可能是你），这是一个公共 API 属性或办法，欢送你应用，不像其余属性的实例，可能只是为了 Vue 的外部应用。

作为基于原型的语言，Javascript 中没有（真正的）类，因而也没有“公有”和“公共”变量或“动态”办法。这个常规是一种很好的替代品，咱们认为是值得恪守的约定。

this

你还会留神到，你能够应用 this.libraryName 来应用这个库，然而这样做会有个小小的问题，因为它当初是一个实例办法。

然而，这样做的后果是，与全局变量不同，您在应用库时必须确保处于正确的作用域中。外部的回调办法不能通过 this 来拜访你的库。

幸好，ES6 中的箭头函数是一个不错的解决方案, 它能确保你在正确的作用域中:

JavaScript 代码:
// script.js
this.$http.get('/').then(res => {if (res.status !== 200) {this.$http.get('/') // etc
    // 只在箭头回调函数中起作用。哲人码头注：你也能够应用 ES5 的 bind();}
});

为什么不使它成为一个插件？

如果您打算在多个 Vue 我的项目中应用 JavaScript 第三方库，或者您想与世界分享你的库，您能够将其构建成插件！

插件提取复杂性的局部，容许你在我的项目中简略地执行以下操作来增加你抉择的库：

JavaScript 代码:
// script.js
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);

应用这两行，咱们能够在任何组件中应用 JavaScript 第三方库，就像咱们能够应用 Vue Router，Vuex 和其余应用 Vue.use 的插件一样。

编写一个插件
首先，为您的插件创立一个文件。在这个例子中，我将创立一个插件，将 Axios 增加到你所有的 Vue 实例和组件中，因而我将调用文件 axios.js。

要理解的次要内容是：插件必须公开一个 install 办法，并且将 Vue 构造函数作为第一个参数：

JavaScript 代码:
// axios.js
export default {install: function(Vue) {// Do stuff}
}

当初咱们能够应用之前介绍的办法将库增加到原型对象中:

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

咱们当初须要做的事件是 use 实例办法将咱们的库增加到一个我的项目。例如，咱们当初能够轻松地增加 Axios 库：

JavaScript 代码:
// entry.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 曾经应用了这个名字，所以让咱们应用一个可选参数来让它们变成你所喜爱的办法名：

JavaScript 代码:
// axios.js
import axios from 'axios';
export default {install: function(Vue, name = '$http') {Object.defineProperty(Vue.prototype, name, { value: axios});
  }
}
JavaScript 代码:
// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');
new Vue({created() {console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
  }
})