如何在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"));
  }
}

大功告成！