如何向Vue项目添加JavaScript库所需的代码

Lodash, Moment, Axios, Async... 这些是有用的JavaScript库，您希望在许多Vue.js应用程序中使用这些库。

但是，随着项目的发展，您将将代码分离为单个文件组件和模块文件。您还可能希望在不同的环境中运行您的应用程序，以允许服务器呈现。

除非您找到一种简单而健壮的方法将这些JavaScript库包含在组件和模块文件中，否则它们将是一个麻烦！

多么不在Vue.js项目中包含一个库

全局变量

将库添加到项目中的天真方法是通过将库附加到window目的：

entry.js

window._ = require('lodash');

export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

针对窗口变量的情况很长，但是，特别是在本讨论中，它们不适用于服务器呈现。当应用程序在服务器上运行时，window对象将是未定义的，因此试图访问属性将以错误结束。

导入每个文件

另一种二流方法是将库导入到每个文件中：

MyComponent.vue

更好的方法

在Vue项目中使用JavaScript库的最干净和最健壮的方法是将其代理到Vue Prototype对象的属性。让我们这样做，将时间、日期和时间库添加到我们的项目中：

entry.js

import moment from 'moment';

Object.definePrototype(Vue.prototype, '$moment', { value: moment });

MyNewComponent.vue

Object.defineProperty

我们通常会设置如下对象属性：

Vue.prototype.$moment = moment;

在日常的JavaScript中，我们通常不会考虑这个问题，因为99%的时间我们都不需要这样的细节来分配属性。但是在这里，它给了我们一个明显的优势：用描述符创建的属性是只读默认情况下。

这意味着，一些缺少咖啡的开发人员(可能是您)无法在组件中做一些愚蠢的事情，从而破坏一切：

this.$http = 'Assign some random thing to the instance method';

this.$http.get('/'); // TypeError: this.$http.get is not a function

$

您会注意到，我们将我们的库代理到一个以美元符号“$”为前缀的属性名。您可能还看到了其他属性和方法，如$refs, $on, $mount，等等，它们也有这个前缀。

虽然不是必需的，但前缀被添加到属性中，以提醒缺乏咖啡的开发人员(再次)，这是一个欢迎您使用的公共API属性或方法，与实例的其他属性不同，这些属性可能只是用于Vue的内部使用。

作为一种基于原型的语言，JavaScript中没有(真正的)类，因此它没有“私有”和“公共”变量或“静态”方法。这个公约是一个温和的替代，我认为是值得遵循的。

这

您还会注意到要使用您使用的库this.libraryName这可能并不令人惊讶，因为它现在是一个实例方法。

但是，这样做的一个结果是，与全局变量不同，您必须确保在使用库时处于正确的范围内。在回调方法中，无法访问this你的图书馆住的地方。

FAT箭头回调是确保您保持在正确范围内的一个很好的解决方案：

如果您计划在多个Vue项目中使用一个库，或者您想要与世界共享它，您可以将其构建到您自己的插件中！

插件抽象了复杂性，并允许您在项目中简单地执行以下操作以添加所选库：

import MyLibraryPlugin from 'my-library-plugin';

Vue.use(MyLibraryPlugin);

编写插件

首先，为插件创建一个文件。在本例中，我将制作一个插件，将Axios添加到所有Vue实例和组件中，因此我将调用该文件axios.js.

主要要了解的是，插件必须公开install方法，它将Vue构造函数作为第一个参数：

axios.js

现在，我们可以使用前面的方法将库添加到Prototype对象中：

axios.js

entry.js

奖励：插件可选参数

插件安装方法可以采用可选参数。有些开发人员可能不喜欢调用他们的Axios实例方法。$http由于Vue Resource通常被命名为Vue Resource，所以让我们使用一个可选的参数来允许他们将其更改为他们喜欢的任何东西：

axios.js