Vue架構中正確引入JS庫的方法介紹，vuejs

Vue架構中正確引入JS庫的方法介紹，vuejs

本文主要給大家介紹的是關於在Vue架構中正確引入JS庫的相關內容，分享出來供大家參考學習，下面話不多說，來一起看看詳細的介紹：

錯誤示範

全域變數法

最不靠譜的方式就是將匯入的庫掛在全部變數window 對象下：

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

這種方式的缺點有很多，我們只說其中一個關鍵的點：不支援服務端渲染。當應用跑在服務端時，window對象不存在，當然試圖去訪問window下的屬性會拋出錯誤。

處處引入法

另外一個不太優雅的方式就是在需要的每個檔案中都引入對應的庫：

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

雖然這方法是可行的，但是太不簡潔。你必須在每個檔案中都記得引入， 而且如果不需要了，又得重新刪除。另外，如果打包策略不夠明智的話，可能會打包出多份重複的代碼。

正確引入方式

最簡單靠譜的方式是用庫變成Vue的原型對象的屬性。下面，我來示範如何將Moment 庫引入：

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

Object.definePrototype 文法參見 MDN

由於所有的組件都會繼承Vue原型對象上的方法，因此這些方法在任何組件檔案中都能通過this.$moment 訪問到：

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

使用 Object.defineProperty 定義對象屬性，如果不在屬性描述器中額外說明，則該屬性就是預設唯讀，保護引入的庫不被重新賦值。

寫成外掛程式

如果你在項目的很多地方都用了某個庫，或者你希望全域可用，你可以構建自己的Vue 外掛程式。

外掛程式能化繁為簡，能讓你像下面這樣很簡單地引入自己想要的庫：

import MyLibraryPlugin from 'my-library-plugin';Vue.use(MyLibraryPlugin);

就像Vue Route，Vuex等外掛程式一樣，我們的庫僅僅需要兩行，就能在任何地方使用了。

如何寫外掛程式

首先，建立一個檔案。本例中，我將引入一個Axios庫的外掛程式。我們就把這個檔案命名為axios.js 吧。

最關鍵的地方在於，我們需要暴露一個將Vue構造器作為第一個參數的install 方法。

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

然後我們可以用之前的方式將庫添加到Vue的原型對象上：

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

接著我們只需要Vue執行個體的use方法就能將這個庫引入整個項目了。我們像下面代碼一樣簡單引入：

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

外掛程式參數設定

外掛程式的install方法還可以接受其他的選擇性參數。有些開發人員可能不喜歡Axios執行個體對象的方法名$http，因為Vue resource外掛程式的方法名也是這個。然後，讓我們利用第二個參數來修改它。

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

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

當然上面，我們可以直接在Object.defineProperty的中將name屬性寫死成$axios。也可以在install方法中引入多個需要的庫。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援