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

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

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

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

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

全局变量

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

entry.js

JavaScript

window._ = require('lodash');

MyComponent.vue

JavaScript

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

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

导入每个文件

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

MyComponent.vue

JavaScript

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

这是可行的，但它并不是很干燥，而且基本上是一种痛苦：您必须记住将它导入到每个文件中，如果您停止在该文件中使用它，则再次删除它。如果您没有正确地设置您的构建工具，那么您的构建中可能会有多个相同库的副本。

更好的方法

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

entry.js

JavaScript

import moment from 'moment';

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

由于所有组件都从Vue Prototype对象继承它们的方法，这将使所有组件都可以在没有全局变量或手动导入的任何组件中自动使用。可以简单地在任何实例/组件中访问this.$moment:

MyNewComponent.vue

JavaScript

export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}

现在让我们花时间了解一下这是如何工作的。

Object.defineProperty

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

JavaScript

Vue.prototype.$moment = moment;

你可以在这里做，但是Object.defineProperty相反，我们可以使用descriptor。描述符允许我们设置一些低级别的详细信息，例如我们的属性是否可写，以及它是否在枚举期间显示在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：NotAssistto只读属性”。

$

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

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

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

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

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

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

JavaScript

this.$http.get('/').then(res => {
if (res.status !== 200) {
this.$http.get('/') // etc
// Only works in a fat arrow callback.
}
});

为什么不把它变成插件呢？

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

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

JavaScript

import MyLibraryPlugin from 'my-library-plugin';

Vue.use(MyLibraryPlugin);

使用这两行，我们可以在任何组件中使用库，就像我们可以使用Vue路由器、Vuex和其他利用Vue.use.

编写插件

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

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

axios.js

JavaScript

export default {
install: function(Vue) {
// Do stuff
}
}

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

axios.js

JavaScript

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

这个use实例方法是将库添加到项目中所需的全部内容。例如，我们现在可以像这样轻松地添加Axios库：

entry.js

JavaScript

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

奖励：插件可选参数

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

axios.js

JavaScript

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

entry.js

JavaScript

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

为感谢您对我们的认可，特意准备了一些IT入门和进阶的干货

包括：Java、UI设计、H5前端、Python+人工智能、软件测试和新媒体运营六大学科视频资料。以及IT就业大礼包。

线上视频、音频，随时学习观看

关注我们并私信“资料”即可获取。