如何在Vuejs中優雅使用Javascript各種插件

在日常開發中，為了敏捷開發或者更快滿足業務需求，不得不使使用js第三方庫或者插件。

如何在Vue項目中引入javascript第三方庫

---

 

全局變量

將 JavaScript 第三方庫 添加到項目中，最簡單的辦法是通過將其附加到 window 對象上，以使其成為全局變量。

如何引入：

window._ = require('lodash'); 

如何使用：

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

這種情況會使 window 變量不斷增長，但是最關鍵的是，他們不能使用服務器渲染。當應用程序在服務端運行時，window 對象是 undefined 的，因此嘗試訪問 window 下的屬性將會拋出一個錯誤。

使用ES6在每個文件中導入

二流的方法是將庫導入到每個文件中：

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

這是有效的，但是你需要重復手動導入和移除，這是一個痛點：你必須記住將這個庫導入到每個文件中，然后當你的某個文件不用這個庫的時候, 記得要將它從這個文件中移除。如果你沒有正確地設置你的構建工具，則可能會最終導致在構建包中存在同一個庫的多個副本。

更好的方式

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

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

由於所有組件都會繼承 Vue 原型對象上方法，這將使 Moment 自動可用於任何組件，沒有全局變量或任何需要手動導入的組件。它可以在任何 實例/組件 中簡單地通過 this.$moment 訪問被訪問：

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

大功告成！