Vue框架中正確引入JS庫的方法介紹

本文主要給大家介紹的是關(guān)于在Vue框架中正確引入JS庫的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說，來一起看看詳細(xì)的介紹：

錯(cuò)誤示范

全局變量法

最不靠譜的方式就是將導(dǎo)入的庫掛在全部變量window 對(duì)象下：

// entry.js:
window._ = require('lodash');

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

這種方式的缺點(diǎn)有很多，我們只說其中一個(gè)關(guān)鍵的點(diǎn)：不支持服務(wù)端渲染。當(dāng)應(yīng)用跑在服務(wù)端時(shí)，window對(duì)象不存在，當(dāng)然試圖去訪問window下的屬性會(huì)拋出錯(cuò)誤。

處處引入法

另外一個(gè)不太優(yōu)雅的方式就是在需要的每個(gè)文件中都引入對(duì)應(yīng)的庫：

// MyComponent.vue：
import _ from 'lodash';

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

雖然這方法是可行的，但是太不簡(jiǎn)潔。你必須在每個(gè)文件中都記得引入， 而且如果不需要了，又得重新刪除。另外，如果打包策略不夠明智的話，可能會(huì)打包出多份重復(fù)的代碼。

正確引入方式

最簡(jiǎn)單靠譜的方式是用庫變成Vue的原型對(duì)象的屬性。下面，我來演示如何將Moment 庫引入：

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

Object.definePrototype 語法參見 MDN

由于所有的組件都會(huì)繼承Vue原型對(duì)象上的方法，因此這些方法在任何組件文件中都能通過this.$moment 訪問到：

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

使用 Object.defineProperty 定義對(duì)象屬性，如果不在屬性描述器中額外說明，則該屬性就是默認(rèn)只讀的，保護(hù)引入的庫不被重新賦值。

寫成插件

如果你在項(xiàng)目的很多地方都用了某個(gè)庫，或者你希望全局可用，你可以構(gòu)建自己的Vue 插件。

插件能化繁為簡(jiǎn)，能讓你像下面這樣很簡(jiǎn)單地引入自己想要的庫：

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

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

如何寫插件

首先，創(chuàng)建一個(gè)文件。本例中，我將引入一個(gè)Axios庫的插件。我們就把這個(gè)文件命名為axios.js 吧。

最關(guān)鍵的地方在于，我們需要暴露一個(gè)將Vue構(gòu)造器作為第一個(gè)參數(shù)的install 方法。

// axios.js:

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

然后我們可以用之前的方式將庫添加到Vue的原型對(duì)象上：

// axios.js
import axios from 'axios';

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

接著我們只需要Vue實(shí)例的use方法就能將這個(gè)庫引入整個(gè)項(xiàng)目了。我們像下面代碼一樣簡(jiǎn)單引入：

// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);

new Vue({
 created() {
 console.log(this.$http ? 'Axios works!' : 'Uh oh..');
 }
})

插件參數(shù)設(shè)置

插件的install方法還可以接受其他的可選參數(shù)。有些開發(fā)者可能不喜歡Axios實(shí)例對(duì)象的方法名$http，因?yàn)閂ue resource插件的方法名也是這個(gè)。然后，讓我們利用第二個(gè)參數(shù)來修改它。

// axios.js
import axios from 'axios';

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

// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');

new Vue({
 created() {
 console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
 }
})

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

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com