摘要：一個(gè)更好的方式在項(xiàng)目中使用庫的最干凈，最健壯的方法是將其代理為原型對(duì)象的屬性。然而，這樣做的結(jié)果是，與全局變量不同，您在使用庫時(shí)必須確保處于正確的作用域中。

如何在 Vue.js 項(xiàng)目中 引入 JavaScript 第三方庫

全局變量

將 JavaScript 第三方庫 添加到項(xiàng)目中，最簡(jiǎn)單的辦法是通過將其附加到 window 對(duì)象上，以使其成為全局變量：

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

這種情況會(huì)使 window 變量不斷增長(zhǎng)，但是最關(guān)鍵的是，他們不能使用服務(wù)器渲染。當(dāng)應(yīng)用程序在服務(wù)端運(yùn)行時(shí)，window 對(duì)象是 undefined 的，因此嘗試訪問 window 下的屬性將會(huì)拋出一個(gè)錯(cuò)誤。

在每個(gè)文件中導(dǎo)入

另一種二流的方法是將庫導(dǎo)入到每個(gè)文件

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

這是有效的，但是你需要重復(fù)手動(dòng)導(dǎo)入和移除，這是一個(gè)痛點(diǎn)：你必須記住將這個(gè)庫導(dǎo)入到每個(gè)文件中，然后當(dāng)你的某個(gè)文件不用這個(gè)庫的時(shí)候, 記得要將它從這個(gè)文件中移除。如果你沒有正確地設(shè)置你的構(gòu)建工具，則可能會(huì)最終導(dǎo)致在構(gòu)建包中存在同一個(gè)庫的多個(gè)副本。

一個(gè)更好的方式

在Vue項(xiàng)目中使用Javascript庫的最干凈，最健壯的方法是將其代理為 Vue 原型對(duì)象的屬性。我們用這種方式，將 Moment日期和時(shí)間庫添加到我們的項(xiàng)目中：

JavaScript 代碼:
// entry.js 文件
import moment from "moment";
Object.definePrototype(Vue.prototype, "$moment", { value: moment });
由于所有組件都會(huì)繼承 Vue 原型對(duì)象上方法，這將使 Moment 自動(dòng)可用于任何組件，沒有全局變量或任何需要手動(dòng)導(dǎo)入的組件。它可以在任何 實(shí)例/組件 中簡(jiǎn)單地通過 this.$moment 訪問被訪問：

JavaScript 代碼:
// MyComponent.vue 文件
export default {
  created() {
    console.log("The time is " . this.$moment().format("HH:mm"));
  }
}

現(xiàn)在讓我們花點(diǎn)時(shí)間了解一下這是如何工作的。

Object.defineProperty
我們通常會(huì)像這樣設(shè)置一個(gè)對(duì)象屬性：

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

你可以這么做，但是通過使用 Object.defineProperty ，我們可以使用 描述符 來定義我們的屬性。描述符允許我們?cè)O(shè)置一些低級(jí)細(xì)節(jié)，例如我們的屬性是否可寫，以及在 for 循環(huán)中枚舉期間是否顯示。

我們通常不會(huì)在日常使用 Javascript 中使用到描述符，因?yàn)?99％ 的時(shí)間我們不需要這么細(xì)致的屬性分配。但這里給我們一個(gè)明顯的優(yōu)勢(shì)：默認(rèn)情況下，使用描述符創(chuàng)建的屬性是只讀的。

這意味著，一些糊涂的開發(fā)人員（可能是你）不能在組件內(nèi)去做一些很愚蠢的事情, 并且破壞一切.

JavaScript 代碼:
this.$http = "Assign some random thing to the instance method";
this.$http.get("/"); // TypeError: this.$http.get is not a function
相反, 我們的只讀實(shí)例則能很好的保護(hù)我們的庫, 因?yàn)槿绻腥嗽噲D去覆蓋它, 將會(huì)獲得一個(gè)錯(cuò)誤:  TypeError: Cannot assign to read only property.

$

您會(huì)注意到，我們將庫代理為以美元符號(hào)“$”為前綴的屬性名。 你可能還看過其他的屬性和方法，例如，$refs, $on, $mount等等也都是以”$”開頭。

雖然屬性名上添加前綴不是必須的，但是這樣做可以提醒糊涂的開發(fā)人員（可能是你），這是一個(gè)公共API屬性或方法，歡迎你使用，不像其他屬性的實(shí)例，可能只是為了 Vue 的內(nèi)部使用。

作為基于原型的語言，Javascript 中沒有（真正的）類，因此也沒有 “私有” 和 “公共” 變量或 “靜態(tài)” 方法。 這個(gè)慣例是一種很好的替代品，我們認(rèn)為是值得遵守的約定。

this

你還會(huì)注意到，你可以使用 this.libraryName 來使用這個(gè)庫 ，但是這樣做會(huì)有個(gè)小小的問題，因?yàn)樗F(xiàn)在是一個(gè)實(shí)例方法。

然而，這樣做的結(jié)果是，與全局變量不同，您在使用庫時(shí)必須確保處于正確的作用域中。內(nèi)部的回調(diào)方法不能通過 this 來訪問你的庫。

幸好，ES6中的箭頭函數(shù)是一個(gè)不錯(cuò)的解決方案, 它能確保你在正確的作用域中:

JavaScript 代碼:
// script.js
this.$http.get("/").then(res => {
  if (res.status !== 200) {
    this.$http.get("/") // etc
    // 只在箭頭回調(diào)函數(shù)中起作用。愚人碼頭注：你也可以使用ES5 的 bind();
  }
});

為什么不使它成為一個(gè)插件？

如果您打算在多個(gè) Vue 項(xiàng)目中使用 JavaScript 第三方庫，或者您想與世界分享你的庫，您可以將其構(gòu)建成插件！

插件提取復(fù)雜性的部分，允許你在項(xiàng)目中簡(jiǎn)單地執(zhí)行以下操作來添加你選擇的庫：

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

使用這兩行，我們可以在任何組件中使用 JavaScript 第三方庫，就像我們可以使用 Vue Router ，Vuex 和其他使用 Vue.use 的插件一樣。

編寫一個(gè)插件
首先，為您的插件創(chuàng)建一個(gè)文件。在這個(gè)例子中，我將創(chuàng)建一個(gè)插件，將 Axios 添加到你所有的 Vue 實(shí)例和組件中，因此我將調(diào)用文件 axios.js。

要了解的主要內(nèi)容是：插件必須公開一個(gè) install 方法，并且將 Vue 構(gòu)造函數(shù)作為第一個(gè)參數(shù)：

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

現(xiàn)在我們可以使用之前介紹的方法將庫添加到原型對(duì)象中:

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

我們現(xiàn)在需要做的事情是 use 實(shí)例方法將我們的庫添加到一個(gè)項(xiàng)目。例如，我們現(xiàn)在可以輕松地添加 Axios 庫：

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

彩蛋: 插件可選參數(shù)

你插件里的 install 方法允許接受可選參數(shù)。 一些開發(fā)人員可能不是很喜歡使用 axios 實(shí)例的方法名 $http ，因?yàn)?Vue Resource 已經(jīng)使用了這個(gè)名字，所以讓我們使用一個(gè)可選參數(shù)來讓它們變成你所喜歡的方法名：

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..");
  }
})