Vue 中如何正確引入第三方模塊

Vue 中如何正確引入第三方模塊

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

假設要使用到 jquery，那麼能夠經過配置 webpack 的 ProvidePlugin 的插件來全局引入：

https://webpack.js.org/plugin...

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

方法二：包裝成插件在 Vue 中調用 use 方法安裝

另一種比較靠譜的方法是將第三方模塊打包成插件，如我須要全局使用 echarts，那麼在 src 目錄下新建一個 lib，並建立名爲 echarts.js 的文件：

import echarts from 'echarts'

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

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

而後在項目中使用：

import echarts from './lib/echarts'

Vue.use(echarts) // use

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

這樣就能夠在 vue 實例中經過 $echarts 來使用

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

其餘方法

其餘還有在 window 對象中全局定義；或使用 Vue.prototype.xxx = xxx 等，都存在各樣問題，如 window 會致使全局做用域污染；後者定義方式不可靠，比方說 echarts 模塊太大，會常常出現擴展定義失敗致使的報錯

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊