如何在Vue框架中引入JS庫(kù)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
錯(cuò)誤示范
全局變量法
最不靠譜的方式就是將導(dǎo)入的庫(kù)掛在全部變量window 對(duì)象下：
重慶分公司
重慶分公司
// entry.js:
window._ = require('lodash');
// MyComponent.vue:
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}這種方式的缺點(diǎn)有很多，我們只說(shuō)其中一個(gè)關(guān)鍵的點(diǎn)：不支持服務(wù)端渲染。當(dāng)應(yīng)用跑在服務(wù)端時(shí)，window對(duì)象不存在，當(dāng)然試圖去訪(fǎng)問(wèn)window下的屬性會(huì)拋出錯(cuò)誤。
處處引入法
另外一個(gè)不太優(yōu)雅的方式就是在需要的每個(gè)文件中都引入對(duì)應(yīng)的庫(kù)：
// MyComponent.vue：
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}雖然這方法是可行的，但是太不簡(jiǎn)潔。你必須在每個(gè)文件中都記得引入， 而且如果不需要了，又得重新刪除。另外，如果打包策略不夠明智的話(huà)，可能會(huì)打包出多份重復(fù)的代碼。
正確引入方式
最簡(jiǎn)單靠譜的方式是用庫(kù)變成Vue的原型對(duì)象的屬性。下面，我來(lái)演示如何將Moment 庫(kù)引入：
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });Object.definePrototype語(yǔ)法參見(jiàn) MDN
由于所有的組件都會(huì)繼承Vue原型對(duì)象上的方法，因此這些方法在任何組件文件中都能通過(guò)this.$moment 訪(fǎng)問(wèn)到：
// MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}使用Object.defineProperty定義對(duì)象屬性，如果不在屬性描述器中額外說(shuō)明，則該屬性就是默認(rèn)只讀的，保護(hù)引入的庫(kù)不被重新賦值。
寫(xiě)成插件
如果你在項(xiàng)目的很多地方都用了某個(gè)庫(kù)，或者你希望全局可用，你可以構(gòu)建自己的Vue 插件。
插件能化繁為簡(jiǎn)，能讓你像下面這樣很簡(jiǎn)單地引入自己想要的庫(kù)：
import MyLibraryPlugin from 'my-library-plugin'; Vue.use(MyLibraryPlugin);
就像Vue Route，Vuex等插件一樣，我們的庫(kù)僅僅需要兩行，就能在任何地方使用了。
如何寫(xiě)插件
首先，創(chuàng)建一個(gè)文件。本例中，我將引入一個(gè)Axios庫(kù)的插件。我們就把這個(gè)文件命名為axios.js 吧。
最關(guān)鍵的地方在于，我們需要暴露一個(gè)將Vue構(gòu)造器作為第一個(gè)參數(shù)的install 方法。
// axios.js:
export default {
install: function(Vue) {
// Do stuff
}
}然后我們可以用之前的方式將庫(kù)添加到Vue的原型對(duì)象上：
// axios.js
import axios from 'axios';
export default {
install: function(Vue) {
Object.defineProperty(Vue.prototype, '$http', { value: axios });
}
}接著我們只需要Vue實(shí)例的use方法就能將這個(gè)庫(kù)引入整個(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ù)。有些開(kāi)發(fā)者可能不喜歡Axios實(shí)例對(duì)象的方法名$http，因?yàn)閂ue resource插件的方法名也是這個(gè)。然后，讓我們利用第二個(gè)參數(shù)來(lái)修改它。
// 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..');
}
})看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)建站的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、建站服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
