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 的技术文章，只谈技术不谈八卦 😊