方法一：配置 webpack ProvidePlugin 全局引入

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的禹王臺網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

假設(shè)要使用到 jquery，那么可以通過配置 webpack 的 ProvidePlugin 的插件來全局引入：

https://webpack.js.org/plugins/provide-plugin/

new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
})

方法二：包裝成插件在 Vue 中調(diào)用 use 方法安裝

另外一種比較靠譜的方法是將第三方模塊打包成插件，如我需要全局使用 echarts，那么在 src 目錄下新建一個(gè) lib，并創(chuàng)建名為 echarts.js 的文件：

import echarts from 'echarts'

export default {
 install (Vue) {
  Object.defineProperty(Vue.prototype, '$echarts', {
   value: echarts
  })
 }
}

上述代碼 export 一個(gè)對象，對象包含一個(gè) install 方法，該方法的參數(shù)是 Vue 構(gòu)造函數(shù)，我們使用 Object.defineProperty 或 Reflect 的方法將 $echarts 定義到 Vue.prototype 中去。

然后在項(xiàng)目中使用：

import echarts from './lib/echarts'

Vue.use(echarts) // use

new Vue({
  // ...
}).$mount('#app')

這樣就可以在 vue 實(shí)例中通過 $echarts 來使用

// ...
let myChart = this.$echarts.init(this.$refs.main)
// ...

其他方法

其他還有在 window 對象中全局定義；或使用 Vue.prototype.xxx = xxx 等，都存在各樣問題，如 window 會導(dǎo)致全局作用域污染；后者定義方式不可靠，比方說 echarts 模塊太大，會經(jīng)常出現(xiàn)擴(kuò)展定義失敗導(dǎo)致的報(bào)錯

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：Vue中如何正確引入第三方模塊的方法步驟
網(wǎng)站地址：http://jinyejixie.com/article26/ijgdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、小程序開發(fā)、App設(shè)計(jì)、云服務(wù)器、企業(yè)網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)