在 Vue.js 中使用第三方庫的方式有：
1.全局變量
在項目中添加第三方庫的最簡單方式是講其作為一個全局變量, 掛載到 window 對象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
這種方式不適合于服務端渲染, 因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.

2.在每個文件中引入
另一個簡單的方式是在每一個需要該庫的文件中導入:
MyComponent.vue
import _ from 'lodash';

export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}
這種方式是允許的, 但是比較繁瑣, 并且?guī)淼膯栴}是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件并刪除該庫的引用. 如果構建工具沒設置正確, 可能導致該庫的多份拷貝被引用.

3.優(yōu)雅的方式
在 Vuejs 項目中使用 JavaScript 庫的一個優(yōu)雅方式是講其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入 Moment 庫:
entry.js
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

由于所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此在所有組件/實例中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全局變量或者手動的引入.
MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}